Chip · Armada

Statik ve tonlu

Laravel PHP Elif Kaya Onaylandı Beklemede Reddedildi Küçük

Kodu göster

<div class="arm-chip-group">
    <armada:chip>Laravel</armada:chip>
    <armada:chip icon="code">PHP</armada:chip>
    <armada:chip avatar="Elif Kaya">Elif Kaya</armada:chip>
    <armada:chip tone="success" icon="circle-check">Onaylandı</armada:chip>
    <armada:chip tone="warning">Beklemede</armada:chip>
    <armada:chip tone="danger">Reddedildi</armada:chip>
    <armada:chip size="sm">Küçük</armada:chip>
</div>

Kaldırılabilir

× butonu "remove" olayı yayar.

Kodu göster

<div class="arm-chip-group" x-data="{ tags: ['tasarım', 'frontend', 'laravel', 'mobil'] }">
    <template x-for="t in tags" :key="t">
        <span class="arm-chip"><span x-text="t"></span>
            <button type="button" class="arm-chip__remove" x-on:click="tags = tags.filter(x => x !== t)" aria-label="Kaldır">{!! \Armada\Armada::icon('x') !!}</button>
        </span>
    </template>
    <armada:button size="sm" variant="ghost" icon="rotate-ccw" x-on:click="tags = ['tasarım', 'frontend', 'laravel', 'mobil']">Sıfırla</armada:button>
</div>

Filtre chip'leri

value verilince checkbox olur; wire:model ile dizi olarak bağlanır.

Yeni İndirimli Ücretsiz kargo Stokta

Kodu göster

<div class="arm-chip-group">
    <armada:chip name="f[]" value="new" icon="sparkles">Yeni</armada:chip>
    <armada:chip name="f[]" value="sale">İndirimli</armada:chip>
    <armada:chip name="f[]" value="free">Ücretsiz kargo</armada:chip>
    <armada:chip name="f[]" value="stock">Stokta</armada:chip>
</div>

Kaydırılabilir grup

Telefonda yatay kaydırılır.

Kodu göster

<armada:chip-group scroll>
    @foreach (['Tümü', 'Elektronik', 'Giyim', 'Ev & Yaşam', 'Kozmetik', 'Spor', 'Kitap', 'Oyuncak', 'Bahçe', 'Otomotiv'] as $i => $c)
        <armada:chip :selected="$i === 0">{{ $c }}</armada:chip>
    @endforeach
</armada:chip-group>

Özellikler

<armada:chip>

Prop	Varsayılan	Not
`icon`	`null`
`avatar`	`null`	image URL or a name for initials
`tone`	`null`
`size`	`'md'`
`removable`	`false`	renders a × button; listen with x-on:remove or wire:click on it via the "remove" attribute
`selected`	`null`	toggle chip (button with aria-pressed)
`href`	`null`
`value`	`null`	filter chip: renders a checkbox input (works with wire:model)
`name`	`null`

<armada:chip-group>

Prop	Varsayılan
`scroll`	`false`