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 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ó Változó az osztálynévhez, ha nem szeretné, hogy ugyanaz legyen, mint a tulajdonság. Ha nem adja meg a classkulcsot, és a propertykulcs egy karakterláncok tömbje, az osztálynév lesz a propertytömb első eleme.
state Választható A segédprogram számára generálandó pszeudoosztály-változatok listája, például :hovervagy . :focusNincs 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. falsealapé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. falsealapé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. falsealapértelmezés szerint.
rtl Választható Logikai érték azt jelzi, hogy a segédprogramot az RTL-ben kell-e tartani. truealapértelmezés szerint.

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; }

Egyedi osztály előtag

Használja a classlehető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 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; }

Érzékeny segédprogramok

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; }
}

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,
  ),
);

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 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 .