Կոմունալ API
Կոմունալ 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
Այժմ, երբ դուք ծանոթ եք, թե ինչպես է աշխատում կոմունալ ծրագրերի 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 կոմունալ ծառայությունները, թե՞ օգտագործված եք անվանման այլ կոնվենցիայով: Կոմունալ ծրագրերի 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
կառավարման հրահանգի :