Utility API

ឧបករណ៍ប្រើប្រាស់ API គឺជាឧបករណ៍ដែលមានមូលដ្ឋានលើ Sass ដើម្បីបង្កើតថ្នាក់ឧបករណ៍ប្រើប្រាស់។

នៅលើទំព័រនេះ។

ឧបករណ៍ប្រើប្រាស់ Bootstrap ត្រូវបានបង្កើតជាមួយ Utility API របស់យើង ហើយអាចត្រូវបានប្រើដើម្បីកែប្រែ ឬពង្រីកសំណុំឧបករណ៍ប្រើប្រាស់លំនាំដើមរបស់យើងតាមរយៈ Sass ។ API ឧបករណ៍ប្រើប្រាស់របស់យើងគឺផ្អែកលើស៊េរីនៃផែនទី Sass និងមុខងារសម្រាប់បង្កើតក្រុមគ្រួសារនៃថ្នាក់ជាមួយនឹងជម្រើសផ្សេងៗ។ ប្រសិនបើអ្នកមិនស៊ាំនឹងផែនទី Sass សូមអាននៅលើ ឯកសារផ្លូវការរបស់ Sass ដើម្បីចាប់ផ្តើម។

ផែនទី $utilitiesមានឧបករណ៍ប្រើប្រាស់ទាំងអស់របស់យើង ហើយក្រោយមកត្រូវបានបញ្ចូលជាមួយ $utilitiesផែនទីផ្ទាល់ខ្លួនរបស់អ្នក ប្រសិនបើមាន។ ផែនទីឧបករណ៍ប្រើប្រាស់មានបញ្ជីគន្លឹះនៃក្រុមឧបករណ៍ប្រើប្រាស់ដែលទទួលយកជម្រើសដូចខាងក្រោមៈ

ជម្រើស	ប្រភេទ	តម្លៃលំនាំដើម	ការពិពណ៌នា
`property`	ទាមទារ	–	ឈ្មោះនៃទ្រព្យនេះអាចជាខ្សែអក្សរឬអារេនៃខ្សែអក្សរ (ឧ. បន្ទះផ្តេក ឬរឹម)។
`values`	ទាមទារ	–	បញ្ជីតម្លៃ ឬផែនទី ប្រសិនបើអ្នកមិនចង់ឱ្យឈ្មោះថ្នាក់ដូចតម្លៃ។ ប្រសិនបើ `null`ត្រូវបានប្រើជាគន្លឹះផែនទី វាមិនត្រូវបានចងក្រងទេ។
`class`	ស្រេចចិត្ត	មោឃៈ	ឈ្មោះនៃថ្នាក់ដែលបានបង្កើត។ ប្រសិនបើមិនបានផ្តល់ឱ្យហើយ `property`ជាអារេនៃខ្សែអក្សរ `class`នឹងកំណត់លំនាំដើមទៅធាតុទីមួយនៃ `property`អារេ។
`css-var`	ស្រេចចិត្ត	`false`	Boolean ដើម្បីបង្កើតអថេរ CSS ជំនួសឱ្យច្បាប់ CSS ។
`local-vars`	ស្រេចចិត្ត	មោឃៈ	ផែនទីនៃអថេរ CSS មូលដ្ឋានដើម្បីបង្កើតបន្ថែមលើច្បាប់ CSS ។
`state`	ស្រេចចិត្ត	មោឃៈ	បញ្ជីនៃវ៉ារ្យ៉ង់ pseudo-class (ឧ. `:hover`ឬ `:focus`) ដើម្បីបង្កើត។
`responsive`	ស្រេចចិត្ត	`false`	ប៊ូលីនដែលចង្អុលបង្ហាញថាតើថ្នាក់ឆ្លើយតបគួរតែត្រូវបានបង្កើត។
`rfs`	ស្រេចចិត្ត	`false`	ប៊ូលីន ដើម្បីបើក ការពង្រីកសារធាតុរាវជាមួយ RFS ។
`print`	ស្រេចចិត្ត	`false`	Boolean បង្ហាញថាតើថ្នាក់បោះពុម្ពចាំបាច់ត្រូវបង្កើតឬអត់។
`rtl`	ស្រេចចិត្ត	`true`	Boolean បង្ហាញថាតើឧបករណ៍ប្រើប្រាស់គួរតែត្រូវបានរក្សាទុកនៅក្នុង 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; }

ឧបករណ៍ប្រើប្រាស់អថេរ CSS

កំណត់ css-varជម្រើសប៊ូលីន trueហើយ API នឹងបង្កើតអថេរ CSS មូលដ្ឋានសម្រាប់អ្នកជ្រើសរើសដែលបានផ្តល់ឱ្យជំនួសឱ្យ property: valueច្បាប់ធម្មតា។ ពិចារណា .text-opacity-*ឧបករណ៍ប្រើប្រាស់របស់យើង៖

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

លទ្ធផល៖

.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 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ជម្រើសដើម្បីបង្កើតបំរែបំរួល pseudo-class ។ ឧទាហរណ៍ pseudo-classes គឺ :hoverនិង :focus. នៅពេលដែលបញ្ជីនៃរដ្ឋត្រូវបានផ្តល់ នោះឈ្មោះថ្នាក់ត្រូវបានបង្កើតសម្រាប់ pseudo-class នោះ។ ជាឧទាហរណ៍ ដើម្បីផ្លាស់ប្តូរភាពស្រអាប់នៅលើការសង្កត់ សូមបន្ថែម state: hoverហើយអ្នកនឹងទទួលបាន .opacity-hover:hoverនៅក្នុង CSS ដែលបានចងក្រងរបស់អ្នក។

ត្រូវការ pseudo-class ច្រើនទេ? ប្រើបញ្ជីរដ្ឋដែលបំបែកដោយលំហ៖ 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/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 ឬធ្លាប់ប្រើអនុសញ្ញាដាក់ឈ្មោះផ្សេងទៀត? Utilities 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 ដោយកំណត់ 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 ទេ អរគុណចំពោះ ការណែនាំត្រួតពិនិត្យ RTLCSSremove ។