Uslužni API

Utility API je alat temeljen na Sass-u za generiranje klasa uslužnih programa.

Na ovoj stranici

Bootstrap uslužni programi generiraju se s našim API-jem uslužnih programa i mogu se koristiti za izmjenu ili proširenje našeg zadanog skupa klasa uslužnih programa putem Sass-a. Naš uslužni API temelji se na nizu Sass mapa i funkcija za generiranje obitelji klasa s različitim opcijama. Ako niste upoznati sa Sass mapama, pročitajte službene Sass dokumente da biste započeli.

Karta $utilitiessadrži sve naše pomoćne programe i kasnije se spaja s vašom prilagođenom $utilitieskartom, ako postoji. Karta komunalnih usluga sadrži označeni popis grupa komunalnih usluga koje prihvaćaju sljedeće opcije:

Opcija	Tip	Opis
`property`	Potreban	Naziv svojstva, ovo može biti niz znakova ili niz znakova (npr. horizontalna ispuna ili margine).
`values`	Potreban	Popis vrijednosti ili mapa ako ne želite da naziv klase bude isti kao vrijednost. Ako `null`se koristi kao ključ mape, nije kompajliran.
`class`	Neobavezno	Varijabla za ime klase ako ne želite da bude isto kao svojstvo. U slučaju da ne navedete `class`ključ, a `property`ključ je niz nizova, naziv klase bit će prvi element `property`niza.
`state`	Neobavezno	Popis varijanti pseudoklase poput `:hover`ili `:focus`za generiranje za pomoćni program. Nema zadane vrijednosti.
`responsive`	Neobavezno	Booleov pokazatelj treba li generirati responzivne klase. `false`prema zadanim postavkama.
`rfs`	Neobavezno	Booleov za omogućavanje promjene veličine tekućine. Pogledajte RFS stranicu kako biste saznali kako to funkcionira. `false`prema zadanim postavkama.
`print`	Neobavezno	Booleov pokazatelj treba li generirati klase ispisa. `false`prema zadanim postavkama.
`rtl`	Neobavezno	Booleov pokazatelj treba li uslužni program biti zadržan u RTL-u. `true`prema zadanim postavkama.

API objašnjen

Sve korisne varijable dodaju se $utilitiesvarijabli unutar naše _utilities.scsstablice stilova. Svaka grupa uslužnih programa izgleda otprilike ovako:

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

Što daje sljedeće:

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

Prilagođeni prefiks klase

Koristite classopciju za promjenu prefiksa klase koji se koristi u kompajliranom CSS-u:

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

Izlaz:

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

Države

Koristite stateopciju za generiranje varijacija pseudo-klase. Primjeri pseudo-klasa su :hoveri :focus. Kada se pruži popis stanja, stvaraju se nazivi klasa za tu pseudo-klasu. Na primjer, da promijenite neprozirnost pri lebdenju, dodajte state: hoveri dobit ćete .opacity-hover:hoversvoj kompilirani CSS.

Trebate više pseudo-klasa? Koristite popis stanja odvojen razmakom: state: hover focus.

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

Izlaz:

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

Responzivni uslužni programi

Dodajte responsiveBooleovu vrijednost za generiranje odgovarajućih uslužnih programa (npr., .opacity-md-25) preko svih prijelomnih točaka .

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

Izlaz:

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

Promjena komunalnih usluga

Nadjačajte postojeće pomoćne programe korištenjem istog ključa. Na primjer, ako želite dodatne responzivne pomoćne klase preljeva, možete učiniti sljedeće:

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

Pomoćni programi za ispis

Omogućavanje printopcije također će generirati klase korisnih programa za ispis, koje se primjenjuju samo unutar @media print { ... }medijskog upita.

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

Izlaz:

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

Važnost

Svi pomoćni programi koje generira API uključuju !importantkako bi se osiguralo da nadjačavaju komponente i klase modifikatora kako je predviđeno. Ovu postavku možete globalno mijenjati pomoću $enable-important-utilitiesvarijable (zadano je true).

Korištenje API-ja

Sada kada ste upoznati s načinom rada API-ja pomoćnih programa, naučite kako dodati vlastite prilagođene klase i izmijeniti naše zadane pomoćne programe.

Dodajte pomoćne programe

Novi pomoćni programi mogu se dodati zadanoj $utilitieskarti pomoću map-merge. Prvo provjerite jesu li naše potrebne Sass datoteke i _utilities.scssuvezene, a zatim upotrijebite map-mergeza dodavanje dodatnih uslužnih programa. Na primjer, evo kako dodati responzivni cursoruslužni program s tri vrijednosti.

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

Izmijenite pomoćne programe

Izmijenite postojeće pomoćne programe u zadanoj $utilitieskarti s funkcijama map-geti map-merge. U donjem primjeru dodajemo dodatnu vrijednost widthuslužnim programima. Počnite s inicijalom map-merge, a zatim navedite koji uslužni program želite izmijeniti. Odatle dohvatite ugniježđenu "width"kartu map-getza pristup i izmjenu opcija i vrijednosti uslužnog programa.

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

Omogući responzivno

Možete omogućiti responzivne klase za postojeći skup uslužnih programa koji trenutno nisu responzivni prema zadanim postavkama. Na primjer, da bi borderklase bile osjetljive:

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

Ovo će sada generirati odgovarajuće varijacije .borderi .border-0za svaku prijelomnu točku. Vaš generirani CSS izgledat će ovako:

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

Preimenujte pomoćne programe

Nedostaju v4 pomoćni programi ili ste navikli na drugu konvenciju imenovanja? API uslužnih programa može se koristiti za nadjačavanje rezultata classdanog uslužnog programa—na primjer, za preimenovanje .ms-*uslužnih programa u oldish .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 ),
    ),
  )
);

Ukloni pomoćne programe

Uklonite bilo koji od zadanih uslužnih programa postavljanjem grupnog ključa na null. Na primjer, da biste uklonili sve naše widthpomoćne programe, stvorite $utilities map-mergei dodajte "width": nullunutar.

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

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

Ukloni uslužni program u RTL-u

Neka rubna kućišta otežavaju oblikovanje RTL- a, poput prijeloma redaka na arapskom. Stoga se pomoćni programi mogu ispustiti iz RTL izlaza postavljanjem rtlopcije na false:

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

Izlaz:

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

Ovo ne ispisuje ništa u RTL-u, zahvaljujući RTLCSS removekontrolnoj direktivi .