Nut API

Die nuts-API is 'n Sass-gebaseerde hulpmiddel om nutsklasse te genereer.

Op hierdie bladsy

Bootstrap-nutsprogramme word met ons nuts-API gegenereer en kan gebruik word om ons verstekstel nutsklasse via Sass te wysig of uit te brei. Ons nut-API is gebaseer op 'n reeks Sass-kaarte en -funksies om families van klasse met verskeie opsies te genereer. As jy nie vertroud is met Sass-kaarte nie, lees die amptelike Sass-dokumente om te begin.

Die $utilitieskaart bevat al ons hulpmiddels en word later saamgevoeg met jou persoonlike $utilitieskaart, indien teenwoordig. Die nutskaart bevat 'n sleutellys nutsgroepe wat die volgende opsies aanvaar:

Opsie	Tik	Beskrywing
`property`	Vereis	Naam van die eiendom, dit kan 'n string of 'n reeks stringe wees (bv. horisontale opvullings of kantlyne).
`values`	Vereis	Lys van waardes, of 'n kaart as jy nie wil hê dat die klasnaam dieselfde as die waarde moet wees nie. As `null`dit as kaartsleutel gebruik word, is dit nie saamgestel nie.
`class`	Opsioneel	Veranderlike vir die klasnaam as jy nie wil hê dit moet dieselfde as die eiendom wees nie. As jy nie die `class`sleutel verskaf nie en `property`sleutel 'n reeks stringe is, sal die klasnaam die eerste element van die `property`skikking wees.
`state`	Opsioneel	Lys van pseudo-klas variante soos `:hover`of `:focus`om te genereer vir die nut. Geen verstekwaarde nie.
`responsive`	Opsioneel	Boole wat aandui of responsiewe klasse gegenereer moet word. `false`by verstek.
`rfs`	Opsioneel	Boolean om vloeistofherskaling moontlik te maak. Kyk na die RFS- bladsy om uit te vind hoe dit werk. `false`by verstek.
`print`	Opsioneel	Boolean wat aandui of drukklasse gegenereer moet word. `false`by verstek.
`rtl`	Opsioneel	Boolean wat aandui of nut in RTL gehou moet word. `true`by verstek.

API verduidelik

Alle nutsveranderlikes word by die $utilitiesveranderlike in ons _utilities.scssstylblad gevoeg. Elke groep nutsdienste lyk so iets:

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

Wat die volgende uitvoer:

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

Pasgemaakte klas voorvoegsel

Gebruik die classopsie om die klasvoorvoegsel wat in die saamgestelde CSS gebruik word, te verander:

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

Uitset:

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

State

Gebruik die stateopsie om pseudo-klas variasies te genereer. Voorbeeld pseudo-klasse is :hoveren :focus. Wanneer 'n lys van state verskaf word, word klasname vir daardie pseudo-klas geskep. Byvoorbeeld, om ondeursigtigheid te verander wanneer jy beweeg, voeg by state: hoveren jy kry .opacity-hover:hoverjou saamgestelde CSS.

Het jy veelvuldige pseudo-klasse nodig? Gebruik 'n spasie-geskeide lys van state: state: hover focus.

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

Uitset:

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

Responsiewe nutsprogramme

Voeg die responsiveboolean by om responsiewe nutsprogramme (bv. .opacity-md-25) oor alle breekpunte te genereer .

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

Uitset:

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

Verander nutsprogramme

Ignoreer bestaande nutsprogramme deur dieselfde sleutel te gebruik. Byvoorbeeld, as jy bykomende responsiewe oorloop-nutsklasse wil hê, kan jy dit doen:

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

Druk nutsprogramme

Deur die printopsie te aktiveer, sal ook nutsklasse vir druk gegenereer word, wat slegs binne die @media print { ... }medianavraag toegepas word.

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

Uitset:

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

Belangrikheid

Alle nutsprogramme wat deur die API gegenereer word, sluit in !importantom te verseker dat hulle komponente en wysigerklasse ignoreer soos bedoel. Jy kan hierdie instelling wêreldwyd wissel met die $enable-important-utilitiesveranderlike (verstek na true).

Gebruik die API

Noudat jy vertroud is met hoe die utilities API werk, leer hoe om jou eie pasgemaakte klasse by te voeg en ons verstekhulpprogramme te verander.

Voeg nutsprogramme by

Nuwe nutsprogramme kan by die verstekkaart gevoeg word $utilitiesmet 'n map-merge. Maak seker dat ons vereiste Sass-lêers en _utilities.scsseers ingevoer is, gebruik dan die map-mergeom jou bykomende nutsprogramme by te voeg. Byvoorbeeld, hier is hoe om 'n responsiewe cursorhulpprogram met drie waardes by te voeg.

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

Verander nutsprogramme

Verander bestaande nutsprogramme in die verstekkaart $utilitiesmet map-geten map-mergefunksies. In die voorbeeld hieronder voeg ons 'n bykomende waarde by die widthnutsprogramme. Begin met 'n voorletter map-mergeen spesifiseer dan watter hulpprogram jy wil verander. Van daar af, haal die geneste "width"kaart mee map-getom toegang tot die nutsprogram se opsies en waardes te verkry en te verander.

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

Aktiveer responsief

Jy kan responsiewe klasse aktiveer vir 'n bestaande stel nutsprogramme wat tans nie by verstek reageer nie. Byvoorbeeld, om die borderklasse responsief te maak:

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

Dit sal nou responsiewe variasies van .borderen .border-0vir elke breekpunt genereer. Jou gegenereerde CSS sal soos volg lyk:

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

Hernoem nutsprogramme

Mis jy v4-hulpprogramme, of gewoond aan 'n ander naamkonvensie? Die nuts-API kan gebruik word om die resultaat classvan 'n gegewe nutsprogram te ignoreer—byvoorbeeld om .ms-*nutsprogramme te hernoem na 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 ),
    ),
  )
);

Verwyder nutsprogramme

Verwyder enige van die verstekhulpprogramme deur die groepsleutel op te stel null. Byvoorbeeld, om al ons widthnutsprogramme te verwyder, skep 'n $utilities map-mergeen voeg "width": nullbinne by.

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

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

Verwyder nut in RTL

Sommige randsake maak RTL-stilering moeilik , soos lynbreuke in Arabies. Hulpprogramme kan dus van RTL-uitvoer laat val word deur die rtlopsie te stel op false:

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

Uitset:

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

Dit lewer niks in RTL uit nie, danksy die RTLCSS remove-beheerdirektief .