Utility API

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

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

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

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

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

ការផ្លាស់ប្តូរឧបករណ៍ប្រើប្រាស់

បដិសេធឧបករណ៍ប្រើប្រាស់ដែលមានស្រាប់ដោយប្រើសោដូចគ្នា។ ឧទាហរណ៍ ប្រសិនបើអ្នកចង់ឱ្យថ្នាក់ឧបករណ៍ប្រើប្រាស់លើសឆ្លើយតបបន្ថែម អ្នកអាចធ្វើដូចនេះបាន៖

$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 ឬធ្លាប់ប្រើអនុសញ្ញាដាក់ឈ្មោះផ្សេងទៀត? 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 ។