子导航栏 Svelte 组件

当您需要将任何其他元素放入导航栏中时，子导航栏非常有用，例如选项卡链接或搜索栏。它在导航栏隐藏时也会保持可见。

子导航栏 Svelte 组件代表子导航栏组件。

子导航栏组件

以下组件包括在内

子导航栏

子导航栏属性

属性	类型	默认值	描述
<Subnavbar> 属性
滑动	布尔值		启用“滑动”效果
标题	字符串		子导航栏标题
内部	布尔值	真	启用时，将添加额外的“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>

改进此文档

在本页

子导航栏组件
子导航栏属性
示例