Display

Kawal jenis paparan elemen

Sintaks

layout="[display-value]"

Nilai

Nilai	CSS Output	Huraian
flex	display: flex	Bekas flexbox
inline-flex	display: inline-flex	Bekas flexbox sebaris
grid	display: grid	Bekas grid
inline-grid	display: inline-grid	Bekas grid sebaris
block	display: block	Elemen blok
inline	display: inline	Elemen sebaris
inline-block	display: inline-block	Elemen blok sebaris
table	display: table	Elemen jadual
table-row	display: table-row	Elemen baris jadual
table-cell	display: table-cell	Elemen sel jadual
list-item	display: list-item	Elemen item senarai
contents	display: contents	Paparkan kandungan sahaja (tiada kotak)
hidden	display: none	Elemen tersembunyi

Contoh

<div layout="flex">Flexbox container</div>
<div layout="grid">Grid container</div>
<div layout="table">Table container</div>
<div layout="hidden">Hidden element</div>

Pratonton

Bekas Flexbox

layout="flex" - Item disusun secara mendatar

Item 1Item 2Item 3

Lihat Kod

<div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
</div>

Bekas Grid

layout="grid" - Item dalam susun atur grid

123456

Lihat Kod

<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
</div>