Bileşenler
Dropdown
Cell’leri taşıyan yüzen panel: Selectbox listesi, bir menü ya da herhangi bir içerik.
Tipler
Default hücrelerini her yandan 8px boşlukla sarar. Full Width hücrelerin kenarlara uzanmasına izin verir. Slot ve State herhangi bir içerik taşır (örneğin boş durum).
Istanbul
Ankara
Izmir
Actions
Edit
Share
Delete
Tokenlar
| Part | Token |
|---|---|
| Background | --color-surface-level-1 |
| Padding | --layout-tiny (Full Width: block only) |
| Radius | --radius-layout-base |
| Shadow | --shadow-form-level-1 |
| Gap between cells | --border-width |
| Offset under a Selectbox | --space-form-dropdown-top |
Figma notları
- Hücreler arasında 1px var (ham itemSpacing); kod --border-width kullanır.
- Type=State, henüz yapılmamış State bileşenini (Empty) kullanır; şimdilik kendi içeriğinizi koyun.
- Full Width, Cell Helper setinde artık olmayan bir “Cell Helper/Link” örneğiyle bitiyor.
- Figma’da z-index tokenı yok; Selectbox listesi kutusunun altına onsuz, absolute olarak yerleşir.
Figma’dan koda
| Figma | React |
|---|---|
| 🎛 Type = Default | <Dropdown> |
| 🎛 Type = Full Width | <Dropdown fullWidth> |
| 🎛 Type = Slot / State | <Dropdown>{content}</Dropdown> |