Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

API ɗin Utility

API ɗin mai amfani kayan aiki ne na tushen Sass don samar da azuzuwan masu amfani.

A wannan shafi

Ana samar da abubuwan amfani na Bootstrap tare da API ɗin mai amfani kuma ana iya amfani da su don gyara ko tsawaita tsoffin azuzuwan masu amfani ta hanyar Sass. API ɗin mu mai amfani ya dogara ne akan jerin taswirori na Sass da ayyuka don ƙirƙirar iyalai na azuzuwan tare da zaɓuɓɓuka iri-iri. Idan ba ku saba da taswirar Sass ba, karanta akan takaddun Sass na hukuma don farawa.

Taswirar $utilitiesta ƙunshi duk abubuwan amfaninmu kuma daga baya an haɗa ta da $utilitiestaswirar ku ta al'ada, idan akwai. Taswirar mai amfani ya ƙunshi jerin maɓalli na ƙungiyoyi masu amfani waɗanda ke karɓar zaɓuɓɓuka masu zuwa:

Zabin Nau'in Ƙimar ta asali Bayani
property Da ake bukata - Sunan kadarorin, wannan na iya zama kirtani ko tsararrun igiyoyi (misali, faffadan kwance ko margins).
values Da ake bukata - Jerin dabi'u, ko taswira idan ba kwa son sunan ajin ya kasance daidai da ƙimar. Idan nullana amfani dashi azaman maɓalli na taswira, classba a riga an tsara shi da sunan aji ba.
class Na zaɓi banza Sunan ajin da aka samar. Idan ba'a bayar da propertyshi ba kuma tsararrun kirtani ne, classzai zama tsohuwa zuwa kashi na farko na propertytsararrun. Idan ba a bayar ba kuma propertykirtani ne, valuesana amfani da maɓallan don classsunayen.
css-var Na zaɓi false Boolean don samar da masu canjin CSS maimakon dokokin CSS.
css-variable-name Na zaɓi banza Sunan da ba a riga an shigar da shi na al'ada ba don madaidaicin CSS a cikin ka'idojin.
local-vars Na zaɓi banza Taswirar masu canjin CSS na gida don samarwa ban da dokokin CSS.
state Na zaɓi banza Jerin bambance-bambancen azuzuwa (misali, :hoverko :focus) don samarwa.
responsive Na zaɓi false Boolean yana nuna idan ya kamata a samar da azuzuwan masu amsawa.
rfs Na zaɓi false Boolean don ba da damar sake daidaita ruwa tare da RFS .
print Na zaɓi false Boolean yana nuna idan ana buƙatar ƙirƙirar azuzuwan bugawa.
rtl Na zaɓi true Boolean yana nuna idan ya kamata a adana kayan aiki a cikin RTL.

API yayi bayani

Ana ƙara duk masu canjin kayan aiki zuwa $utilitiesmadaidaicin cikin takardar salon mu _utilities.scss. Kowane rukuni na utilities yayi kama da haka:

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

Wanda ke fitar da abubuwa masu zuwa:

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

Dukiya

Dole ne a saita maɓallin da ake buƙata propertydon kowane kayan aiki, kuma dole ne ya ƙunshi ingantaccen kayan CSS. Ana amfani da wannan kadara a cikin ƙa'idodin kayan aikin da aka samar. Lokacin da classaka cire maɓallin, kuma yana aiki azaman sunan ajin tsoho. Yi la'akari da text-decorationamfanin:

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

Fitowa:

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

Darajoji

Yi amfani da valuesmaɓallin don ƙididdige ƙimar ƙayyadaddun propertyya kamata a yi amfani da su a cikin sunaye da ƙa'idodi da aka ƙirƙira. Zai iya zama jeri ko taswira (saita a cikin kayan aiki ko a cikin Sass m).

A matsayin lissafin, kamar tare da text-decorationutilities :

values: none underline line-through

A matsayin taswira, kamar tare da opacitykayan aiki :

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

A matsayin mai canjin Sass wanda ke saita jeri ko taswira, kamar yadda yake cikin abubuwan positionamfaninmu :

values: $position-values

Class

Yi amfani da classzaɓi don canza prefix ɗin aji da aka haɗa a cikin CSS da aka haɗa. Misali, don canzawa daga .opacity-*zuwa .o-*:

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

Fitowa:

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

Idan class: null, yana haifar da azuzuwan ga kowane valuesmaɓallan:

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

Fitowa:

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

CSS m utilities

Saita css-varzaɓin boolean zuwa truekuma API ɗin zai haifar da masu canjin CSS na gida don zaɓin da aka bayar maimakon property: valueƙa'idodin da aka saba. Ƙara wani zaɓi css-variable-namedon saita canjin sunan CSS daban fiye da sunan aji.

Yi la'akari da abubuwan amfaninmu .text-opacity-*. Idan muka ƙara css-variable-namezaɓi, za mu sami fitarwa na al'ada.

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

Fitowa:

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

Masu canjin CSS na gida

Yi amfani da local-varszaɓi don ƙididdige taswirar Sass wanda zai haifar da masu canjin CSS na gida a cikin ƙa'idodin aji mai amfani. Lura cewa yana iya buƙatar ƙarin aiki don cinye waɗannan masu canjin CSS na gida a cikin ƙa'idodin CSS da aka samar. Misali, la'akari da abubuwan amfaninmu .bg-*:

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

Fitowa:

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

Jihohi

Yi amfani da statezaɓin don samar da bambance-bambancen-aji. Misalin azuzuwan karya sune :hoverda :focus. Lokacin da aka ba da jerin jahohi, ana ƙirƙira sunayen aji don waccan ajin na bogi. Misali, don canza ganuwa akan hover, ƙara state: hoverkuma zaku shiga .opacity-hover:hovercikin CSS ɗinku da aka haɗa.

Kuna buƙatar azuzuwan ƙididdiga masu yawa? Yi amfani da jerin jihohin da ke raba sararin samaniya: state: hover focus.

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

Fitowa:

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

Mai amsawa

Ƙara responsiveboolean don samar da kayan aiki masu amsawa (misali, .opacity-md-25) a duk wuraren hutu .

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

Fitowa:

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

Buga

Ba da printdamar zaɓin kuma zai haifar da azuzuwan masu amfani don bugawa, waɗanda kawai ake amfani da su a cikin @media print { ... }tambayar kafofin watsa labarai.

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

Fitowa:

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

Muhimmanci

Duk abubuwan amfani da API ɗin suka ƙirƙira sun haɗa !importantdon tabbatar da sun ƙetare sassan da azuzuwan masu gyara kamar yadda aka yi niyya. Kuna iya jujjuya wannan saitin a duniya tare da $enable-important-utilitiesm (tsoho zuwa true).

Amfani da API

Yanzu da kun saba da yadda API ɗin kayan aiki ke aiki, koyi yadda ake ƙara azuzuwan al'ada da canza tsoffin kayan aikin mu.

Rage abubuwan amfani

Rage abubuwan amfani da ke akwai ta amfani da maɓalli iri ɗaya. Misali, idan kuna son ƙarin azuzuwan ambulaf ɗin amfani, kuna iya yin wannan:

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

Ƙara kayan aiki

Ana iya ƙara sabbin kayan aiki zuwa $utilitiestaswirar tsoho tare da map-merge. Tabbatar cewa fayilolin Sass ɗinmu da ake buƙata kuma _utilities.scssan shigo dasu da farko, sannan yi amfani da map-mergedon ƙara ƙarin abubuwan amfaninku. Misali, ga yadda ake ƙara mai cursoramfani mai amsawa mai ƙima uku.

@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";

Gyara kayan aiki

Gyara abubuwan amfani da ke cikin tsohuwar $utilitiestaswirar tare map-getda map-mergeayyuka. A cikin misalin da ke ƙasa, muna ƙara ƙarin ƙima ga widthabubuwan amfani. Fara da farko map-mergesannan ka saka kayan aiki da kake son gyarawa. Daga nan, ɗauko "width"taswirar gida tare da map-getdon samun dama da gyara zaɓuka da ƙimar kayan aikin.

@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";

Kunna amsawa

Kuna iya kunna azuzuwan amsa don saitunan abubuwan amfani waɗanda ba su da amsa ta tsohuwa. Misali, don sanya borderazuzuwan su amsa:

@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";

Wannan yanzu zai haifar da bambance-bambance masu amsawa na .borderkuma .border-0ga kowane fage. CSS ɗinku da aka samar zai yi kama da haka:

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

Sake suna masu amfani

An rasa abubuwan amfani v4, ko aka yi amfani da su zuwa wani taron suna? Ana iya amfani da API ɗin abubuwan amfani don ƙetare sakamakon classabin da aka bayar—misali, don sake suna .ms-*masu amfani zuwa tsofaffi .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";

Cire kayan aiki

Cire kowane tsoffin kayan aiki tare da aikin 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";

Hakanan zaka iya amfani da map-merge()aikin Sass kuma saita maɓallin ƙungiya nulldon cire mai amfani.

@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";

Ƙara, cire, gyara

Kuna iya ƙarawa, cirewa, da gyara yawancin abubuwan amfani gaba ɗaya tare da aikin map-merge()Sass . Anan ga yadda zaku iya haɗa misalan da suka gabata zuwa taswira mafi girma ɗaya.

@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";

Cire mai amfani a cikin RTL

Wasu shari'o'in gefe suna sa salo na RTL da wahala , kamar karya layi a cikin Larabci. Don haka ana iya sauke abubuwan amfani daga fitowar RTL ta saita rtlzaɓi zuwa false:

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

Fitowa:

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

Wannan baya fitar da komai a cikin RTL, godiya ga umarnin sarrafawa na RTLCSSremove .