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	Vaikeväärtus	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	null	Loodud klassi nimi. Kui seda pole esitatud ja `property`see on stringide massiiv, kasutatakse `class`vaikimisi massiivi esimest elementi `property`.
`css-var`	Valikuline	`false`	Boolean CSS-i reeglite asemel CSS-muutujate genereerimiseks.
`local-vars`	Valikuline	null	Lisaks CSS-i reeglitele genereeritavate kohalike CSS-muutujate kaart.
`state`	Valikuline	null	Pseudoklassi variantide loend (nt `:hover`või `:focus`), mida luua.
`responsive`	Valikuline	`false`	Tõeväärtus, mis näitab, kas reageerivad klassid tuleks genereerida.
`rfs`	Valikuline	`false`	Tõeväärtus, et võimaldada vedeliku skaleerimist RFS-iga .
`print`	Valikuline	`false`	Tõeväärtus, mis näitab, kas prindiklassid tuleb genereerida.
`rtl`	Valikuline	`true`	Tõeväärtus, mis näitab, kas utiliiti tuleks hoida RTL-is.

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

Kinnisvara

Nõutav propertyvõti tuleb määrata mis tahes utiliidi jaoks ja see peab sisaldama kehtivat CSS-i atribuuti. Seda atribuuti kasutatakse loodud utiliidi reeglistikus. Kui classvõti on välja jäetud, toimib see ka klassi vaikenimena. Mõelge text-decorationutiliidile:

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Väljund:

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Väärtused

Kasutage valuesvõtit, et määrata, milliseid määratud väärtusi propertytuleks genereeritud klassinimedes ja reeglites kasutada. Võib olla loend või kaart (määratud utiliitides või Sassi muutujas).

Loendina, nagu text-decorationkommunaalteenuste puhul :

values: none underline line-through

Kaardina, nagu opacitykommunaalteenuste puhul :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

Sassi muutujana, mis määrab loendi või kaardi, nagu meie positionutiliitides :

values: $position-values

Klass

Kasutage classkompileeritud CSS-is kasutatava klassi prefiksi muutmiseks valikut. Näiteks vahetamiseks .opacity-*väärtuselt .o-*:

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

Väljund:

.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-i muutuja utiliidid

Määrake css-vartõeväärtuse suvand trueja API genereerib antud selektori jaoks tavapäraste property: valuereeglite asemel kohalikud CSS-muutujad. Mõelge meie .text-opacity-*kommunaalteenustele:

$utilities: (
  "text-opacity": (
    css-var: true,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Väljund:

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

Kohalikud CSS-muutujad

Kasutage local-varsvalikut Sassi kaardi määramiseks, mis genereerib utiliidiklassi reeglistikus kohalikud CSS-muutujad. Pange tähele, et nende kohalike CSS-i muutujate kasutamine loodud CSS-reeglites võib nõuda lisatööd. Mõelge näiteks meie .bg-*kommunaalteenustele:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Väljund:

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

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

Vastutulelik

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

Prindi

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.

Utiliidide alistamine

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

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 .