Inline

Ne zaman kullanılır

Inline, çocukları yatay bir akışta, aralarında token’lı bir boşlukla dizmek içindir: buton sıraları, etiket grupları, üst bilgi satırları. Satır dolunca çocuklar alt satıra sarılır.

Ne zaman kullanılmaz

• Dikey dizmek için: Üst üste öğeler için Stack kullanın.
• Sütunlar için: Hizalı sütunlar ve satırlar için Grid kullanın. Sarılmış Inline sütunları hizalamaz.
• Görsel sırayı değiştirmek için: Inline ters yön sunmaz. Okuma sırasını DOM sırası belirler.
• Kutu görünümü için: Dolgu, yüzey ya da kenarlık gerekiyorsa Box kullanın.

Anatomi

Inline iki parçadan oluşur:

1. Kapsayıcı: yatay flex kapsayıcı (flex-row). gap, align, justify ve wrap bu öğeye uygulanır.
2. Çocuklar: children, DOM sırasıyla soldan sağa. Sarma açıkken satır dolunca alt satıra iner; satırlar arası boşluk gap’tir.

Davranış

• Inline durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• Varsayılanlar: gap sm, align center, justify start, wrap true.
• Sarma açıkken aynı gap hem yatay hem satırlar arası boşluk olarak kullanılır.
• Görsel sıra her zaman DOM sırasıdır; ters yön ya da order ayarı yoktur.

Yönergeler

Buton sırasında sarmayı açık bırakın

Dar ekranda tek satıra sığmayan butonlar alt satıra inmeli, taşmamalı.

Birincil butonİkincil buton

YapınSarma açık: butonlar sığmazsa alt satıra iner.

Birincil butonİkincil buton

YapmayınSarma kapalı: dar ekranda butonlar taşar.

Çocuklar arasında boşluk bırakın

Boşluğu Inline’a bırakın; tek yerden değişir. Boşluk hiç yoksa öğeler birbirine yapışır.

Birinci öğeİkinci öğe

YapınBoşluk `md`: öğeler ayrı okunuyor.

Birinci öğeİkinci öğe

YapmayınBoşluk `none`: öğeler birbirine yapışıyor.

İçerik

• Inline kendi metnini taşımaz.
• render={<ul />} verdiğinizde her çocuğu <li> olarak yazın.
• Örnek metinleri nötr tutun: “Birinci öğe”, “İkincil buton”.

İlgili bileşenler

• Stack: Öğeleri dikey dizmek için.
• Grid: Hizalı sütunlar için.
• Box: Dolgu, yüzey ve kenarlık için.
• Button: Inline içinde en sık görülen çocuk.