- 开始使用
- React 组件
Tabs React 组件
Tabs 允许在多种内容之间简单切换。Tabs React 组件代表标签页组件。
Tabs 组件
包含以下组件：
TabsTab
Tabs 属性
| 属性 | 类型 | 描述 |
|---|---|---|
| <Tabs> 属性 | ||
| animated | 布尔值 | 启用带动画的标签页 |
| swipeable | 布尔值 | 启用可滑动的标签页 |
| routable | 布尔值 | 启用可路由的标签页 |
| swiperParams | 对象 | 带有Swiper 参数（如果swipeable启用） |
| <Tab> 属性 | ||
| tabActive | 布尔值 | 定义当前激活/可见的标签页 |
| id | 字符串 | 标签页 ID |
Tabs 方法
| <Tab> 方法 | |
|---|---|
| .show(animate) | 显示此标签页 |
Tabs 事件
| 事件 | 描述 |
|---|---|
| <Tab> 事件 | |
| tabShow | 当选项卡变得可见/活动时，将触发事件 |
| tabHide | 当标签页变为不可见/非活动时触发事件 |
切换标签页
您可以控制/切换标签页：
示例
静态标签页
tabs-static.jsx
import React from 'react';
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-react';
export default () => (
<Page pageContent={false}>
<Navbar title="Static Tabs"></Navbar>
<Toolbar bottom tabbar>
<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>
);
带动画的标签页
tabs-animated.jsx
import React from 'react';
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-react';
export default () => (
<Page pageContent={false}>
<Navbar title="Animated Tabs"></Navbar>
<Toolbar bottom tabbar>
<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>
);
可滑动的标签页
tabs-swipeable.jsx
import React from 'react';
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-react';
export default () => (
<Page pageContent={false}>
<Navbar title="Swipeable Tabs"></Navbar>
<Toolbar bottom tabbar>
<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>
);
