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

Yapışkan Canlı örnek

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

HTML kodunu göster

<div class="trds-u-yapiskan trds-izgara-ornek">trds-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

trds-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.