Subnavbar Svelte组件

当你需要将任何附加元素放入Navbar时，Subnavbar很有用，比如Tab链接或搜索栏。它还在Navbar隐藏时保持可见。

Subnavbar Svelte组件表示子导航栏组件。

Subnavbar组件

包含以下组件：

Subnavbar

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>

改进此文档

在本页上

Subnavbar组件
Subnavbar属性
示例