API Utility

API-и утилита як абзори ба Sass асосёфта барои тавлиди синфҳои коммуналӣ мебошад.

Дар ин саҳифа

Утилитҳои Bootstrap бо API утилитаи мо тавлид мешаванд ва онҳоро барои тағир додан ё васеъ кардани маҷмӯи пешфарзии синфҳои утилитаҳои мо тавассути Sass истифода бурдан мумкин аст. API-и хидматрасонии мо ба як қатор харитаҳои Sass ва функсияҳо барои тавлиди оилаҳои синфҳо бо имконоти гуногун асос ёфтааст. Агар шумо бо харитаҳои Sass шинос набошед, барои оғоз кардани ҳуҷҷатҳои расмии Sass мутолиа кунед .

Харита $utilitiesдорои тамоми хидматҳои мо мебошад ва баъдтар бо $utilitiesхаритаи фармоишии шумо, агар мавҷуд бошад, якҷоя карда мешавад. Харитаи хидматрасонӣ рӯйхати калидии гурӯҳҳои коммуналиро дар бар мегирад, ки имконоти зеринро қабул мекунанд:

Варианти	Навъи	Тавсифи
`property`	Талаб карда мешавад	Номи амвол, ин метавонад сатр ё массиви сатр бошад (масалан, бандҳои уфуқӣ ё маржа).
`values`	Талаб карда мешавад	Рӯйхати арзишҳо ё харита, агар шумо нахоҳед, ки номи синф бо арзиш якхела бошад. Агар `null`ҳамчун калиди харита истифода шавад, он тартиб дода намешавад.
`class`	Ихтиёрӣ	Тағирёбанда барои номи синф, агар шумо нахоҳед, ки он бо моликият якхела бошад. Агар шумо калидро пешниҳод накунед `class`ва `property`калид массиви сатрҳо бошад, номи синф унсури якуми `property`массив хоҳад буд.
`state`	Ихтиёрӣ	Рӯйхати вариантҳои псевдосинфи монанди `:hover`ё `:focus`барои тавлиди утилита. Арзиши пешфарз нест.
`responsive`	Ихтиёрӣ	Мантиқӣ нишон медиҳад, ки оё синфҳои ҷавобгӯ бояд тавлид шаванд. `false`бо нобаёнӣ.
`rfs`	Ихтиёрӣ	Лоиқӣ барои имкон додани миқёси моеъ. Ба саҳифаи RFS нигаред, то бидонед, ки ин чӣ гуна кор мекунад. `false`бо нобаёнӣ.
`print`	Ихтиёрӣ	Лоиқӣ нишон медиҳад, ки оё синфҳои чопӣ бояд тавлид шаванд. `false`бо нобаёнӣ.
`rtl`	Ихтиёрӣ	Мантиқӣ нишон медиҳад, ки оё утилита бояд дар 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хидматҳои мо, эҷод кунед ва дар дохили он $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 */

Ба шарофати директиваи назорати RTLCSSremove , ин дар RTL чизе намедиҳад .