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

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

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

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

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

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

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

Тусгай ангийн угтвар

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

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

Гаралт:

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

муж улсууд

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

Хэрэглээг өөрчлөх

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

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

Хэвлэлийн хэрэгслүүд

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

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

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

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

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

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

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

Энэ нь одоо таслах цэг бүрийн хувьд хариу үйлдэл үзүүлэх өөрчлөлтүүдийг үүсгэх .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/utilities";

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

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

Бүлэг товчлуурыг тохируулснаар анхдагч хэрэгслүүдийн аль нэгийг устгана уу null. Жишээлбэл, манай бүх widthхэрэгслийг устгахын тулд a үүсгэж $utilities map-merge, дотор нь нэмнэ үү "width": null.

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

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

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 дээр юу ч гаргадаггүй .