サブナビバー React コンポーネント

サブナビバーは、タブリンクやサーチバーなど、ナビゲーションバーに追加の要素を配置する必要がある場合に便利です。また、ナビゲーションバーが非表示の場合でも表示されたままになります。

サブナビバー Reactコンポーネントは、サブナビバーコンポーネントを表します。

サブナビバーコンポーネント

以下のコンポーネントが含まれています

サブナビバー

サブナビバーのプロパティ

プロパティ	タイプ	デフォルト	説明
<Subnavbar> プロパティ
sliding	boolean		「スライド」効果を有効にします
title	string		サブナビバーのタイトル
inner	boolean	true	有効にすると、追加の "subnavbar-inner" ラッパー要素が追加されます

例

subnavbar.jsx

import React from 'react';
import {
  Navbar,
  Page,
  Subnavbar,
  Segmented,
  Button,
  Block,
  List,
  ListItem,
} from 'framework7-react';

export default () => (
  <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.jsx

import React from 'react';
import { Navbar, Page, Block, Subnavbar } from 'framework7-react';

export default () => (
  <Page>
    <Navbar>
      <Subnavbar title="Page Title"></Subnavbar>
    </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>
);

このドキュメントを改善する

このページについて

サブナビバーコンポーネント
サブナビバーのプロパティ
例