Utility API
A segédprogram API egy Sass-alapú eszköz a segédprogram-osztályok generálására.
A Bootstrap segédprogramok a segédprogram API-nkkal jönnek létre, és a Sass segítségével módosíthatók vagy bővíthetők az alapértelmezett segédprogram-osztályaink. Segédprogram-API-nk Sass térképek és függvények sorozatán alapul, amelyek különféle opciókkal rendelkező osztálycsaládokat generálnak. Ha nem ismeri a Sass térképeket, a kezdéshez olvassa el a hivatalos Sass dokumentumokat .
A $utilities
térkép tartalmazza az összes segédprogramunkat, és később egyesül az egyéni $utilities
térképével, ha van. A segédprogram térkép a segédprogramcsoportok kulcsos listáját tartalmazza, amelyek a következő opciókat fogadják el:
választási lehetőség | típus | Leírás |
---|---|---|
property |
Kívánt | A tulajdonság neve, ez lehet egy karakterlánc vagy karakterláncok tömbje (pl. vízszintes kitöltés vagy margó). |
values |
Kívánt | Értékek listája, vagy térkép, ha nem szeretné, hogy az osztálynév megegyezzen az értékkel. Ha null térképkulcsként használják, akkor nem fordítják le. |
class |
Választható | Változó az osztálynévhez, ha nem szeretné, hogy ugyanaz legyen, mint a tulajdonság. Ha nem adja meg a class kulcsot, és a property kulcs egy karakterláncok tömbje, az osztálynév lesz a property tömb első eleme. |
state |
Választható | A segédprogram számára generálandó pszeudoosztály-változatok listája, például :hover vagy . :focus Nincs alapértelmezett érték. |
responsive |
Választható | Logikai érték azt jelzi, hogy szükség van-e reagáló osztályok létrehozására. false alapértelmezés szerint. |
rfs |
Választható | Logikai érték a folyadék átskálázás engedélyezéséhez. Nézze meg az RFS oldalát, hogy megtudja, hogyan működik ez. false alapértelmezés szerint. |
print |
Választható | Logikai érték azt jelzi, hogy szükség van-e nyomtatási osztályok létrehozására. false alapértelmezés szerint. |
rtl |
Választható | Logikai érték azt jelzi, hogy a segédprogramot az RTL-ben kell-e tartani. true alapértelmezés szerint. |
Az API elmagyarázta
Minden segédváltozó hozzáadásra kerül a stíluslapunkon $utilities
belüli változóhoz . _utilities.scss
A segédprogramok mindegyik csoportja így néz ki:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Ami a következőket adja ki:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
Egyedi osztály előtag
Használja a class
lehetőséget a lefordított CSS-ben használt osztály előtag módosításához:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Kimenet:
.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }
Államok
Használja az state
opciót pszeudoosztályváltozatok generálásához. Pszeudoosztályok például a :hover
és :focus
. Ha megadja az állapotok listáját, akkor az adott pszeudoosztályhoz osztálynevek jönnek létre. Például az átlátszatlanság megváltoztatásához az egérmutató lebegtetése közben adja hozzá, state: hover
és megkapja .opacity-hover:hover
a lefordított CSS-t.
Több pszeudoosztályra van szüksége? Használja az állapotok szóközzel elválasztott listáját: state: hover focus
.
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Kimenet:
.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; }
Érzékeny segédprogramok
Adja hozzá a responsive
logikai értéket érzékeny segédprogramok (pl. .opacity-md-25
) létrehozásához az összes törésponton .
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Kimenet:
.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; }
}
Közművek váltása
A meglévő segédprogramok felülbírálása ugyanazzal a kulccsal. Ha például további reszponzív túlcsordulási segédprogram-osztályokat szeretne, megteheti:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
Nyomtatási segédprogramok
print
Az opció engedélyezése segédprogramosztályokat is generál a nyomtatáshoz, amelyek csak a médialekérdezésben kerülnek alkalmazásra @media print { ... }
.
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Kimenet:
.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; }
}
Fontosság
Az API által generált összes segédprogram !important
gondoskodik arról, hogy a szándék szerint felülírják az összetevőket és módosító osztályokat. Ezt a beállítást globálisan átkapcsolhatja a $enable-important-utilities
változóval (alapértelmezés szerint true
).
Az API használata
Most, hogy ismeri a segédprogramok API működését, tanulja meg, hogyan adhat hozzá egyéni osztályokat, és hogyan módosíthatja alapértelmezett segédprogramjainkat.
Segédprogramok hozzáadása
Új segédprogramok adhatók hozzá az alapértelmezett $utilities
térképhez egy map-merge
. Győződjön meg arról, hogy a szükséges Sass fájljainkat és _utilities.scss
először importálta, majd használja a map-merge
további segédprogramok hozzáadásához. Például a következőképpen adhat hozzá egy cursor
három értékkel rendelkező reszponzív segédprogramot.
@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,
)
)
);
Segédprogramok módosítása
Módosítsa a meglévő segédprogramokat az alapértelmezett $utilities
térképen a map-get
és map-merge
függvényekkel. Az alábbi példában egy további értéket adunk a width
segédprogramokhoz. Kezdje a kezdőbetűvel map-merge
, majd adja meg, hogy melyik segédprogramot szeretné módosítani. Innentől töltse le a beágyazott "width"
térképet a segítségével, map-get
hogy elérje és módosítsa a segédprogram beállításait és értékeit.
@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%),
),
),
),
)
);
Reszponzív engedélyezése
Engedélyezheti a reszponzív osztályokat olyan meglévő segédprogramok számára, amelyek alapértelmezés szerint jelenleg nem reagálnak. Például, hogy az border
osztályok érzékenyek legyenek:
@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
Ez most minden .border-0
törésponthoz érzékeny variációkat fog generálni . A létrehozott CSS így fog kinézni:
.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 { ... }
}
Segédprogramok átnevezése
Hiányoznak a v4 segédprogramok, vagy más elnevezési konvencióhoz szokott? A segédprogramok API használható class
egy adott segédprogram eredményének felülbírálására – például a .ms-*
segédprogramok régire átnevezésére .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 ),
),
)
);
Távolítsa el a segédprogramokat
Távolítson el minden alapértelmezett segédprogramot a csoportkulcs beállításával null
. Például az összes width
segédprogram eltávolításához hozzon létre egy $utilities
map-merge
és adjon hozzá "width": null
benne.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
Távolítsa el a segédprogramot az RTL-ben
Egyes éles esetek megnehezítik az RTL-stílus kialakítását , például a sortörések arabul. Így a segédprogramok az RTL kimenetről kihagyhatók a következő rtl
beállítással false
:
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
Kimenet:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
Ez nem ad ki semmit RTL-ben, köszönhetően az RTLCSS remove
vezérlődirektívának .