Liste · Armada

Avatarlı, iki satırlı ve link

Link öğelerinde sağda ok çıkar.

Ekip

Elif Kaya Ürün tasarımcısı Mert Demir Backend geliştirici Zeynep Ak Mobil geliştirici Çevrimiçi

Kodu göster

<div style="max-width:520px">
    <armada:list variant="bordered">
        <armada:list.subheader>Ekip</armada:list.subheader>
        <armada:list.item href="#" avatar="Elif Kaya" title="Elif Kaya" subtitle="Ürün tasarımcısı" />
        <armada:list.item href="#" avatar="Mert Demir" title="Mert Demir" subtitle="Backend geliştirici" />
        <armada:list.item href="#" avatar="Zeynep Ak" title="Zeynep Ak" subtitle="Mobil geliştirici">
            <x-slot:trailing><armada:badge tone="success" size="sm">Çevrimiçi</armada:badge></x-slot:trailing>
        </armada:list.item>
    </armada:list>
</div>

İkonlu ayar listesi

Hesap Ad, e-posta, şifre Bildirimler E-posta ve push Güvenlik İki adımlı doğrulama açık Ödeme Visa •• 4242

Kodu göster

<div style="max-width:520px">
    <armada:list variant="bordered">
        <armada:list.item href="#" icon="user" icon-tone="primary" title="Hesap" subtitle="Ad, e-posta, şifre" />
        <armada:list.item href="#" icon="bell" icon-tone="warning" title="Bildirimler" subtitle="E-posta ve push" />
        <armada:list.item href="#" icon="shield-check" icon-tone="success" title="Güvenlik" subtitle="İki adımlı doğrulama açık" />
        <armada:list.item href="#" icon="credit-card" icon-tone="purple" title="Ödeme" trailing="Visa •• 4242" />
    </armada:list>
</div>

Sade liste

Menü veya popover içinde.

Q3 raporu.pdf 2,4 MB

kapak.png 840 KB

bütçe.xlsx 120 KB

Kodu göster

<div style="max-width:320px">
    <armada:list>
        <armada:list.item icon="file-text" title="Q3 raporu.pdf" trailing="2,4 MB" />
        <armada:list.item icon="image" title="kapak.png" trailing="840 KB" active />
        <armada:list.item icon="file-spreadsheet" title="bütçe.xlsx" trailing="120 KB" />
    </armada:list>
</div>

Özellikler

<armada:list>

Değerler: plain | divided | bordered

Prop	Varsayılan	Not
`variant`	`'plain'`

<armada:list.item>

Prop	Varsayılan	Not
`title`	`null`
`subtitle`	`null`
`icon`	`null`
`icon-tone`	`null`
`avatar`	`null`	image URL or a name
`href`	`null`
`leading`	`null`	slot: anything left of the text (overrides avatar/icon)
`trailing`	`null`	slot or text
`chevron`	`null`	default: on for links
`active`	`false`