Alt gezinme · Armada

Standart

Gerçek sayfada telefonda ekranın altına sabitlenir; burada "static" ile gösteriliyor.

İçerik alanı

Kodu göster

<div class="sc-phone" style="height:auto">
    <div class="sc-phone__body" style="height:160px"><armada:text variant="muted">İçerik alanı</armada:text></div>
    <armada:bottom-nav static>
        <armada:bottom-nav.item href="#" icon="house" current>Ana sayfa</armada:bottom-nav.item>
        <armada:bottom-nav.item href="#" icon="search">Keşfet</armada:bottom-nav.item>
        <armada:bottom-nav.item href="#" icon="heart" badge="2">Favoriler</armada:bottom-nav.item>
        <armada:bottom-nav.item href="#" icon="user">Profil</armada:bottom-nav.item>
    </armada:bottom-nav>
</div>

Ortada FAB

Ana eylem ortada yükseltilmiş buton.

Kodu göster

<div class="sc-phone" style="height:auto">
    <div class="sc-phone__body" style="height:120px"></div>
    <armada:bottom-nav static>
        <armada:bottom-nav.item icon="house" current>Ana sayfa</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="chart-column">İstatistik</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="plus" fab>Yeni kayıt</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="bell" badge="9">Bildirim</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="settings">Ayarlar</armada:bottom-nav.item>
    </armada:bottom-nav>
</div>

Etiket seçenekleri

Yalnız aktif etiket (labels="active") ve sadece ikon (labels="none").

Kodu göster

<div class="sc-col sc-narrow" style="margin:0 auto">
    <armada:bottom-nav static labels="active" style="border:1px solid var(--arm-border);border-radius:16px">
        <armada:bottom-nav.item icon="house" current>Ana sayfa</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="compass">Keşfet</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="message-circle">Mesajlar</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="user">Profil</armada:bottom-nav.item>
    </armada:bottom-nav>
    <armada:bottom-nav static labels="none" style="border:1px solid var(--arm-border);border-radius:16px">
        <armada:bottom-nav.item icon="house">Ana sayfa</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="compass" current>Keşfet</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="message-circle">Mesajlar</armada:bottom-nav.item>
        <armada:bottom-nav.item icon="user">Profil</armada:bottom-nav.item>
    </armada:bottom-nav>
</div>

Yüzen

variant="floating". Gerçek kullanımda hide-on-scroll ile aşağı kaydırınca gizlenir, always ile her ekranda görünür.

Kodu göster

<div class="sc-phone" style="height:auto;position:relative">
    <div class="sc-phone__body" style="height:150px"><armada:image src="/img/ocean.svg" ratio="16/9" /></div>
    <div style="padding:0 12px 12px">
        <armada:bottom-nav variant="floating" static>
            <armada:bottom-nav.item icon="house" current>Ana sayfa</armada:bottom-nav.item>
            <armada:bottom-nav.item icon="map">Harita</armada:bottom-nav.item>
            <armada:bottom-nav.item icon="bookmark">Kayıtlı</armada:bottom-nav.item>
            <armada:bottom-nav.item icon="user">Profil</armada:bottom-nav.item>
        </armada:bottom-nav>
    </div>
</div>

Özellikler

<armada:bottom-nav>

Prop	Varsayılan	Not
`variant`	`'default'`	default \| floating
`labels`	`'always'`	always \| active \| none
`always`	`false`	show on every screen size, not only phones
`static`	`false`	render in the flow (previews, phone mock-ups)
`hide-on-scroll`	`false`

<armada:bottom-nav.item>

Prop	Varsayılan
`href`	`null`
`icon`	`'circle'`
`current`	`null`
`badge`	`null`
`fab`	`false`