Segment kontrol

Metinli

Gün Hafta Ay Yıl

Kodu göster

<armada:toggle-group name="period" value="week" :options="['day' => 'Gün', 'week' => 'Hafta', 'month' => 'Ay', 'year' => 'Yıl']" />

İkonlu

Liste Izgara Harita

Kodu göster

<armada:toggle-group name="view" value="grid" :options="[
    ['value' => 'list', 'label' => 'Liste', 'icon' => 'list'],
    ['value' => 'grid', 'label' => 'Izgara', 'icon' => 'layout-grid'],
    ['value' => 'map', 'label' => 'Harita', 'icon' => 'map'],
]" />

Tam genişlik

Telefon ekranlarında idealdir.

Aylık Yıllık

Kodu göster

<div class="sc-narrow">
    <armada:toggle-group name="plan" value="monthly" block :options="['monthly' => 'Aylık', 'yearly' => 'Yıllık']" />
</div>

Alpine ile bağlama

x-model veya wire:model ile çalışır.

Hizalama:

Kodu göster

<div x-data="{ align: 'center' }" class="sc-col">
    <armada:toggle-group name="align" x-model="align" value="center" :options="[
        ['value' => 'left', 'label' => '', 'icon' => 'align-left'],
        ['value' => 'center', 'label' => '', 'icon' => 'align-center'],
        ['value' => 'right', 'label' => '', 'icon' => 'align-right'],
    ]" />
    <p class="arm-text arm-text--muted" x-bind:style="`text-align: ${align}`">Hizalama: <strong x-text="align"></strong></p>
</div>

Özellikler

<armada:toggle-group>

Değerler: options like <armada:select>; each may carry 'icon'

Prop	Varsayılan	Not
`name`	`null`
`options`	`[]`
`value`	`null`
`block`	`false`