კომუნალური API
utility API არის Sass-ზე დაფუძნებული ინსტრუმენტი სასარგებლო კლასების გენერირებისთვის.
Bootstrap უტილიტები გენერირდება ჩვენი უტილიტა API-ით და მათი გამოყენება შესაძლებელია Sass-ის საშუალებით ჩვენი ნაგულისხმევი კომუნალური კლასების ნაკრების შესაცვლელად ან გასაგრძელებლად. ჩვენი სასარგებლო API დაფუძნებულია Sass რუქებისა და ფუნქციების სერიაზე სხვადასხვა ვარიანტებით კლასების ოჯახების შესაქმნელად. თუ არ იცნობთ Sass რუკებს, წაიკითხეთ Sass-ის ოფიციალური დოკუმენტები დასაწყებად.
რუკა შეიცავს ყველა ჩვენს კომუნალურ პროგრამას $utilities
და მოგვიანებით გაერთიანდება თქვენს მორგებულ $utilities
რუკასთან, თუ ეს არის. კომუნალური რუქა შეიცავს კომუნალური ჯგუფების ღილაკების ჩამონათვალს, რომლებიც იღებენ შემდეგ ვარიანტებს:
ვარიანტი | ტიპი | აღწერა |
---|---|---|
property |
საჭირო | ქონების სახელი, ეს შეიძლება იყოს სტრიქონი ან სტრიქონების მასივი (მაგ. ჰორიზონტალური ბალიშები ან მინდვრები). |
values |
საჭირო | მნიშვნელობების სია, ან რუკა, თუ არ გსურთ, რომ კლასის სახელი იყოს იგივე მნიშვნელობა. თუ null გამოიყენება რუკის გასაღებად, ის არ არის კომპილირებული. |
class |
სურვილისამებრ | ცვლადი კლასის სახელისთვის, თუ არ გსურთ, რომ ის იგივე იყოს, რაც თვისება. იმ შემთხვევაში, თუ თქვენ არ მიუთითებთ class გასაღებს და property გასაღები არის სტრიქონების მასივი, კლასის სახელი იქნება property მასივის პირველი ელემენტი. |
state |
სურვილისამებრ | ფსევდო-კლასის ვარიანტების სია, როგორიცაა :hover ან :focus გენერირება კომუნალური პროგრამისთვის. ნაგულისხმევი მნიშვნელობა არ არის. |
responsive |
სურვილისამებრ | ლოგიკური მიუთითებს, საჭიროა თუ არა საპასუხო კლასების გენერირება. false ნაგულისხმევად. |
rfs |
სურვილისამებრ | ლოგიკური სითხის ხელახალი სკალირების გასააქტიურებლად. გადახედეთ RFS გვერდს იმის გასარკვევად, თუ როგორ მუშაობს ეს. false ნაგულისხმევად. |
print |
სურვილისამებრ | ლოგიკური მიუთითებს, საჭიროა თუ არა ბეჭდვის კლასების გენერირება. false ნაგულისხმევად. |
rtl |
სურვილისამებრ | ლოგიკური მაჩვენებელი მიუთითებს, უნდა იყოს თუ არა უტილიტა შენახული RTL-ში. true ნაგულისხმევად. |
API განმარტა
ყველა სასარგებლო ცვლადი ემატება $utilities
ცვლადს ჩვენს _utilities.scss
სტილის ფურცელში. კომუნალური საშუალებების თითოეული ჯგუფი ასე გამოიყურება:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
რომელიც გამოსცემს შემდეგს:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
მორგებული კლასის პრეფიქსი
გამოიყენეთ class
ოფცია შედგენილ CSS-ში გამოყენებული კლასის პრეფიქსის შესაცვლელად:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
გამომავალი:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
შტატები
გამოიყენეთ state
ოფცია ფსევდო-კლასის ვარიაციების გენერირებისთვის. ფსევდოკლასების მაგალითებია :hover
და :focus
. როდესაც მოცემულია მდგომარეობების სია, კლასების სახელები იქმნება ამ ფსევდოკლასისთვის. მაგალითად, ჰოვერზე გამჭვირვალობის შესაცვლელად, დაამატეთ state: hover
და მიიღებთ .opacity-hover:hover
თქვენს კომპილირებული CSS-ში.
გჭირდებათ მრავალი ფსევდოკლასი? გამოიყენეთ მდგომარეობების სივრცით გამოყოფილი სია: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
გამომავალი:
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
საპასუხო კომუნალური საშუალებები
დაამატეთ responsive
ლოგიკური მნიშვნელობა საპასუხო უტილიტების გენერირებისთვის (მაგ., .opacity-md-25
) ყველა წყვეტის წერტილში .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
გამომავალი:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
კომუნალური საშუალებების შეცვლა
გააუქმეთ არსებული კომუნალური პროგრამები იგივე გასაღების გამოყენებით. მაგალითად, თუ გსურთ დამატებითი საპასუხო გადინების კომუნალური კლასები, შეგიძლიათ ამის გაკეთება:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ბეჭდვის კომუნალური საშუალებები
print
ოფციის ჩართვა ასევე გამოიმუშავებს სასარგებლო კლასებს ბეჭდვისთვის, რომლებიც გამოიყენება მხოლოდ @media print { ... }
მედია მოთხოვნის ფარგლებში.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
გამომავალი:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
მნიშვნელობა
API-ს მიერ გენერირებული ყველა კომუნალური პროგრამა მოიცავს !important
იმის უზრუნველსაყოფად, რომ ისინი გადალახონ კომპონენტები და მოდიფიკატორების კლასები, როგორც ეს იყო დაგეგმილი. თქვენ შეგიძლიათ გადართოთ ეს პარამეტრი გლობალურად $enable-important-utilities
ცვლადით (ნაგულისხმევად true
).
API-ის გამოყენება
ახლა, როცა გაეცანით, თუ როგორ მუშაობს Utilities API, ისწავლეთ როგორ დაამატოთ თქვენი საკუთარი კლასები და შეცვალოთ ჩვენი ნაგულისხმევი უტილიტები.
კომუნალური საშუალებების დამატება
$utilities
ნაგულისხმევ რუკას შეიძლება დაემატოს ახალი კომუნალური პროგრამები map-merge
. დარწმუნდით, რომ ჩვენი საჭირო Sass ფაილები _utilities.scss
ჯერ იმპორტირებულია, შემდეგ გამოიყენეთ map-merge
თქვენი დამატებითი უტილიტების დასამატებლად. მაგალითად, აი, როგორ დავამატოთ საპასუხო cursor
პროგრამა სამი მნიშვნელობით.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
კომუნალური საშუალებების შეცვლა
შეცვალეთ არსებული კომუნალური პროგრამები ნაგულისხმევ $utilities
რუკაში map-get
და map-merge
ფუნქციებით. ქვემოთ მოყვანილ მაგალითში ჩვენ ვამატებთ დამატებით მნიშვნელობას width
კომუნალურ მომსახურებებს. დაიწყეთ საწყისით map-merge
და შემდეგ მიუთითეთ რომელი პროგრამა გსურთ შეცვალოთ. იქიდან, აიღეთ ჩადგმული "width"
რუკა, map-get
რომ შეხვიდეთ და შეცვალოთ პროგრამის პარამეტრები და მნიშვნელობები.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
ჩართეთ საპასუხო
თქვენ შეგიძლიათ ჩართოთ საპასუხო კლასები არსებული კომუნალური პროგრამებისთვის, რომლებიც ამჟამად არ პასუხობენ ნაგულისხმევად. მაგალითად, იმისათვის, რომ border
კლასები საპასუხო იყოს:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
ეს ახლა წარმოქმნის საპასუხო ვარიაციებს .border
და .border-0
თითოეული წყვეტის წერტილისთვის. თქვენი გენერირებული CSS ასე გამოიყურება:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
კომუნალური პროგრამების გადარქმევა
აკლია v4 კომუნალური პროგრამები, ან გამოიყენება სხვა სახელების კონვენციაში? Utilities API შეიძლება გამოყენებულ იქნას class
მოცემული უტილიტის შედეგების გადასაფარად - მაგალითად, .ms-*
კომუნალური პროგრამების ძველის სახელით გადარქმევა .ml-*
:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
ამოიღეთ კომუნალური საშუალებები
წაშალეთ რომელიმე ნაგულისხმევი უტილიტა ჯგუფის გასაღების დაყენებით null
. მაგალითად, ჩვენი ყველა width
კომუნალური პროგრამის წასაშლელად, შექმენით $utilities
map-merge
და დაამატეთ "width": null
შიგნით.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
წაშალეთ პროგრამა RTL-ში
ზოგიერთი გვერდითი ქეისი ართულებს RTL სტილს , როგორიცაა ხაზების წყვეტა არაბულში. ამრიგად, კომუნალური პროგრამები შეიძლება ამოღებულ იქნეს RTL გამომავალიდან rtl
ოფციის დაყენებით false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
გამომავალი:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
ეს არაფერს გამოსცემს RTL- ში, RTLCSS remove
კონტროლის დირექტივის წყალობით .