Utility API

Apuohjelma-API on Sass-pohjainen työkalu hyödyllisyysluokkien luomiseen.

Tällä sivulla

Bootstrap-apuohjelmat luodaan apuohjelman API:lla, ja niitä voidaan käyttää oletusapuluokkien muokkaamiseen tai laajentamiseen Sassin kautta. Apuohjelmamme API perustuu Sass-karttojen ja toimintojen sarjaan luokkaperheiden luomiseen eri vaihtoehdoilla. Jos Sass-kartat eivät ole sinulle tuttuja, aloita lukemalla viralliset Sass-asiakirjat .

Kartta $utilitiessisältää kaikki apuohjelmamme, ja se yhdistetään myöhemmin mukautettuun $utilitieskarttaasi, jos sellainen on. Apuohjelmakartta sisältää luettelon apuryhmistä, jotka hyväksyvät seuraavat vaihtoehdot:

Vaihtoehto	Tyyppi	Kuvaus
`property`	Vaaditaan	Ominaisuuden nimi, tämä voi olla merkkijono tai merkkijonojoukko (esim. vaakasuuntaiset täytteet tai marginaalit).
`values`	Vaaditaan	Arvoluettelo tai kartta, jos et halua luokan nimen olevan sama kuin arvon. Jos `null`sitä käytetään karttaavaimena, sitä ei käännetä.
`class`	Valinnainen	Luokan nimen muuttuja, jos et halua sen olevan sama kuin ominaisuuden. Jos et anna `class`avainta ja `property`avain on merkkijonojono, luokan nimi on taulukon ensimmäinen elementti `property`.
`state`	Valinnainen	Luettelo pseudoluokan muunnelmista, kuten `:hover`tai `:focus`luodaan apuohjelmalle. Ei oletusarvoa.
`responsive`	Valinnainen	Boolen arvo ilmaisee, onko reagoivia luokkia luotava. `false`oletuksena.
`rfs`	Valinnainen	Boolen arvo mahdollistaa nesteen uudelleenskaalauksen. Katso RFS - sivulta, kuinka tämä toimii. `false`oletuksena.
`print`	Valinnainen	Boolen arvo ilmaisee, onko tulostusluokkia luotava. `false`oletuksena.
`rtl`	Valinnainen	Boolen arvo ilmaisee, pitäisikö apuohjelma säilyttää RTL:ssä. `true`oletuksena.

API selitetty

Kaikki hyödyllisyysmuuttujat lisätään $utilitiesmuuttujaan _utilities.scsstyylitaulukossamme. Jokainen apuohjelmaryhmä näyttää suunnilleen tältä:

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

Joka tulostaa seuraavat:

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

Mukautettu luokan etuliite

Käytä classvaihtoehtoa muuttaaksesi käännetyssä CSS:ssä käytettyä luokan etuliitettä:

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

Lähtö:

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

osavaltioissa

Käytä statevaihtoehtoa pseudoluokkamuunnelmien luomiseen. Esimerkki pseudo-luokista ovat :hoverja :focus. Kun tilaluettelo tarjotaan, tälle pseudoluokalle luodaan luokan nimet. Jos haluat esimerkiksi muuttaa peittävyyttä viemällä hiiri, lisää state: hover, niin saat .opacity-hover:hoverkäännetyn CSS:n.

Tarvitsetko useita pseudo-luokkia? Käytä välilyönnillä eroteltua tilojen luetteloa: state: hover focus.

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

Lähtö:

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

Responsiiviset apuohjelmat

Lisää responsivelooginen arvo luodaksesi reagoivia apuohjelmia (esim. .opacity-md-25) kaikissa keskeytyspisteissä .

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

Lähtö:

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

Apuohjelmien vaihto

Ohita olemassa olevat apuohjelmat käyttämällä samaa avainta. Jos esimerkiksi haluat lisää responsiivisia ylivuotoapuluokkia, voit tehdä näin:

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

Tulostusapuohjelmat

printVaihtoehdon ottaminen käyttöön luo myös tulostukseen hyödyllisyysluokkia, joita käytetään vain @media print { ... }mediakyselyssä.

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

Lähtö:

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

Merkitys

Kaikki API:n luomat apuohjelmat !importantvarmistavat, että ne ohittavat komponentit ja muokkausluokat tarkoitetulla tavalla. Voit vaihtaa tämän asetuksen maailmanlaajuisesti $enable-important-utilitiesmuuttujalla (oletusarvo true).

API:n käyttö

Nyt kun olet perehtynyt apuohjelmien API:n toimintaan, opi lisäämään omia mukautettuja luokkia ja muokkaamaan oletusapuohjelmiamme.

Lisää apuohjelmia

Uusia apuohjelmia voidaan lisätä oletuskarttaan $utilitieskäyttämällä map-merge. Varmista, että vaaditut Sass-tiedostomme ja _utilities.scsson tuotu ensin, ja map-mergelisää sitten lisäapuohjelmat -painikkeella. Näin voit esimerkiksi lisätä reagoivan cursorapuohjelman kolmella arvolla.

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

Muokkaa apuohjelmia

Muokkaa oletuskartan olemassa olevia apuohjelmia $utilitiesja map-getfunktioilla map-merge. widthAlla olevassa esimerkissä lisäämme apuohjelmiin lisäarvon . Aloita alkukirjaimella map-mergeja määritä sitten, mitä apuohjelmaa haluat muokata. Sieltä hae sisäkkäinen "width"kartta, map-getjotta voit käyttää ja muokata apuohjelman asetuksia ja arvoja.

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

Ota reagoiva käyttöön

Voit ottaa käyttöön reagoivat luokat olemassa oleville apuohjelmille, jotka eivät ole tällä hetkellä reagoivia. Jos haluat esimerkiksi tehdä borderluokista reagoivia:

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

Tämä luo nyt responsiiviset muunnelmat kullekin keskeytyspisteelle .borderja . .border-0Luotu CSS näyttää tältä:

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

Nimeä apuohjelmat uudelleen

Puuttuuko v4-apuohjelmat tai oletko tottunut toiseen nimeämiskäytäntöön? Apuohjelmien API:ta voidaan käyttää ohittamaan classtietyn apuohjelman tulos – esimerkiksi nimeämään .ms-*apuohjelmat vanhaksi .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 ),
    ),
  )
);

Poista apuohjelmat

Poista kaikki oletusapuohjelmat asettamalla ryhmäavaimeksi null. Jos esimerkiksi haluat poistaa kaikki widthapuohjelmamme, luo a $utilities map-mergeja lisää "width": nullsisällä.

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

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

Poista apuohjelma RTL:stä

Jotkut reunakotelot tekevät RTL-tyylistä vaikeaa , kuten arabian rivinvaihdot. Näin apuohjelmat voidaan poistaa RTL-lähdöstä asettamalla rtlvaihtoehdoksi false:

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

Lähtö:

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

Tämä ei tulosta mitään RTL: ssä RTLCSS-ohjausdirektiivin removeansiosta .