Tabs Reactコンポーネント

タブは、異なるコンテンツを簡単に切り替えることができます。Tabs Reactコンポーネントは、Tabsコンポーネントを表しています。

Tabsコンポーネント

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

Tab
Tab

タブのプロパティ

Prop	Type	Description
<Tabs> properties
animated	boolean	アニメーションタブを有効にする
swipeable	boolean	スワイプ可能なタブを有効にする
routable	boolean	ルーティング可能なタブを有効にする
swiperParams	object	Swiper パラメータを持つオブジェクト（`swipeable`が有効な場合に適用されます）。
<Tab> properties
tabActive	boolean	現在のアクティブ／ビジブルなタブを定義する
id	string	タブID

タブのメソッド

<Tab> methods
.show(animate)	Show this tab

タブのイベント

Event	Description
<Tab> events
tabShow	タブが可視/アクティブになるとイベントが発生します。
tabHide	タブが不可視／非アクティブになったときにイベントが発生する

タブの切り替え

タブの制御・切り替えができます。

ボタンやリンクをクリックして、関連するタブのIDを tabLink プロパティーで指定する。
Tabs APIを使う
Routable Tabsを使用しています。

Examples

静止画タブ

import React from 'react';
import { Page, Navbar, Toolbar, Link, Tabs, Tab, Block } from 'framework7-react';

export default () => (
  <Page pageContent={false}>
    <Navbar title="Static Tabs" backLink="Back"></Navbar>
    <Toolbar tabbar bottom>
  <Link tabLink="#tab-1" tabLinkActive>
    Tab 1
  </Link>
  <Link tabLink="#tab-2">Tab 2</Link>
  <Link tabLink="#tab-3">Tab 3</Link>
    </Toolbar>
    <Tabs>
  <Tab id="tab-1" className="page-content" tabActive>
    <Block>
      <p>Tab 1 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
  <Tab id="tab-2" className="page-content">
    <Block>
      <p>Tab 2 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
  <Tab id="tab-3" className="page-content">
    <Block>
      <p>Tab 3 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
    </Tabs>
  </Page>
);

アニメーションタブ

import React from 'react';
import { Page, Navbar, Toolbar, Link, Tabs, Tab, Block } from 'framework7-react';

export default () => (
  <Page pageContent={false}>
    <Navbar title="Animated Tabs" backLink="Back"></Navbar>
    <Toolbar tabbar bottom>
  <Link tabLink="#tab-1" tabLinkActive>
    Tab 1
  </Link>
  <Link tabLink="#tab-2">Tab 2</Link>
  <Link tabLink="#tab-3">Tab 3</Link>
    </Toolbar>
    <Tabs animated>
  <Tab id="tab-1" className="page-content" tabActive>
    <Block>
      <p>Tab 1 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
  <Tab id="tab-2" className="page-content">
    <Block>
      <p>Tab 2 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
  <Tab id="tab-3" className="page-content">
    <Block>
      <p>Tab 3 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
    </Tabs>
  </Page>
);

スワイプ可能なタブ

import React from 'react';
import { Page, Navbar, Toolbar, Link, Tabs, Tab, Block } from 'framework7-react';

export default () => (
  <Page pageContent={false}>
    <Navbar title="Swipeable Tabs" backLink="Back"></Navbar>
    <Toolbar tabbar bottom>
  <Link tabLink="#tab-1" tabLinkActive>
    Tab 1
  </Link>
  <Link tabLink="#tab-2">Tab 2</Link>
  <Link tabLink="#tab-3">Tab 3</Link>
    </Toolbar>
    <Tabs swipeable>
  <Tab id="tab-1" className="page-content" tabActive>
    <Block>
      <p>Tab 1 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
  <Tab id="tab-2" className="page-content">
    <Block>
      <p>Tab 2 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
  <Tab id="tab-3" className="page-content">
    <Block>
      <p>Tab 3 content</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
        facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
        suscipit temporibus sequi iure ad laboriosam accusamus?
      </p>
      <p>
        Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
        blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
        sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
        deleniti.
      </p>
      <p>
        Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
        est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
        delectus a maiores nihil dolores? Natus, perferendis.
      </p>
      <p>
        Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
        perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
        ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
      </p>
      <p>
        Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
        ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
        explicabo, unde aliquid impedit! Adipisci!
      </p>
      <p>
        Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
        fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
        accusantium, officiis veniam nostrum cum cumque impedit.
      </p>
      <p>
        Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
        praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
        provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
      </p>
    </Block>
  </Tab>
    </Tabs>
  </Page>
);