Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

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 $utilitiestérkép tartalmazza az összes segédprogramunkat, és később egyesül az egyéni $utilitiesté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 nullté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 propertyez egy karakterlánc tömbje, classakkor alapértelmezés szerint a propertytö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. :hovervagy :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 $utilitiesbelüli változóhoz . _utilities.scssA 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 propertykulcsot 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 classkulcsot kihagyjuk, az alapértelmezett osztálynévként is szolgál. Fontolja meg a text-decorationsegé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 valueskulccsal adja meg, hogy a megadotthoz mely értékeket propertykell 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-decorationsegédprogramoknál :

values: none underline line-through

Térképként, mint a opacitysegé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 positionsegédprogramjainkban :

values: $position-values

Osztály

Használja a classlehető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-varlogikai értéket, trueés az API helyi CSS-változókat generál az adott szelektorhoz a szokásos property: valueszabá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-varsbeá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 stateopció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:hovera 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 responsivelogikai é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

printAz 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 !importantgondoskodik 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-utilitiesvá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 $utilitiestérképhez egy map-merge. Győződjön meg arról, hogy a szükséges Sass fájljainkat és _utilities.scsselőször importálta, majd használja a map-mergetovábbi segédprogramok hozzáadásához. Például a következőképpen adhat hozzá egy cursorhá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 $utilitiestérképen a map-getés map-mergefüggvényekkel. Az alábbi példában egy további értéket adunk a widthsegé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-gethogy 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 borderosztá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 ),
    ),
  )
);

.borderEz most minden .border-0tö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ó classegy 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 widthsegédprogram eltávolításához hozzon létre egy $utilities map-mergeés adjon hozzá "width": nullbenne.

@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ő rtlbeá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 removevezérlődirektívának .