კომუნალური API

utility 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 წესების ნაცვლად.
`css-variable-name`	სურვილისამებრ	null	წესების ნაკრების შიგნით CSS ცვლადის მორგებული არაპრეფიქსის სახელი.
`local-vars`	სურვილისამებრ	null	ადგილობრივი CSS ცვლადების რუკა CSS წესების დამატებით გენერირებისთვის.
`state`	სურვილისამებრ	null	ფსევდოკლასის ვარიანტების სია (მაგ., `:hover`ან `:focus`) გენერირებისთვის.
`responsive`	სურვილისამებრ	`false`	Boolean მიუთითებს, უნდა შეიქმნას თუ არა საპასუხო კლასები.
`rfs`	სურვილისამებრ	`false`	ლოგიკური სითხის ხელახალი სკალირების გასააქტიურებლად RFS-ით .
`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,
)

როგორც Sass ცვლადი, რომელიც ადგენს სიას ან რუკას, როგორც ჩვენს positionკომუნალურ პროგრამებში :

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

If 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ლოგიკური ვარიანტი trueდა API გამოიმუშავებს ადგილობრივ CSS ცვლადებს მოცემული სელექტორისთვის ჩვეულებრივი property: valueწესების ნაცვლად. დაამატეთ არასავალდებულო css-variable-nameCSS ცვლადის სხვა სახელის დასაყენებლად, ვიდრე კლასის სახელი.

განვიხილოთ ჩვენი .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ოფცია Sass რუკის დასაზუსტებლად, რომელიც გამოიმუშავებს ადგილობრივ CSS ცვლადებს სასარგებლო კლასის წესების ნაკრების ფარგლებში. გთხოვთ, გაითვალისწინოთ, რომ შესაძლოა საჭირო გახდეს დამატებითი სამუშაო ამ ადგილობრივი 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-ის გამოყენება

ახლა, როცა გაეცანით, თუ როგორ მუშაობს Utilities 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 კომუნალური პროგრამები, ან გამოიყენება სხვა სახელების კონვენციაში? Utilities API შეიძლება გამოყენებულ იქნას classმოცემული უტილიტის შედეგების გადასაფარად - მაგალითად, .ms-*კომუნალური პროგრამების ძველის სახელით გადარქმევა .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 */

ეს არაფერს გამოსცემს RTL- ში, RTLCSS removeკონტროლის დირექტივის წყალობით .