Switch · Armada

Temel

Wi-Fi Bluetooth Devre dışı

Kodu göster

<div class="sc-col">
    <armada:switch name="wifi" label="Wi-Fi" checked />
    <armada:switch name="bt" label="Bluetooth" />
    <armada:switch label="Devre dışı" disabled />
</div>

Ayar listesi

Etiket solda, switch sağda (align="end").

E-posta bildirimleri Önemli güncellemeler

Push bildirimleri Telefonuna anlık bildirim

Haftalık rapor Pazartesi sabahları

Kodu göster

<armada:card flush style="max-width:520px">
    <armada:list variant="divided">
        <div class="arm-list__item"><armada:switch align="end" label="E-posta bildirimleri" description="Önemli güncellemeler" checked style="width:100%" /></div>
        <div class="arm-list__item"><armada:switch align="end" label="Push bildirimleri" description="Telefonuna anlık bildirim" style="width:100%" /></div>
        <div class="arm-list__item"><armada:switch align="end" label="Haftalık rapor" description="Pazartesi sabahları" checked style="width:100%" /></div>
    </armada:list>
</armada:card>

Ton ve boyut

Success Danger Büyük

Kodu göster

<div class="sc-row" style="gap:20px">
    <armada:switch tone="success" checked label="Success" />
    <armada:switch tone="danger" checked label="Danger" />
    <armada:switch size="lg" checked label="Büyük" />
</div>

Özellikler

<armada:switch>

Değerler: align: start | end (label left, switch right)

Prop	Varsayılan	Not
`label`	`null`
`description`	`null`
`name`	`null`
`checked`	`false`
`align`	`'start'`
`tone`	`null`
`size`	`'md'`