Container, stack, grid

Otomatik ızgara

.arm-grid, --min genişliğine göre sütun sayısını kendisi ayarlar.

Kodu göster

<div class="arm-grid" style="--min: 140px">
    @foreach (range(1, 8) as $i)<div class="sc-box">{{ $i }}</div>@endforeach
</div>

Stack

Dikey veya yatay yığın; --gap ile boşluk.

Dikey 1

Dikey 2

Yatay 1

Yatay 2

Sağda

Kodu göster

<div class="sc-col">
    <div class="arm-stack" style="--gap: 8px"><div class="sc-box">Dikey 1</div><div class="sc-box">Dikey 2</div></div>
    <div class="arm-stack arm-stack--row"><div class="sc-box">Yatay 1</div><div class="sc-box">Yatay 2</div><armada:spacer /><div class="sc-box">Sağda</div></div>
</div>

Container

Sayfa içeriğini ortalar; sm, md, prose ve full genişlikler.

container sm (720px)

container md (960px)

Kodu göster

<div class="sc-col">
    <armada:container size="sm"><div class="sc-box">container sm (720px)</div></armada:container>
    <armada:container size="md"><div class="sc-box">container md (960px)</div></armada:container>
</div>

Ayırıcı

Yatay, dikey ve metinli.

veya

Sol

Orta

Sağ

Kodu göster

<div class="sc-col">
    <armada:separator />
    <armada:separator text="veya" />
    <div class="sc-row" style="height:24px"><span>Sol</span><armada:separator vertical /><span>Orta</span><armada:separator vertical /><span>Sağ</span></div>
</div>

Form ızgarası

İki sütunlu form; telefonda tek sütun.

Soyad

Adres

Kodu göster

<div class="arm-form-grid">
    <armada:input label="Ad" />
    <armada:input label="Soyad" />
    <armada:input label="Adres" class="arm-span-full" />
</div>

Özellikler

<armada:container>

Değerler: sm | md | prose | full

Prop	Varsayılan	Not
`size`	`null`

<armada:separator>

Prop	Varsayılan
`vertical`	`false`
`text`	`null`