贊助商成為贊助商

Subnavbar Svelte 元件

當您需要在 Navbar 中放入任何其他元素時，例如標籤連結或搜尋列，Subnavbar 會很有用。即使 Navbar 隱藏，它仍會保持可見。

Subnavbar Svelte 元件代表 Subnavbar 元件。

包含以下元件

屬性類型預設值說明
<Subnavbar> 屬性
sliding布林值啟用「滑動」效果
title字串Subnvabar 標題
inner布林值true啟用時，將會新增其他「subnavbar-inner」包裝器元素

範例

subnavbar.svelte
<script>
  import {
    Navbar,
    Page,
    Subnavbar,
    Segmented,
    Button,
    Block,
    List,
    ListItem,
  } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Subnavbar">
    <Subnavbar>
      <Segmented strong>
        <Button smallMd active>Link 1</Button>
        <Button smallMd>Link 2</Button>
        <Button smallMd>Link 3</Button>
      </Segmented>
    </Subnavbar>
  </Navbar>
  <Block>
    <p>
      Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links
      or Search Bar. It also remains visible when Navbar hidden.
    </p>
  </Block>
  <List strong outlineIos>
    <ListItem link="/subnavbar-title/" title="Subnavbar Title" />
  </List>
</Page>
subnavbar-title.svelte
<script>
  import { Navbar, Page, Block, Subnavbar } from 'framework7-svelte';
</script>

<Page>
  <Navbar>
    <Subnavbar title="Page Title" />
  </Navbar>
  <Block>
    <p>It also possible to use Subnavbar to display page title and keep navbar only for actions.</p>
  </Block>
  <Block>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet
      voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas
      iure magnam minus voluptatem quaerat!
    </p>
    <p>
      Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint,
      veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum
      ipsa totam perspiciatis cupiditate, amet maiores!
    </p>
    <p>
      Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis
      perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut provident
      animi quae, impedit id!
    </p>
    <p>
      Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi!
      Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio
      laboriosam in culpa veniam alias ad.
    </p>
    <p>
      A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel
      fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum
      culpa. Accusamus aliquid facere tenetur?
    </p>
  </Block>
</Page>
改善此文件
在此頁面