Utiliidi API

Utiliidi API on Sassil põhinev tööriist utiliidiklasside genereerimiseks.

Sellel lehel

Bootstrapi utiliidid genereeritakse meie utiliidi API-ga ja neid saab kasutada Sassi kaudu meie utiliidiklasside vaikekomplekti muutmiseks või laiendamiseks. Meie utiliidi API põhineb mitmetel Sassi kaartidel ja funktsioonidel, et luua erinevate valikutega klassiperekondi. Kui te pole Sassi kaartidega tuttav, lugege alustamiseks Sassi ametlikke dokumente .

Kaart $utilitiessisaldab kõiki meie utiliite ja hiljem liidetakse see teie kohandatud $utilitieskaardiga, kui see on olemas. Utiliidi kaart sisaldab võtmetega loendit utiliidirühmadest, mis aktsepteerivad järgmisi valikuid:

Võimalus	Tüüp	Kirjeldus
`property`	Nõutud	Atribuudi nimi, see võib olla string või stringide massiiv (nt horisontaalsed täidised või veerised).
`values`	Nõutud	Väärtuste loend või kaart, kui te ei soovi, et klassi nimi oleks väärtusega sama. Kui `null`seda kasutatakse kaardivõtmena, siis seda ei kompileerita.
`class`	Valikuline	Klassi nime muutuja, kui te ei soovi, et see oleks atribuudiga sama. Kui te võtit ei anna `class`ja `property`võti on stringide massiiv, on klassi nimi `property`massiivi esimene element.
`state`	Valikuline	Utiliidi jaoks genereeritavate pseudoklassi variantide loend, nagu `:hover`või . `:focus`Vaikeväärtus puudub.
`responsive`	Valikuline	Tõeväärtus, mis näitab, kas reageerivad klassid tuleb luua. `false`vaikimisi.
`rfs`	Valikuline	Boolean, et võimaldada vedeliku skaleerimist. Vaadake RFS -i lehte, et teada saada, kuidas see toimib. `false`vaikimisi.
`print`	Valikuline	Tõeväärtus, mis näitab, kas prindiklassid tuleb genereerida. `false`vaikimisi.
`rtl`	Valikuline	Tõeväärtus, mis näitab, kas utiliiti tuleks hoida RTL-is. `true`vaikimisi.

API selgitas

Kõik kasulikud muutujad lisatakse $utilitiesmeie _utilities.scssstiilitabeli muutujale. Iga utiliitide rühm näeb välja umbes selline:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Mis annab välja järgmise:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Kohandatud klassi eesliide

Kasutage classkompileeritud CSS-is kasutatava klassi prefiksi muutmiseks valikut:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Väljund:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

osariigid

Kasutage statepseudoklassi variatsioonide genereerimiseks suvandit. Pseudoklassid on näiteks :hoverja :focus. Kui olekute loend on esitatud, luuakse selle pseudoklassi jaoks klassinimed. Näiteks läbipaistmatuse muutmiseks hõljutamisel lisage state: hoverja saate .opacity-hover:hoveroma kompileeritud CSS-i.

Kas vajate mitut pseudoklassi? Kasutage tühikutega eraldatud olekute loendit: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Väljund:

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

Reageerivad kommunaalteenused

Lisage tõeväärtus, et luua kõigis katkestuspunktidesresponsive reageerivad utiliidid (nt .opacity-md-25) .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Väljund:

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

Kommunaalteenuste vahetamine

Alistage olemasolevad utiliidid sama klahvi abil. Näiteks kui soovite täiendavaid tundliku ülevoolu utiliidi klasse, saate teha järgmist.

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Printimise utiliidid

Selle printvaliku lubamisel genereeritakse ka printimiseks utiliidiklassid, mida rakendatakse ainult @media print { ... }meediumipäringus.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Väljund:

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

Tähtsus

Kõik API poolt genereeritud utiliidid hõlmavad tagamist, !importantet need alistaksid komponendid ja modifikaatoriklassid, nagu ette nähtud. Saate seda sätet globaalselt lülitada $enable-important-utilitiesmuutujaga (vaikimisi true).

API kasutamine

Nüüd, kui olete tuttav utiliitide API toimimisega, õppige, kuidas lisada oma kohandatud klasse ja muuta meie vaikeutiliite.

Lisage kommunaalteenused

Uusi utiliite saab vaikekaardile lisada $utilitiesnupuga map-merge. Veenduge, et meie nõutavad Sass-failid ja _utilities.scssoleksid esmalt imporditud, seejärel kasutage map-mergetäiendavate utiliitide lisamiseks. Näiteks siin on, kuidas lisada cursorkolme väärtusega reageeriv utiliit.

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

Muuda utiliite

$utilitiesMuutke vaikekaardil olemasolevaid utiliite funktsioonidega map-getja map-merge. Allolevas näites lisame widthutiliitidele täiendava väärtuse. Alustage initsiaaliga map-mergeja seejärel määrake, millist utiliiti soovite muuta. Sealt laadige pesastatud "width"kaart, map-getet pääseda juurde ning muuta utiliidi valikuid ja väärtusi.

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

Luba reageeriv

Saate lubada reageerivad klassid olemasolevale utiliitide komplektile, mis praegu vaikimisi ei reageeri. Näiteks borderklasside tundlikuks muutmiseks tehke järgmist.

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

See loob nüüd iga katkestuspunkti .borderja .border-0iga katkestuspunkti jaoks tundlikud variatsioonid. Teie loodud CSS näeb välja selline:

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

Nimetage utiliidid ümber

Kas puuduvad v4 utiliidid või olete harjunud mõne muu nimetamistavaga? Utiliidide API-t saab kasutada classantud utiliidi tulemuse alistamiseks – näiteks utiliitide ümbernimetamiseks .ms-*vanaks .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 ),
    ),
  )
);

Eemaldage kommunaalteenused

Eemaldage kõik vaikeutiliidid, määrates rühmaklahvi väärtuseks null. Näiteks kõigi meie widthutiliitide eemaldamiseks looge $utilities map-mergeja lisage "width": nullsees.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

Eemaldage RTL-is utiliit

Mõned servaümbrised muudavad RTL-i stiili keeruliseks , näiteks araabia keeles reavahetused. Seega saab utiliidid RTL-i väljundist välja jätta, määrates rtlvaliku false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Väljund:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Tänu RTLCSS-i removejuhtimisdirektiivile ei väljasta see RTL-is midagi .