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 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 Mai canzawa don sunan aji idan ba kwa son ya zama iri ɗaya da dukiya. Idan ba ka samar da classmaɓalli ba kuma propertymaɓalli shine tsararrun igiyoyi, sunan ajin zai zama kashi na farko na propertytsararrun.
state Na zaɓi Jerin bambance-bambancen azuzuwan kamar :hoverko :focusdon samarwa don amfanin. Babu ƙima ta asali.
responsive Na zaɓi Boolean yana nuna idan ana buƙatar ƙirƙirar azuzuwan amsa. falseta tsohuwa.
rfs Na zaɓi Boolean don kunna sake daidaita ruwa. Duba shafin RFS don gano yadda wannan ke aiki. falseta tsohuwa.
print Na zaɓi Boolean yana nuna idan ana buƙatar ƙirƙirar azuzuwan bugawa. falseta tsohuwa.
rtl Na zaɓi Boolean yana nuna idan ya kamata a adana kayan aiki a cikin RTL. trueta tsohuwa.

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

Prefix na al'ada

Yi amfani da classzaɓi don canza prefix na aji da aka haɗa a cikin CSS da aka haɗa:

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

Fitowa:

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

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

Abubuwan amfani masu 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; }
}

Canza kayan aiki

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

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.

Ƙ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 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/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 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/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-mergeda ƙ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 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 .