Uygulama kabuğu

Sidebar + header

Masaüstünde sidebar, tablette ikon menü (rail), telefonda çekmece. Sol üstteki butonla daralt.

Panel

Gelir

₺84.200

Sipariş

1.284

Kodu göster

<div class="sc-frame">
    <armada:app>
        <x-slot:sidebar>
            <armada:sidebar>
                <x-slot:brand>
                    <armada:brand name="Acme" icon="box" />
                </x-slot:brand>
                <armada:navlist>
                    <armada:navlist.group heading="Genel">
                        <armada:navlist.item icon="house" current>Panel</armada:navlist.item>
                        <armada:navlist.item icon="inbox" badge="12">Gelen kutusu</armada:navlist.item>
                        <armada:navlist.item icon="users">Müşteriler</armada:navlist.item>
                        <armada:navlist.item icon="chart-line">Raporlar</armada:navlist.item>
                    </armada:navlist.group>
                    <armada:navlist.group heading="Hesap">
                        <armada:navlist.item icon="settings">Ayarlar</armada:navlist.item>
                    </armada:navlist.group>
                </armada:navlist>
                <x-slot:footer>
                    <armada:profile name="Amiral Atik" email="amiral@armsys.tech" />
                </x-slot:footer>
            </armada:sidebar>
        </x-slot:sidebar>

        <x-slot:header>
            <armada:header title="Panel">
                <armada:sidebar.toggle />
                <x-slot:actions>
                    <armada:button variant="ghost" icon="bell" aria-label="Bildirimler" />
                    <armada:theme-switcher variant="toggle" />
                </x-slot:actions>
            </armada:header>
        </x-slot:header>

        <armada:page-header title="Hoş geldin, Amiral" description="Bugünkü özet" />
        <div class="arm-stat-grid">
            <armada:stat label="Gelir" value="₺84.200" :trend="12" />
            <armada:stat label="Sipariş" value="1.284" :trend="-3" />
        </div>
    </armada:app>
</div>

Telefon görünümü

Telefonda sidebar gizlenir; bottom navigation ve hamburger menü devreye girer.

Gelen kutusu

Elif Kaya Toplantı notları ektedir 09:41

Mert Demir Fatura #1042 ödendi Dün

Zeynep Ak Yeni tasarım taslakları Pzt

Kodu göster

<div class="sc-phone">
    <armada:header title="Gelen kutusu" :sticky="false">
        <armada:button variant="ghost" icon="menu" aria-label="Menü" />
        <x-slot:actions><armada:avatar name="Amiral Atik" size="sm" /></x-slot:actions>
    </armada:header>
    <div class="sc-phone__body">
        <armada:list>
            <armada:list.item avatar="Elif Kaya" title="Elif Kaya" subtitle="Toplantı notları ektedir" trailing="09:41" />
            <armada:list.item avatar="Mert Demir" title="Mert Demir" subtitle="Fatura #1042 ödendi" trailing="Dün" />
            <armada:list.item avatar="Zeynep Ak" title="Zeynep Ak" subtitle="Yeni tasarım taslakları" trailing="Pzt" />
        </armada:list>
    </div>
    <armada:bottom-nav static>
        <armada:bottom-nav.item icon="inbox" current badge="3">Gelen</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="search">Ara</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="pencil" fab>Yaz</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="calendar">Takvim</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="settings">Ayarlar</armada:bottom-nav.item>
    </armada:bottom-nav>
</div>

Header varyantları

Başlık, eylemler, arama ve şeffaf header.

Armada

Siparişler

Kodu göster

<div class="sc-col">
    <armada:header :sticky="false" style="border:1px solid var(--arm-border);border-radius:12px">
        <armada:brand name="Armada" icon="anchor" />
        <armada:navbar class="arm-hide-mobile" style="margin-inline-start:16px">
            <armada:navbar.item href="#" current>Ürün</armada:navbar.item>
            <armada:navbar.item href="#">Fiyatlar</armada:navbar.item>
            <armada:navbar.item href="#">Dokümanlar</armada:navbar.item>
        </armada:navbar>
        <x-slot:actions>
            <armada:button variant="ghost">Giriş</armada:button>
            <armada:button variant="solid" tone="primary">Başla</armada:button>
        </x-slot:actions>
    </armada:header>
    <armada:header :sticky="false" title="Siparişler" style="border:1px solid var(--arm-border);border-radius:12px">
        <armada:button variant="ghost" icon="arrow-left" aria-label="Geri" />
        <x-slot:actions>
            <armada:input icon="search" placeholder="Ara…" size="sm" class="arm-hide-mobile" style="width:200px" />
            <armada:button variant="solid" tone="primary" icon="plus" size="sm">Yeni</armada:button>
        </x-slot:actions>
    </armada:header>
</div>

Brand ve profil

Logo, uygulama adı ve kullanıcı butonu.

Armada StreamEmber B Bulut

Kodu göster

<div class="sc-row" style="gap:24px">
    <armada:brand name="Armada" icon="anchor" />
    <armada:brand name="StreamEmber" icon="flame" />
    <armada:brand name="Bulut" />
    <div style="width:240px"><armada:profile name="Amiral Atik" email="amiral@armsys.tech" /></div>
    <armada:profile name="Amiral Atik" compact />
</div>

Özellikler

<armada:app>

Değerler: content: default | narrow | flush

Prop	Varsayılan	Not
`sidebar`	`null`
`header`	`null`
`bottom-nav`	`null`
`content`	`'default'`

<armada:sidebar>

Prop	Varsayılan
`brand`	`null`
`footer`	`null`
`alt`	`false`

<armada:header>

Prop	Varsayılan
`title`	`null`
`actions`	`null`
`sticky`	`true`
`transparent`	`false`

<armada:brand>

Prop	Varsayılan
`name`	`null`
`logo`	`null`
`icon`	`null`
`href`	`null`

<armada:profile>

Prop	Varsayılan
`name`	`zorunlu`
`email`	`null`
`avatar`	`null`
`compact`	`false`
`chevron`	`true`