Eylem · Share

Paylaş

Sayfayı sosyal medyada veya e-posta ile paylaşan bağlantılar. Haber ve duyuru sayfasının sonunda durur.

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

Örnekler

Temel Canlı örnek

HTML kodunu göster

<div class="kiris-paylas">
  <p class="kiris-paylas__baslik">Paylaş</p>
  <ul class="kiris-paylas__liste"><li><a href="#" aria-label="X’te paylaş"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-twitter"/></svg></a></li><li><a href="#" aria-label="Facebook’ta paylaş"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-facebook"/></svg></a></li><li><a href="#" aria-label="E-posta ile gönder"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-mail"/></svg></a></li><li><a href="#" aria-label="Yazdır"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-print"/></svg></a></li></ul>
</div>

Ne zaman kullanılır

Haber, duyuru ve kılavuz sayfalarında kullanın.
Form adımlarında ve kişisel sayfalarda kullanmayın.

Erişilebilirlik

Her bağlantı aria-label ile platform adını söyler. Simge süstür.
Bağlantılar yeni sekmede açılıyorsa görsel gizli metin bunu söyler.

Karşılanan WCAG 2.2 ölçütleri 2.4.4 3.2.5

Kaynak

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

Bu bileşenin kodu depoda:

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