Yardımcı Program API'sı

Yardımcı program API'si, yardımcı program sınıfları oluşturmak için Sass tabanlı bir araçtır.

Bu sayfada

Önyükleme yardımcı programları, yardımcı program API'miz ile oluşturulur ve Sass aracılığıyla varsayılan yardımcı program sınıflarımızı değiştirmek veya genişletmek için kullanılabilir. Yardımcı program API'miz, çeşitli seçeneklere sahip sınıf aileleri oluşturmak için bir dizi Sass haritasına ve işlevine dayanmaktadır. Sass haritalarına aşina değilseniz, başlamak için resmi Sass belgelerini okuyun .

Harita tüm yardımcı programlarımızı içerir ve daha sonra varsa $utilitiesözel haritanızla birleştirilir . $utilitiesYardımcı program haritası, aşağıdaki seçenekleri kabul eden yardımcı program gruplarının anahtarlı bir listesini içerir:

Seçenek	Tip	Tanım
`property`	Gerekli	Özelliğin adı, bu bir dize veya bir dizi dize olabilir (örneğin, yatay dolgular veya kenar boşlukları).
`values`	Gerekli	Değerler listesi veya sınıf adının değerle aynı olmasını istemiyorsanız bir harita. Harita `null`anahtarı olarak kullanılırsa derlenmez.
`class`	İsteğe bağlı	Özellik ile aynı olmasını istemiyorsanız, sınıf adı için değişken. Anahtarı sağlamazsanız `class`ve `property`anahtar bir dizi diziyse, dizinin ilk öğesi sınıf adı olacaktır `property`.
`state`	İsteğe bağlı	Yardımcı program için oluşturulacak `:hover`veya oluşturulacak sözde sınıf değişkenlerinin listesi . `:focus`Varsayılan değer yok.
`responsive`	İsteğe bağlı	Boole, duyarlı sınıfların oluşturulması gerekip gerekmediğini gösterir. `false`varsayılan olarak.
`rfs`	İsteğe bağlı	Akışkan yeniden ölçeklendirmeyi etkinleştirmek için Boole. Bunun nasıl çalıştığını öğrenmek için RFS sayfasına bakın. `false`varsayılan olarak.
`print`	İsteğe bağlı	Boolean, yazdırma sınıflarının oluşturulması gerekip gerekmediğini gösterir. `false`varsayılan olarak.
`rtl`	İsteğe bağlı	Boole, yardımcı programın RTL'de tutulması gerekip gerekmediğini gösterir. `true`varsayılan olarak.

API açıkladı

Tüm yardımcı değişkenler, stil $utilitiessayfamızdaki değişkene eklenir . _utilities.scssHer bir yardımcı program grubu şuna benzer:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Hangisi aşağıdaki çıktıyı verir:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Özel sınıf öneki

classDerlenmiş CSS'de kullanılan sınıf önekini değiştirme seçeneğini kullanın :

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Çıktı:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

Devletler

stateSözde sınıf varyasyonları oluşturma seçeneğini kullanın . Örnek sözde sınıflar :hoverve :focus. Bir durum listesi sağlandığında, sözde sınıf için sınıf adları oluşturulur. Örneğin, fareyle üzerine gelindiğinde opaklığı değiştirmek için ekleyin ve derlenmiş CSS'nizi state: hoveralırsınız ..opacity-hover:hover

Birden fazla sözde sınıfa mı ihtiyacınız var? Boşlukla ayrılmış bir durum listesi kullanın: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Çıktı:

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

Duyarlı yardımcı programlar

Tüm kesme noktalarında duyarlı yardımcı programlar (ör. ) responsiveoluşturmak için boole ekleyin ..opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Çıktı:

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

Yardımcı programları değiştirme

Aynı anahtarı kullanarak mevcut yardımcı programları geçersiz kılın. Örneğin, ek duyarlı taşma yardımcı program sınıfları istiyorsanız, bunu yapabilirsiniz:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Yazdırma yardımcı programları

printSeçeneğin etkinleştirilmesi, yazdırma için yalnızca ortam sorgusu içinde uygulanan yardımcı program sınıfları da oluşturur.@media print { ... }

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Çıktı:

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

Önem

API tarafından oluşturulan tüm yardımcı programlar, !importantbileşenleri ve değiştirici sınıfları amaçlandığı gibi geçersiz kılmalarını sağlar. Bu ayarı genel olarak $enable-important-utilitiesdeğişkenle (varsayılan olarak true) değiştirebilirsiniz.

API'yi kullanma

Artık yardımcı program API'sinin nasıl çalıştığını öğrendiğinize göre, kendi özel sınıflarınızı nasıl ekleyeceğinizi ve varsayılan yardımcı programlarımızı nasıl değiştireceğinizi öğrenin.

Yardımcı programlar ekle

Yeni yardımcı programlar varsayılan $utilitiesharitaya bir map-merge. _utilities.scssÖnce gerekli Sass dosyalarımızın içe aktarıldığından emin olun , ardından map-mergeek yardımcı programlarınızı eklemek için öğesini kullanın. Örneğin, cursorüç değerle duyarlı bir yardımcı programın nasıl ekleneceği aşağıda açıklanmıştır.

@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,
    )
  )
);

Yardımcı programları değiştir

$utilitiesVarsayılan haritadaki mevcut yardımcı programları map-getve map-mergeişlevleriyle değiştirin. Aşağıdaki örnekte, yardımcı programlara ek bir değer ekliyoruz width. Baş harfiyle başlayın map-mergeve ardından hangi yardımcı programı değiştirmek istediğinizi belirtin. Oradan , yardımcı programın seçeneklerine ve değerlerine erişmek ve bunları değiştirmek için iç içe "width"haritayı getirin.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%),
        ),
      ),
    ),
  )
);

Duyarlılığı etkinleştir

Şu anda varsayılan olarak yanıt vermeyen mevcut bir yardımcı program kümesi için duyarlı sınıfları etkinleştirebilirsiniz. Örneğin, bordersınıfları duyarlı hale getirmek için:

@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 ),
    ),
  )
);

Bu artık her kesme noktası için .borderve için duyarlı varyasyonlar üretecektir. .border-0Oluşturulan CSS'niz şöyle görünecek:

.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 { ... }
}

Yardımcı programları yeniden adlandır

Eksik v4 yardımcı programları mı yoksa başka bir adlandırma kuralına mı alışkınsınız? Yardımcı programlar API'si, belirli bir yardımcı programın sonucunu geçersiz kılmak için kullanılabilir; classörneğin, .ms-*yardımcı programları oldish olarak yeniden adlandırmak için .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 ),
    ),
  )
);

Yardımcı programları kaldır

Grup anahtarını olarak ayarlayarak varsayılan yardımcı programlardan herhangi birini kaldırın null. Örneğin, tüm widthyardımcı programlarımızı kaldırmak için bir oluşturun $utilities map-mergeve içine ekleyin "width": null.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

RTL'deki yardımcı programı kaldır

Arapça satır sonları gibi bazı uç durumlar, RTL stilini zorlaştırır . rtlBöylece, seçenek şu şekilde ayarlanarak yardımcı programlar RTL çıkışından çıkarılabilir false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Çıktı:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Bu , RTLCSS removekontrol yönergesi sayesinde RTL'de herhangi bir çıktı vermez .