Ağaç görünümü

51 · Gelişmiş UI

Ağaç görünümü

Kategori › alt kategori › ürün grubu gibi iç içe verileri açılıp kapanan dallar hâlinde gösterir. Bütün yapı tek bir items dizisiyle verilir.

PRO acun:tree

Temel kullanım

items içindeki her öğenin bir label'ı vardır; alt öğeler children dizisine yazılır ve derinlik sınırı yoktur. Dallar kapalı başlar ve adın solundaki ok düğmesiyle açılır. Yapı role="tree" ile işaretlenir; ok düğmesi ekran okuyuculara "Genişlet" ya da "Daralt" olarak okunur.

CANLI ÖRNEK

<acun:tree :items="[
    ['label' => 'Elektronik', 'children' => [
        ['label' => 'Bilgisayar', 'children' => [['label' => 'Dizüstü'], ['label' => 'Masaüstü']]],
        ['label' => 'Telefon', 'children' => [['label' => 'Akıllı telefon']]],
    ]],
    ['label' => 'Giyim', 'children' => [['label' => 'Kadın']]],
]" />

Prop	Değerler
`items`	['label' => …, 'children' => […]] dizisi

Açık başlatma

expanded bütün dalları açık başlatır. Tek bir dalı yönetmek için öğeye open verin; öğedeki open her zaman expanded'dan önce gelir, bu yüzden 'open' => false ile açık bir ağaçta bazı dalları kapalı tutabilirsiniz.

CANLI ÖRNEK

<acun:tree expanded :items="[
    ['label' => 'Elektronik', 'children' => [
        ['label' => 'Bilgisayar', 'children' => [['label' => 'Dizüstü bilgisayar'], ['label' => 'Masaüstü bilgisayar']]],
        ['label' => 'Aksesuar', 'open' => false, 'children' => [['label' => 'Kulaklık']]],
    ]],
]" />

Prop	Değerler
`expanded`	true \| false (varsayılan false)
`open`	Öğe bazında true \| false

Bağlantı ve sayaç

href verilen öğenin adı bağlantıya dönüşür. badge satırın sağında küçük bir sayaç gösterir; alt kayıt sayısını belirtmek için kullanın.

CANLI ÖRNEK

<acun:tree :items="[
    ['label' => 'Elektronik', 'open' => true, 'badge' => 5, 'children' => [
        ['label' => 'Bilgisayar', 'href' => '#bilgisayar', 'badge' => 3],
        ['label' => 'Telefon', 'href' => '#telefon', 'badge' => 1],
        ['label' => 'Aksesuar', 'href' => '#aksesuar', 'badge' => 1],
    ]],
]" />

Prop	Değerler
`href`	Bağlantı adresi
`badge`	Sağdaki sayaç (sayı ya da kısa metin)

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`items`	`[]`	Öğe dizisi (aşağıdaki anahtarlarla)
`expanded`	`false`	Bütün dalları açık başlatır
`items[].label`	—	Görünen ad (zorunlu)
`items[].children`	`[]`	Alt öğeler; aynı yapıda
`items[].open`	`expanded`	Bu dalı açık ya da kapalı başlatır
`items[].href`	`null`	Verilirse ad bağlantı olur
`items[].badge`	`null`	Sağdaki sayaç