API IwUlO

API IwUlO jẹ ohun elo ti o da lori Sass lati ṣe ipilẹṣẹ awọn kilasi iwulo.

Lori iwe yi

Awọn ohun elo Bootstrap ti wa ni ipilẹṣẹ pẹlu API IwUlO wa ati pe o le ṣee lo lati yipada tabi fa eto aiyipada ti awọn kilasi ohun elo wa nipasẹ Sass. API IwUlO wa da lori lẹsẹsẹ awọn maapu Sass ati awọn iṣẹ fun ti ipilẹṣẹ awọn idile ti awọn kilasi pẹlu awọn aṣayan pupọ. Ti o ko ba mọ pẹlu awọn maapu Sass, ka soke lori awọn iwe aṣẹ Sass osise lati bẹrẹ.

Maapu naa ni gbogbo awọn ohun elo wa ati pe lẹhinna o dapọ mọ maapu $utilitiesaṣa rẹ , ti o ba wa. $utilitiesMaapu IwUlO ni atokọ bọtini kan ti awọn ẹgbẹ IwUlO eyiti o gba awọn aṣayan wọnyi:

Aṣayan	Iru	Iwọn aiyipada	Apejuwe
`property`	Ti beere fun	–	Orukọ ohun-ini naa, eyi le jẹ okun tabi ọpọlọpọ awọn okun (fun apẹẹrẹ, awọn paddings petele tabi awọn ala).
`values`	Ti beere fun	–	Akojọ awọn iye, tabi maapu kan ti o ko ba fẹ ki orukọ kilasi jẹ kanna bi iye naa. Ti o ba `null`ti lo bi bọtini maapu, `class`ko ṣe tẹlẹ si orukọ kilasi naa.
`class`	iyan	asan	Orukọ kilasi ti ipilẹṣẹ. Ti ko ba pese ati ki o `property`jẹ ẹya orun ti awọn okun, `class`yoo aiyipada si akọkọ ano ti awọn `property`orun. Ti ko ba pese ati `property`pe o jẹ okun, awọn `values`bọtini ti lo fun awọn `class`orukọ.
`css-var`	iyan	`false`	Boolean lati ṣe ipilẹṣẹ awọn oniyipada CSS dipo awọn ofin CSS.
`css-variable-name`	iyan	asan	Orukọ aisi-isọtẹlẹ ti aṣa fun oniyipada CSS inu awọn ofin.
`local-vars`	iyan	asan	Maapu ti awọn oniyipada CSS agbegbe lati ṣe ipilẹṣẹ ni afikun si awọn ofin CSS.
`state`	iyan	asan	Atokọ ti awọn iyatọ kilasi afarape (fun apẹẹrẹ, `:hover`tabi `:focus`) lati ṣe ipilẹṣẹ.
`responsive`	iyan	`false`	Boolean nfihan boya awọn kilasi idahun yẹ ki o ṣe ipilẹṣẹ.
`rfs`	iyan	`false`	Boolean lati jẹ ki isọdọtun omi ṣiṣẹ pẹlu RFS .
`print`	iyan	`false`	Boolean n tọka ti awọn kilasi titẹ ba nilo lati ṣe ipilẹṣẹ.
`rtl`	iyan	`true`	Boolean ti n tọka boya ohun elo yẹ ki o tọju ni RTL.

API salaye

Gbogbo awọn oniyipada ohun elo ni a ṣafikun si $utilitiesoniyipada laarin iwe aṣa wa _utilities.scss. Ẹgbẹ kọọkan ti awọn ohun elo n wo nkan bii eyi:

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

Eyi ti o jade awọn wọnyi:

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

Ohun ini

Bọtini ti a beere propertygbọdọ ṣeto fun eyikeyi ohun elo, ati pe o gbọdọ ni ohun-ini CSS to wulo. Ohun-ini yii ni a lo ninu ilana ofin ohun elo ti ipilẹṣẹ. Nigbati classbọtini naa ba ti yọkuro, o tun ṣiṣẹ bi orukọ kilasi aiyipada. Wo ohun text-decorationelo naa:

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

Abajade:

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

Awọn iye

Lo valuesbọtini naa lati pato iru awọn iye fun pato propertyyẹ ki o lo ninu awọn orukọ kilasi ti ipilẹṣẹ ati awọn ofin. Le jẹ atokọ tabi maapu (ṣeto ninu awọn ohun elo tabi ni oniyipada Sass).

Gẹgẹbi atokọ kan, bii pẹlu text-decorationawọn ohun elo :

values: none underline line-through

Gẹgẹbi maapu, bii pẹlu opacityawọn ohun elo :

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

Gẹgẹbi oniyipada Sass ti o ṣeto atokọ tabi maapu, bi ninu awọn positionohun elo wa :

values: $position-values

Kilasi

Lo classaṣayan lati yi ìpele kilasi pada ti a lo ninu CSS ti o ṣajọ. Fun apẹẹrẹ, lati yipada lati .opacity-*si .o-*:

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

Abajade:

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

Ti class: null, ṣe ipilẹṣẹ awọn kilasi fun ọkọọkan awọn valuesbọtini:

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Abajade:

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS oniyipada igbesi

Ṣeto css-varaṣayan boolean si trueati pe API yoo ṣe ipilẹṣẹ awọn oniyipada CSS agbegbe fun yiyan ti a fun dipo awọn property: valueofin deede. Ṣafikun yiyan css-variable-namelati ṣeto orukọ oniyipada CSS ti o yatọ ju orukọ kilasi lọ.

Wo awọn .text-opacity-*ohun elo wa. Ti a ba ṣafikun css-variable-nameaṣayan, a yoo gba iṣelọpọ aṣa.

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

Abajade:

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 1; }

Awọn oniyipada CSS agbegbe

Lo local-varsaṣayan lati tokasi maapu Sass kan ti yoo ṣe ipilẹṣẹ awọn oniyipada CSS agbegbe laarin ilana ofin kilasi ohun elo. Jọwọ ṣe akiyesi pe o le nilo iṣẹ ni afikun lati jẹ awọn oniyipada CSS agbegbe wọnyẹn ninu awọn ofin CSS ti ipilẹṣẹ. Fun apẹẹrẹ, ro awọn .bg-*ohun elo wa:

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

Abajade:

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

Awọn ipinlẹ

Lo stateaṣayan lati ṣe ina awọn iyatọ-kilasi pseudo. Apeere pseudo-kilasi jẹ :hoverati :focus. Nigbati a ba pese atokọ ti awọn ipinlẹ, awọn orukọ kilasi ni a ṣẹda fun kilasi afarape yẹn. Fun apẹẹrẹ, lati yi opaity pada lori rababa, ṣafikun state: hoverati pe iwọ yoo wọle .opacity-hover:hoversinu CSS rẹ ti o ṣajọ.

Ṣe o nilo awọn kilasi pseudo-ọpọlọpọ? Lo akojọ awọn ipinlẹ ti o ya sọtọ aaye: state: hover focus.

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

Abajade:

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

Idahun

Ṣafikun responsiveBoolean lati ṣe ina awọn ohun elo ti o ṣe idahun (fun apẹẹrẹ, .opacity-md-25) kọja gbogbo awọn aaye fifọ .

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

Abajade:

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

Titẹ sita

Muu printaṣayan ṣiṣẹ yoo tun ṣe agbekalẹ awọn kilasi iwulo fun titẹjade, eyiti a lo laarin @media print { ... }ibeere media nikan.

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

Abajade:

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

Pataki

Gbogbo awọn ohun elo ti ipilẹṣẹ nipasẹ API pẹlu !importantlati rii daju pe wọn dojuiwọn awọn paati ati awọn kilasi iyipada bi a ti pinnu. O le yi eto yii pada ni agbaye pẹlu $enable-important-utilitiesoniyipada (aiyipada si true).

Lilo API

Ni bayi ti o mọ bi API awọn ohun elo ṣe n ṣiṣẹ, kọ ẹkọ bi o ṣe le ṣafikun awọn kilasi aṣa tirẹ ki o tun awọn ohun elo aifọwọṣe wa.

Daju awọn ohun elo

Paarẹ awọn ohun elo to wa tẹlẹ nipa lilo bọtini kanna. Fún àpẹrẹ, tí o bá fẹ́ kíláàsì ìṣàfikún àkúnwọ́sílẹ̀ ìdáhùn, o le ṣe èyí:

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

Ṣafikun awọn ohun elo

Awọn ohun elo tuntun le ṣe afikun si $utilitiesmaapu aiyipada pẹlu map-merge. Rii daju pe awọn faili Sass ti a beere ati _utilities.scsspe a ko wọle ni akọkọ, lẹhinna lo map-mergelati ṣafikun awọn ohun elo afikun rẹ. Fun apẹẹrẹ, eyi ni bii o ṣe le ṣafikun ohun elo idahun cursorpẹlu awọn iye mẹta.

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

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

Ṣatunṣe awọn ohun elo

$utilitiesṢe atunṣe awọn ohun elo to wa ninu maapu aiyipada pẹlu map-getati map-mergeawọn iṣẹ. Ninu apẹẹrẹ ni isalẹ, a n ṣafikun iye afikun si awọn widthohun elo. Bẹrẹ pẹlu ibẹrẹ map-mergeati lẹhinna pato iru ohun elo ti o fẹ yipada. Lati ibẹ, mu "width"maapu itẹ-ẹiyẹ pẹlu map-getlati wọle si ati ṣatunṣe awọn aṣayan ati iye ti ohun elo naa.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@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%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Mu idahun ṣiṣẹ

O le mu awọn kilasi idahun ṣiṣẹ fun eto awọn ohun elo to wa ti ko ṣe idahun lọwọlọwọ nipasẹ aiyipada. Fun apẹẹrẹ, lati jẹ ki awọn borderkilasi ni idahun:

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

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Eyi yoo ṣe ipilẹṣẹ awọn iyatọ idahun ti .borderati .border-0fun aaye fifọ kọọkan. CSS rẹ ti ipilẹṣẹ yoo dabi eyi:

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

Fun lorukọ mii awọn ohun elo

Ti o padanu awọn ohun elo v4, tabi lo si apejọ lorukọ miiran? Awọn ohun elo API le ṣee lo lati bori abajade classti ohun elo ti a fifun—fun apẹẹrẹ, lati tunrukọ .ms-*awọn ohun elo si atijọ .ml-*:

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

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Yọ awọn ohun elo

Yọ eyikeyi awọn ohun elo aiyipada kuro pẹlu iṣẹ map-remove()Sass .

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

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

O tun le lo iṣẹ map-merge()Sass ati ṣeto bọtini ẹgbẹ si nulllati yọ ohun elo naa kuro.

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

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

@import "bootstrap/scss/utilities/api";

Fikun-un, yọkuro, yipada

O le ṣafikun, yọkuro, ati yipada ọpọlọpọ awọn ohun elo ni ẹẹkan pẹlu iṣẹ map-merge()Sass . Eyi ni bii o ṣe le darapọ awọn apẹẹrẹ iṣaaju sinu maapu nla kan.

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

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

Yọ IwUlO ni RTL

Diẹ ninu awọn ọran eti jẹ ki aṣa aṣa RTL nira , gẹgẹbi awọn fifọ laini ni Arabic. Nitorinaa awọn ohun elo le jẹ silẹ lati iṣelọpọ RTL nipa tito rtlaṣayan si false:

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

Abajade:

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

Eyi ko ṣejade ohunkohun ninu RTL, o ṣeun si itọsọna iṣakoso RTLCSSremove .