Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
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 da shi azaman maɓallin taswira, ba a haɗa shi 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.
css-var Na zaɓi false Boolean don samar da masu canjin CSS maimakon dokokin CSS.
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 da 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; }

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. Yi la'akari da abubuwan amfaninmu .text-opacity-*:

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

Fitowa:

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 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 ya ƙirƙira sun haɗa !importantdon tabbatar da sun ƙetare abubuwan da aka gyara 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 naku na al'ada kuma ku 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 masu amfani da ambaliya, 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/utilities";

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

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 wace kayan aiki kake son gyarawa. Daga can, ɗ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/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

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/utilities";

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

Wannan yanzu zai haifar da bambance-bambance masu amsawa na .borderkuma .border-0ga kowane yanki. 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/utilities";

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

Cire kayan aiki

Cire kowane tsoffin kayan aiki ta hanyar saita maɓallin rukuni zuwa null. Misali, don cire duk abubuwan amfaninmu width, ƙirƙira $utilities map-mergekuma ƙara ciki "width": null.

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

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

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 za a iya sauke abubuwan amfani daga fitowar RTL ta hanyar 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 .