Avatar · Armada

Baş harf, görsel ve ikon

İsimden sabit bir renk seçilir.

Kodu göster

<div class="sc-row">
    <armada:avatar name="Amiral Atik" />
    <armada:avatar name="Elif Kaya" />
    <armada:avatar name="Mert Demir" />
    <armada:avatar src="/img/forest.svg" name="Orman" />
    <armada:avatar />
    <armada:avatar icon="building-2" />
</div>

Boyutlar ve kare

Kodu göster

<div class="sc-row">
    @foreach (['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as $s)
        <armada:avatar name="Zeynep Ak" :size="$s" />
    @endforeach
    <armada:avatar name="Acme Şirketi" square size="lg" />
</div>

Durum, halka ve rozet

Kodu göster

<div class="sc-row" style="gap:16px">
    <armada:avatar name="Elif Kaya" status="online" size="lg" />
    <armada:avatar name="Mert Demir" status="busy" size="lg" />
    <armada:avatar name="Can Yılmaz" status="away" size="lg" />
    <armada:avatar name="Zeynep Ak" status="offline" size="lg" />
    <armada:avatar name="Amiral Atik" ring size="lg" />
    <armada:avatar name="Selin Er" badge="3" size="lg" />
</div>

Grup

max ve total ile "+N".

Kodu göster

<div class="sc-col">
    <armada:avatar.group :max="4" :total="12">
        <armada:avatar name="Elif Kaya" /><armada:avatar name="Mert Demir" /><armada:avatar name="Zeynep Ak" /><armada:avatar name="Can Yılmaz" />
    </armada:avatar.group>
    <armada:avatar.group size="sm" :max="3" :total="5">
        <armada:avatar name="A B" size="sm" /><armada:avatar name="C D" size="sm" /><armada:avatar name="E F" size="sm" />
    </armada:avatar.group>
</div>

Özellikler

<armada:avatar>

Prop	Varsayılan	Not
`src`	`null`
`name`	`null`	initials + a stable colour from the name
`icon`	`null`
`size`	`'md'`	xs \| sm \| md \| lg \| xl \| 2xl
`square`	`false`
`status`	`null`	online \| busy \| away \| offline
`ring`	`false`
`badge`	`null`

<armada:avatar.group>

Prop	Varsayılan
`max`	`null`
`total`	`null`
`size`	`'md'`