FAB ve speed dial

Standart ve geniş

Gerçek kullanımda sağ alta sabitlenir, bottom nav varsa onun üstüne çıkar.

Kodu göster

<div class="sc-row" style="gap:20px">
    <armada:fab static icon="plus" label="Yeni" />
    <armada:fab static icon="pencil" label="Yaz" extended />
    <armada:fab static icon="message-circle" label="Destek" tone="success" />
</div>

Speed dial

Tıklayınca alt eylemler açılır (telefon çerçevesi içinde gösterim).

Belge

Görsel

Klasör

Kodu göster

<div style="width:min(320px,100%);height:300px;margin:0 auto;position:relative;border:1px solid var(--arm-border);border-radius:24px;background:var(--arm-bg);overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:20px" x-data x-init="$nextTick(() => $el.querySelector('.arm-fab__button')?.click())">
    <div style="position:absolute;inset:0 0 auto;height:56px;border-bottom:1px solid var(--arm-border-soft);background:var(--arm-surface-1)"></div>
    <armada:fab static icon="plus" label="Oluştur">
        <armada:fab.action icon="file-text" label="Belge" />
        <armada:fab.action icon="image" label="Görsel" />
        <armada:fab.action icon="folder" label="Klasör" />
    </armada:fab>
</div>

Özellikler

<armada:fab>

Değerler: a slot of <armada:fab.action> items makes it a speed dial

Prop	Varsayılan	Not
`icon`	`'plus'`
`label`	`null`
`extended`	`false`
`tone`	`'primary'`
`static`	`false`
`position`	`'right'`
`href`	`null`

<armada:fab.action>

Prop	Varsayılan
`icon`	`zorunlu`
`label`	`zorunlu`
`href`	`null`