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 | Alapértelmezett érték | 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ó | nulla | A generált osztály neve. Ha nincs megadva, és property ez egy karakterlánc tömbje, class akkor alapértelmezés szerint a property tömb első eleme lesz. |
css-var |
Választható | false |
Logikai érték CSS-változók generálásához CSS-szabályok helyett. |
local-vars |
Választható | nulla | A CSS-szabályok mellett generálandó helyi CSS-változók térképe. |
state |
Választható | nulla | A generálandó pszeudoosztály-változatok listája (pl. :hover vagy :focus ). |
responsive |
Választható | false |
Logikai érték, amely azt jelzi, hogy kell-e reszponzív osztályokat generálni. |
rfs |
Választható | false |
Logikai érték, amely lehetővé teszi a folyadék átskálázást RFS-sel . |
print |
Választható | false |
Logikai érték azt jelzi, hogy szükség van-e nyomtatási osztályok létrehozására. |
rtl |
Választható | true |
Logikai érték azt jelzi, hogy a segédprogramot az RTL-ben kell-e tartani. |
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; }
Ingatlan
A szükséges property
kulcsot minden segédprogramhoz be kell állítani, és érvényes CSS-tulajdonságot kell tartalmaznia. Ezt a tulajdonságot a generált segédprogram szabálykészlete használja. Ha a class
kulcsot kihagyjuk, az alapértelmezett osztálynévként is szolgál. Fontolja meg a text-decoration
segédprogramot:
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
Kimenet:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
Értékek
A values
kulccsal adja meg, hogy a megadotthoz mely értékeket property
kell használni a generált osztálynevekben és szabályokban. Lehet lista vagy térkép (a segédprogramokban vagy egy Sass változóban beállítva).
Listaként, mint a text-decoration
segédprogramoknál :
values: none underline line-through
Térképként, mint a opacity
segédprogramoknál :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
Sass-változóként, amely beállítja a listát vagy a térképet, mint a position
segédprogramjainkban :
values: $position-values
Osztály
Használja a class
lehetőséget a lefordított CSS-ben használt osztály előtag módosítására. Például átváltani a .opacity-*
következőről .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
Kimenet:
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
CSS változó segédprogramok
Állítsa be a css-var
logikai értéket, true
és az API helyi CSS-változókat generál az adott szelektorhoz a szokásos property: value
szabályok helyett. Fontolja meg .text-opacity-*
segédprogramjainkat:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
Kimenet:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
Helyi CSS-változók
Ezzel a local-vars
beállítással megadhat egy Sass-leképezést, amely helyi CSS-változókat generál a segédprogram-osztály szabálykészletén belül. Kérjük, vegye figyelembe, hogy további munkát igényelhet a helyi CSS-változók felhasználása a generált CSS-szabályokban. Vegyük például a .bg-*
segédprogramjainkat:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
Kimenet:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
Á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; }
Fogékony
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; }
}
Nyomtatás
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 felülbírálá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,
),
);
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 .