Utility API

Naudingumo API yra Sass pagrįstas įrankis, skirtas komunalinių paslaugų klasėms generuoti.

Šiame puslapyje

„Bootstrap“ paslaugos generuojamos naudojant mūsų paslaugų API ir gali būti naudojamos modifikuoti arba išplėsti numatytąjį paslaugų klasių rinkinį per „Sass“. Mūsų paslaugų API yra pagrįsta Sass žemėlapių ir funkcijų serija, skirta kurti klasių šeimas su įvairiomis parinktimis. Jei nesate susipažinę su Sass žemėlapiais, norėdami pradėti , perskaitykite oficialius Sass dokumentus .

Žemėlapyje yra visos $utilitiesmūsų paslaugos ir vėliau jis sujungiamas su tinkintu $utilitiesžemėlapiu, jei toks yra. Naudingumo žemėlapyje yra raktų sąrašas paslaugų grupių, kurios priima šias parinktis:

Parinktis	Tipas	apibūdinimas
`property`	Privaloma	Ypatybės pavadinimas, tai gali būti eilutė arba eilučių masyvas (pvz., horizontalūs užpildai arba paraštės).
`values`	Privaloma	Vertybių sąrašas arba žemėlapis, jei nenorite, kad klasės pavadinimas būtų toks pat kaip reikšmė. Jei `null`naudojamas kaip žemėlapio raktas, jis nekompiliuojamas.
`class`	Neprivaloma	Klasės pavadinimo kintamasis, jei nenorite, kad jis būtų toks pat kaip nuosavybė. Jei nepateiksite `class`rakto, o `property`raktas yra eilučių masyvas, klasės pavadinimas bus pirmasis `property`masyvo elementas.
`state`	Neprivaloma	Sąrašas pseudoklasių variantų, pvz ., `:hover`arba `:focus`, kurį reikia sukurti programai. Nėra numatytosios vertės.
`responsive`	Neprivaloma	Būlio reikšmė, nurodanti, ar reikia sugeneruoti reaguojančias klases. `false`pagal nutylėjimą.
`rfs`	Neprivaloma	Būlio reikšmė, kad būtų galima keisti skysčio skalę. Peržiūrėkite RFS puslapį, kad sužinotumėte, kaip tai veikia. `false`pagal nutylėjimą.
`print`	Neprivaloma	Būlio reikšmė, nurodanti, ar reikia sugeneruoti spausdinimo klases. `false`pagal nutylėjimą.
`rtl`	Neprivaloma	Būlio reikšmė, nurodanti, ar naudingumas turėtų būti saugomas RTL. `true`pagal nutylėjimą.

API paaiškino

Visi naudingumo kintamieji pridedami prie $utilitieskintamojo mūsų _utilities.scssstiliaus lape. Kiekviena paslaugų grupė atrodo maždaug taip:

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

Kuris išveda šiuos duomenis:

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

Pasirinktinis klasės priešdėlis

Naudokite classparinktį, kad pakeistumėte klasės priešdėlį, naudojamą sudarytame CSS:

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

Išvestis:

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

valstybėse

Naudokite stateparinktį, kad sukurtumėte pseudoklasių variantus. Pseudoklasių pavyzdžiai yra :hoverir :focus. Pateikus būsenų sąrašą, tai pseudoklasei sukuriami klasių pavadinimai. Pavyzdžiui, norėdami pakeisti neskaidrumą užvedę pelės žymeklį, pridėkite state: hoverir gausite .opacity-hover:hoversavo sukompiliuotą CSS.

Reikia kelių pseudoklasių? Naudokite tarpais atskirtą būsenų sąrašą: state: hover focus.

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

Išvestis:

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

Atsakingos komunalinės paslaugos

Pridėkite responsiveloginę reikšmę, kad generuotumėte reaguojančias priemones (pvz., .opacity-md-25) visuose lūžio taškuose .

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

Išvestis:

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

Komunalinių paslaugų keitimas

Nepaisykite esamų paslaugų naudodami tą patį raktą. Pavyzdžiui, jei norite papildomų interaktyvių perpildymo paslaugų klasių, galite tai padaryti:

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

Spausdinimo paslaugos

Įjungus šią printparinktį taip pat bus sukurtos spausdinimo naudingumo klasės, kurios taikomos tik @media print { ... }medijos užklausoje.

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

Išvestis:

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

Svarba

Visos API sugeneruotos komunalinės paslaugos !importantužtikrina, kad jos nepaisytų komponentų ir modifikatorių klasių, kaip numatyta. Šį nustatymą galite perjungti visame pasaulyje naudodami $enable-important-utilitieskintamąjį (numatytasis nustatymas yra true).

Naudojant API

Dabar, kai žinote, kaip veikia paslaugų API, sužinokite, kaip pridėti savo pasirinktines klases ir modifikuoti numatytąsias paslaugų programas.

Pridėti komunalines paslaugas

$utilitiesĮ numatytąjį žemėlapį galima pridėti naujų paslaugų su map-merge. Įsitikinkite, kad _utilities.scsspirmiausia yra importuoti reikalingi Sass failai ir, tada naudokite, map-mergekad pridėtumėte papildomų paslaugų. Pavyzdžiui, štai kaip pridėti reaguojančią cursorpriemonę su trimis reikšmėmis.

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

Keisti komunalines paslaugas

Modifikuokite esamas komunalines paslaugas numatytame $utilitiesžemėlapyje su map-getir map-mergefunkcijomis. Toliau pateiktame pavyzdyje prie widthkomunalinių paslaugų pridedame papildomą reikšmę. Pradėkite nuo inicialo map-mergeir tada nurodykite, kurią programą norite keisti. Iš ten pateikite įdėtą "width"žemėlapį, map-getkad galėtumėte pasiekti ir modifikuoti paslaugų parinktis ir reikšmes.

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

Įgalinti reaguojantį

Galite įgalinti reaguojančias klases esamam paslaugų rinkiniui, kuris šiuo metu pagal numatytuosius nustatymus nereaguoja. Pavyzdžiui, norėdami, kad borderklasės būtų reaguojančios:

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

Dabar bus sugeneruoti atsakingi kiekvieno pertraukos taško .borderir variantai. .border-0Jūsų sugeneruotas CSS atrodys taip:

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

Pervardyti komunalines paslaugas

Trūksta v4 paslaugų arba esate pripratę prie kitokios pavadinimo taisyklės? Komunalinių paslaugų API galima naudoti norint nepaisyti classtam tikros programos rezultatų, pavyzdžiui, pervadinti .ms-*komunalines paslaugas į seną .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 ),
    ),
  )
);

Pašalinkite komunalines paslaugas

Pašalinkite bet kurią iš numatytųjų paslaugų, nustatydami grupės klavišą į null. Pavyzdžiui, norėdami pašalinti visas mūsų widthpaslaugas, sukurkite $utilities map-mergeir įtraukite "width": null.

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

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

Pašalinkite įrankį iš RTL

Kai kurie kraštutiniai dėklai apsunkina RTL stiliaus kūrimą , pvz., arabų k. eilučių lūžiai. Taigi komunalines paslaugas galima pašalinti iš RTL išvesties, nustatant rtlparinktį į false:

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

Išvestis:

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

Dėl RTLCSS removevaldymo direktyvos tai nieko neišveda RTL .