Коммуналь 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`	Ихтимал	Сыеклыкны коткару өчен буле. Моның ничек эшләвен белү өчен , 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; }

Махсус класс префиксы

classCompыелган 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; }

Onsаваплы коммуналь хезмәтләр

Барлык нокталарда җаваплы коммуналь хезмәтләр (мәсәлән, ) булдыру өчен 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%),
        ),
      ),
    ),
  )
);

Respаваплы булырга

Сез хәзерге вакытта килешү буенча җаваплы булмаган коммуналь хезмәтләр җыелмасы өчен җаваплы класслар эшли аласыз. Мәсәлән, 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-*коммуналь хезмәтләрне иске исемгә үзгәртү өчен .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 чыгаруыннан ташланырга мөмкин 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 */

Бу RTLSS removeконтроль күрсәтмәсе ярдәмендә RTLда бернәрсә дә чыгармый .