Хэрэглээний API

Хэрэглээний API нь хэрэглээний анги үүсгэх Sass дээр суурилсан хэрэгсэл юм.

Энэ хуудсан дээр

Bootstrap хэрэглүүрүүд нь манай хэрэглүүрийн API-ээр үүсгэгддэг бөгөөд Sass-ээр дамжуулан бидний анхдагч хэрэглээний ангиудыг өөрчлөх эсвэл өргөтгөхөд ашиглаж болно. Манай хэрэглүүрийн API нь төрөл бүрийн сонголт бүхий ангиудын гэр бүлүүдийг үүсгэх хэд хэдэн Sass газрын зураг, функцууд дээр суурилдаг. Хэрэв та Sass газрын зургийн талаар сайн мэдэхгүй байгаа бол Sass-н албан ёсны баримт бичгүүдийг уншина уу .

Газрын зураг нь манай бүх хэрэгслийг агуулсан бөгөөд хэрэв байгаа $utilitiesбол дараа нь таны захиалгат газрын зурагтай нэгтгэгдэнэ . $utilitiesХэрэглээний газрын зураг нь дараах сонголтуудыг хүлээн авах хэрэгслүүдийн бүлгүүдийн үндсэн жагсаалтыг агуулна.

Сонголт	Төрөл	Өгөгдмөл утга	Тодорхойлолт
`property`	Шаардлагатай	–	Үл хөдлөх хөрөнгийн нэр, энэ нь мөр эсвэл мөрийн массив байж болно (жишээ нь, хэвтээ дэвсгэр эсвэл захын зай).
`values`	Шаардлагатай	–	Утгын жагсаалт эсвэл ангийн нэр нь утгатай ижил байхыг хүсэхгүй бол газрын зураг. `null`Газрын зургийн түлхүүр болгон ашигладаг бол ангийн `class`нэрийн өмнө залгахгүй.
`class`	Нэмэлт	null	Үүсгэсэн ангийн нэр. Хэрэв өгөөгүй `property`бөгөөд мөрийн массив бол массивын `class`эхний элементийг өгөгдмөл болгоно `property`. Хэрэв өгөөгүй `property`бөгөөд тэмдэгт мөр бол `values`товчлууруудыг `class`нэрэнд ашиглана.
`css-var`	Нэмэлт	`false`	CSS дүрмийн оронд CSS хувьсагчийг үүсгэхийн тулд Boolean.
`css-variable-name`	Нэмэлт	null	Дүрмийн багц доторх CSS хувьсагчийн угтваргүй нэр.
`local-vars`	Нэмэлт	null	CSS дүрмээс гадна үүсгэх орон нутгийн CSS хувьсагчийн газрын зураг.
`state`	Нэмэлт	null	Үүсгэх псевдо ангиллын хувилбаруудын жагсаалт (жишээ нь, `:hover`эсвэл `:focus`).
`responsive`	Нэмэлт	`false`	Хариуцлагатай анги үүсгэх эсэхийг заадаг логик.
`rfs`	Нэмэлт	`false`	RFS ашиглан шингэний хэмжээг өөрчлөхийг идэвхжүүлэхийн тулд Boolean .
`print`	Нэмэлт	`false`	Хэвлэх анги үүсгэх шаардлагатай эсэхийг илтгэх логик.
`rtl`	Нэмэлт	`true`	Энэ нь хэрэглүүрийг RTL-д хадгалах эсэхийг заадаг.

API тайлбарлав

Бүх хэрэгслийн хувьсагчийг $utilitiesманай загварын хүснэгт доторх хувьсагчид нэмсэн _utilities.scss. Хэрэглээний бүлэг бүр иймэрхүү харагдаж байна.

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

Дараахыг гаргана:

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

Өмч

Шаардлагатай propertyтүлхүүрийг аливаа хэрэгсэлд тохируулсан байх ёстой бөгөөд энэ нь хүчинтэй CSS шинж чанарыг агуулсан байх ёстой. Энэ өмчийг үүсгэсэн хэрэгслийн дүрмийн багцад ашигладаг. classТүлхүүрийг орхигдуулсан тохиолдолд энэ нь үндсэн ангийн нэр болж өгдөг . Хэрэглээг авч үзье text-decoration:

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

Гаралт:

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

Үнэ цэнэ

Үүсгэсэн ангийн нэр болон дүрмүүдэд valuesзаасан утгуудын аль утгыг ашиглахыг түлхүүрийг ашиглана уу. propertyЖагсаалт эсвэл газрын зураг байж болно (хэрэгслүүд эсвэл Sass хувьсагчаар тохируулсан).

Жагсаалтын хувьд, text-decorationхэрэгслүүдтэй адил :

values: none underline line-through

Газрын зургийн хувьд, opacityхэрэгслүүдтэй адил :

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

Манай positionхэрэгслүүдийн адил жагсаалт эсвэл газрын зургийг тохируулдаг Sass хувьсагчийн хувьд :

values: $position-values

Анги

classЭмхэтгэсэн CSS-д ашигласан ангийн угтварыг өөрчлөх сонголтыг ашиглана уу . Жишээ нь:-аас .opacity-*өөрчлөх .o-*:

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

Гаралт:

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

Хэрэв , түлхүүр class: nullтус бүрд анги үүсгэдэг :values

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

Гаралт:

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

CSS хувьсах хэрэгслүүд

Боолийн css-varсонголтыг тохируулснаар API нь ердийн дүрмийн trueоронд тухайн сонгогчийн хувьд локал CSS хувьсагчийг үүсгэнэ . Ангийн нэрээс өөр CSS хувьсагчийн нэрийг тохируулахын тулд property: valueнэмэлт зүйл нэмнэ үү .css-variable-name

Манай .text-opacity-*хэрэгслүүдийг анхаарч үзээрэй. Хэрэв бид css-variable-nameсонголтыг нэмбэл бид захиалгат гаралтыг авах болно.

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

Гаралт:

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

Орон нутгийн CSS хувьсагч

Хэрэглээний local-varsангийн дүрмийн багц дотор локал CSS хувьсагчийг үүсгэх Sass газрын зургийг зааж өгөх сонголтыг ашиглана уу. Үүсгэсэн CSS дүрмүүдэд эдгээр локал CSS хувьсагчдыг ашиглахын тулд нэмэлт ажил шаардлагатай болохыг анхаарна уу. Жишээлбэл, манай .bg-*хэрэгслүүдийг авч үзье:

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

Гаралт:

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

муж улсууд

stateХуурамч ангиллын хувилбаруудыг үүсгэх сонголтыг ашиглана уу . Жишээ нь псевдо ангиуд нь :hoverболон :focus. Мужийн жагсаалтыг өгөх үед тухайн псевдо ангид ангийн нэр үүсгэгдэнэ. Жишээлбэл, хулгана дээр очиход тунгалаг байдлыг өөрчлөхийн тулд нэмэхэд state: hoverта .opacity-hover:hoverэмхэтгэсэн CSS-ээ авах болно.

Олон псевдо анги хэрэгтэй юу? Зайгаар тусгаарласан төлөвүүдийн жагсаалтыг ашиглана уу: state: hover focus.

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

Гаралт:

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

Хариуцлагатай

Бүх таслах цэгүүдэд хариу үйлдэл үзүүлэх хэрэгслүүд (жишээ нь, ) responsiveүүсгэхийн тулд логикийг нэмнэ үү ..opacity-md-25

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

Гаралт:

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

Хэвлэх

printСонголтыг идэвхжүүлснээр зөвхөн хэвлэл мэдээллийн асуулгад хэрэглэгдэх хэвлэх хэрэгслийн ангиудыг үүсгэх болно .@media print { ... }

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

Гаралт:

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

Ач холбогдол

API-ээр үүсгэгдсэн бүх хэрэгслүүд !importantбүрэлдэхүүн хэсгүүд болон хувиргагч ангиудыг зориулалтын дагуу хүчингүй болгодог. Та энэ тохиргоог $enable-important-utilitiesхувьсагчаар (өгөгдмөл нь true) дэлхий даяар сольж болно.

API ашиглах

Одоо та API хэрэгслүүд хэрхэн ажилладагийг мэддэг болсон тул өөрийн тусгай ангиудыг хэрхэн нэмж, манай үндсэн хэрэгслүүдийг хэрхэн өөрчлөх талаар суралцаарай.

Хэрэгслийг хүчингүй болгох

Ижил түлхүүрийг ашиглан одоо байгаа хэрэгслүүдийг дарна уу. Жишээлбэл, хэрэв та нэмэлт мэдрэмжтэй халих хэрэгслийн ангиудыг авахыг хүсвэл үүнийг хийж болно:

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

Хэрэгсэл нэмэх

$utilitiesҮндсэн газрын зураг дээр шинэ хэрэгслүүд нэмж болно map-merge. Бидний шаардлагатай Sass файлуудыг _utilities.scssэхлээд импортолсон эсэхийг шалгаад дараа нь map-mergeнэмэлт хэрэглүүрээ нэмэхийн тулд үүнийг ашиглана уу. Жишээлбэл, cursorгурван утга бүхий хариу үйлдэл үзүүлэх хэрэгслийг хэрхэн нэмэх талаар эндээс үзнэ үү.

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

Хэрэгслийг өөрчлөх

Өгөгдмөл $utilitiesгазрын зураг дээрх одоо байгаа хэрэгслүүдийг map-getболон map-mergeфункцуудыг өөрчлөх. Доорх жишээнд бид widthхэрэгслүүдэд нэмэлт утгыг нэмж байна. Эхний үсгээр map-mergeэхэлж, аль хэрэгслийг өөрчлөхөө зааж өгнө үү. Тэндээс уг хэрэгслийн сонголт болон утгуудад хандах, өөрчлөхийн тулд үүрлэсэн "width"газрын зургийг татаж авна уу.map-get

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

Хариултыг идэвхжүүлэх

Өгөгдмөлөөр одоогоор хариу үйлдэл үзүүлэхгүй байгаа хэрэгслүүдийн багцад та хариу үйлдэл үзүүлэх классуудыг идэвхжүүлж болно. Жишээлбэл, borderангиудыг хариу үйлдэл үзүүлэхийн тулд:

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

Энэ нь одоо таслах цэг бүрийн хувьд хариу үйлдэл үзүүлэх өөрчлөлтүүдийг үүсгэх .borderболно .border-0. Таны үүсгэсэн CSS дараах байдлаар харагдах болно.

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

Хэрэгслийн нэрийг өөрчлөх

v4 хэрэгслүүд дутуу эсвэл өөр нэрлэх конвенцид дассан уу? Хэрэглээний API-г тухайн хэрэглүүрийн үр дүнг хүчингүй болгоход ашиглаж болно class, жишээлбэл, .ms-*хэрэгслүүдийн нэрийг oldish болгон өөрчлөх .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";

Хэрэгслийг устгана уу

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

Та мөн хэрэгслийг устгахын тулд map-merge()Sass функцийг ашиглаж , бүлгийн товчлуурыг тохируулж болно .null

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

Нэмэх, хасах, өөрчлөх

map-merge()Та Sass функцээр олон хэрэгслийг нэг дор нэмж, устгаж, өөрчлөх боломжтой . Та өмнөх жишээнүүдийг нэг том газрын зурагт хэрхэн нэгтгэж болохыг эндээс үзнэ үү.

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

RTL дахь хэрэгслийг устгана уу

Зарим захын тохиолдлууд RTL загварчлалыг хэцүү болгодог , тухайлбал араб хэл дээрх мөр таслах. rtlТиймээс дараах сонголтыг тохируулснаар хэрэгслүүдийг RTL гаралтаас хасаж болно false.

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

Гаралт:

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

Энэ нь RTLCSS removeхяналтын удирдамжийн ачаар RTL дээр юу ч гаргадаггүй .