Utility API

Utility API, peýdaly synplary döretmek üçin Sass esasly guraldyr.

Bu sahypada

“Bootstrap” kömekçi enjamlary “API” bilen döredilýär we Sass arkaly deslapky peýdaly synplar toplumymyzy üýtgetmek ýa-da giňeltmek üçin ulanylyp bilner. Biziň peýdaly API, Sass kartalarynyň we dürli wariantlary bolan synp maşgalalaryny döretmek üçin funksiýalara esaslanýar. Sass kartalary bilen tanyş däl bolsaňyz, başlamak üçin resmi Sass resminamalaryny okaň.

Kartada $utilitiesähli hyzmatlarymyz bar we bar bolsa, adaty $utilitieskartaňyz bilen birleşdirilýär. Peýdaly kartada aşakdaky wariantlary kabul edýän peýdaly toparlaryň esasy sanawy bar:

Wariant	Görnüşi	Bellenen baha	Düşündiriş
`property`	Gerekli	-	Emlägiň ady, bu setir ýa-da setirler toplumy bolup biler (mysal üçin, gorizontal paddingler ýa-da gyralar).
`values`	Gerekli	-	Gymmatlyklaryň sanawy, ýa-da synp adynyň bahasy bilen deň bolmagyny islemeýän bolsaňyz. Karta `null`açary hökmünde ulanylsa, düzülmeýär.
`class`	Meýletin	null	Döredilen synpyň ady. Eger üpjün edilmedik bolsa we `property`setirler toplumy bolsa, massiwiň `class`birinji elementine gabat geler `property`.
`css-var`	Meýletin	`false`	CSS düzgünleriniň ýerine CSS üýtgeýjilerini döretmek üçin Boolean.
`local-vars`	Meýletin	null	CSS düzgünlerine goşmaça döretmek üçin ýerli CSS üýtgeýänleriň kartasy.
`state`	Meýletin	null	Pseasama synp görnüşleriniň sanawy (meselem, `:hover`ýa-da `:focus`).
`responsive`	Meýletin	`false`	Duýgur synplaryň döredilmelidigini görkezýän Boolean.
`rfs`	Meýletin	`false`	RFS bilen suwuklygy halas etmegi üpjün etmek üçin Boolean .
`print`	Meýletin	`false`	Çap sapaklarynyň döredilmelidigini görkezýän Boolean.
`rtl`	Meýletin	`true`	Kömekçi RTL-de saklanmalydygyny görkezýän Boolean.

API düşündirdi

Uthli peýdaly üýtgeýjiler stil tablisamyzdaky $utilitiesüýtgeýjä goşulýar. _utilities.scssJemgyýetçilik hyzmatlarynyň her topary şuňa meňzeýär:

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

Aşakdakylar:

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

Emläk

Talap edilýän propertyaçar islendik peýdaly enjam üçin kesgitlenmeli we dogry CSS häsiýeti bolmaly. Bu emläk döredilen peýdaly düzgünlerde ulanylýar. Düwme classaýrylanda, adaty synp ady hökmünde hem hyzmat edýär. Peýdalylygy göz öňünde tutuň text-decoration:

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

Çykyş:

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

Gymmatlyklar

Döredilen synp atlarynda we düzgünlerinde valuesgörkezilen haýsy bahalaryň ulanylmalydygyny kesgitlemek üçin açary ulanyň . propertySanaw ýa-da karta bolup biler (kommunal hyzmatlarda ýa-da Sass üýtgeýjisinde).

Sanaw hökmünde, text-decorationkommunal hyzmatlardaky ýaly :

values: none underline line-through

Karta hökmünde, opacitykommunal hyzmatlardaky ýaly :

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

positionKärhanalarymyzdaky ýaly sanawy ýa-da kartany kesgitleýän Sass üýtgeýjisi hökmünde :

values: $position-values

Synp

classToplanan CSS-de ulanylýan synp prefiksini üýtgetmek opsiýasyny ulanyň . Mysal üçin, .opacity-*üýtgetmek .o-*:

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

Çykyş:

.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 üýtgeýän kömekçi enjamlar

css-varBoolean opsiýasyny düzüň we API adaty düzgünleriň trueýerine berlen saýlaýjy üçin ýerli CSS üýtgeýjileri döreder . property: valueKärhanalarymyza .text-opacity-*serediň:

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

Çykyş:

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

CSerli CSS üýtgeýjileri

local-varsUtility synpynyň düzgünlerinde ýerli CSS üýtgeýjileri döredjek Sass kartasyny kesgitlemek opsiýasyny ulanyň . Döredilen CSS düzgünlerinde şol ýerli CSS üýtgeýjileri sarp etmek üçin goşmaça iş gerek bolup biljekdigini ýadyňyzdan çykarmaň. Mysal üçin, .bg-*hyzmatlarymyza serediň:

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

Çykyş:

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

Ştatlar

statePseudo-klass üýtgeýişleri döretmek üçin opsiýany ulanyň . Pseudo-klaslara mysal :hoverwe :focus. Ştatlaryň sanawy berlende, şol pseudo-synp üçin synp atlary döredilýär. Mysal üçin, aýlawda aç-açanlygy üýtgetmek üçin goşuň state: hoverwe .opacity-hover:hoverdüzülen CSS-ä girersiňiz.

Birnäçe ýasama synp gerekmi? Boşluk bilen bölünen ştatlaryň sanawyny ulanyň : state: hover focus.

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

Çykyş:

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

Jogapkärçilikli

Breakhli kesiş nokatlarynda täsirliresponsive kömekçi enjamlary (meselem .opacity-md-25) döretmek üçin “Boolean” goşuň .

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

Çykyş:

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

Çap et

Bu printopsiýany açmak, diňe media gözleginde ulanylýan çap etmek üçin peýdaly sapaklary döreder .@media print { ... }

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

Çykyş:

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

Möhümligi

API tarapyndan döredilen ähli hyzmatlar, !importantkomponentleri we üýtgediji synplary göz öňünde tutulşy ýaly ýok etmegini üpjün edýär. Bu sazlamany $enable-important-utilitiesüýtgeýji bilen ( global tertipde true) üýtgedip bilersiňiz.

API ulanmak

Utilities API-iň işleýşi bilen tanyş bolanyňyzdan soň, öz aýratyn synplaryňyzy goşmagy we deslapky kömekçi hyzmatlarymyzy üýtgetmegi öwreniň.

Kärhanalary ýok et

Şol bir düwmäni ulanyp, bar bolan kömekçi enjamlary ýok ediň. Mysal üçin, goşmaça ses beriş peýdaly synplary isleseňiz, muny edip bilersiňiz:

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

Kärhana goşuň

$utilitiesTäze kömekçi enjamlar, adaty karta a bilen goşulyp bilner map-merge. Gerekli Sass faýllarymyza we ilki import edilýändigine göz ýetiriň _utilities.scss, soňra map-mergegoşmaça hyzmatlaryňyzy goşmak üçin ulanyň. Mysal üçin, cursorüç bahaly jogap beriji peýdany nädip goşmaly.

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

Kärhanalary üýtgediň

Bar bolan hyzmatlary deslapky $utilitieskartada map-getwe map-mergefunksiýalar bilen üýtgediň. Aşakdaky mysalda, widthkommunal hyzmatlara goşmaça baha goşýarys. Başlangyçdan başlaň map-mergewe soňra haýsy peýdaly zady üýtgetmek isleýändigiňizi görkeziň. Şol ýerden, peýdaly wariantlara we gymmatlyklara girmek we üýtgetmek üçin "width"ýerleşdirilen kartany alyň.map-get

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

Jogap bermäge mümkinçilik beriň

Bar bolan kömekçi toplumy üçin häzirki wagtda adaty ýagdaýda jogap bermeýän synplary açyp bilersiňiz. Mysal üçin, bordersapaklary täsirli etmek üçin:

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

Bu indi her nokat üçin täsirli üýtgeşiklikleri .borderdöreder . .border-0Döredilen CSS şeýle bolar:

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

Kärhanalaryň adyny üýtgediň

V4 kömekçi enjamlaryny ýitirýärsiňizmi ýa-da başga bir atlandyryş konwensiýasyna öwrenişdiňizmi? Utilities API berlen peýdanyň netijesini ýok etmek üçin ulanylyp bilner class, mysal üçin, .ms-*kommunal hyzmatlaryň adyny köne diýip üýtgetmek .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 ),
    ),
  )
);

Kärhanalary aýyryň

Topar düwmesini açyp, deslapky kömekçi enjamlaryň islendigini aýyryň null. Mysal üçin, ähli widthhyzmatlarymyzy aýyrmak, a döretmek $utilities map-mergewe içerde goşmak "width": null.

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

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

RTL-de kömekçi enjamy aýyryň

Käbir gyradaky ýagdaýlar , arap dilinde setir kesilmegi ýaly RTL stilini kynlaşdyrýar . rtlŞeýlelik bilen, kommunal hyzmatlary opsiýany düzmek bilen RTL çykyşyndan taşlap bolýar false:

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

Çykyş:

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

RTLCSS removedolandyryş görkezmesiniň kömegi bilen bu RTL-de hiç zat çykarmaýar .