Yerleşim · Utility classes

Yardımcı sınıflar

Boşluk, hizalama ve görünürlük için tek işli sınıflar. Bileşen olmayan yerde kullanılır.

CSS: kararlı
JavaScript: gerekmiyor
React: gerekmiyor
Vue: gerekmiyor

Örnekler

Boşluk ve hizalama Canlı örnek

Bu paragrafın altında boşluk yok.

Bu paragraf 6 birim üst boşluk taşır ve sağa yaslıdır.

Bu paragraf telefonda görünmez.

HTML kodunu göster

<p class="kiris-govde kiris-u-alt-0">Bu paragrafın altında boşluk yok.</p>
<p class="kiris-govde kiris-u-ust-6 kiris-u-metin-sag">Bu paragraf 6 birim üst boşluk taşır ve sağa yaslıdır.</p>
<p class="kiris-govde kiris-u-gizle-telefon">Bu paragraf telefonda görünmez.</p>

Yapışkan Canlı örnek

kiris-u-yapiskan · kaydırırken üstte kalır

HTML kodunu göster

<div class="kiris-u-yapiskan kiris-izgara-ornek">kiris-u-yapiskan · kaydırırken üstte kalır</div>

Ne zaman kullanılır

Bir bileşenin dış boşluğunu bir kez değiştirmek için kullanın.
Yeni bir bileşen kurmak için kullanmayın. Beş yardımcı sınıf bir araya geliyorsa bir bileşen eksiktir.

Erişilebilirlik

kiris-u-gizle-telefon yalnız görsel olarak gizler. İçerik ekran okuyucuda kalır.
Tam gizlemek için hidden özniteliği kullanılır.

Karşılanan WCAG 2.2 ölçütleri 1.3.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, DE.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-utilities ile başlayan sınıflar