標籤 Svelte 組件
標籤允許在不同內容之間輕鬆切換。標籤 Svelte 組件代表 標籤 組件。
標籤組件
包含下列組件
標籤標籤
標籤屬性
| 屬性 | 類型 | 說明 |
|---|---|---|
| <Tabs> 屬性 | ||
| animated | 布林值 | 啟用動畫標籤 |
| swipeable | 布林值 | 啟用可滑動標籤 |
| routable | 布林值 | 啟用可路由標籤 |
| swiperParams | 物件 | 包含 Swiper 參數 的物件（如果啟用 swipeable） |
| <Tab> 屬性 | ||
| tabActive | 布林值 | 定義目前活動/可見標籤 |
| id | 字串 | 標籤 ID |
標籤方法
| <Tab> 方法 | |
|---|---|
| .show(animate) | 顯示此標籤 |
標籤事件
| 事件 | 說明 |
|---|---|
| <Tab> 事件 | |
| tabShow | 當標籤變為可見/活動時觸發事件 |
| tabHide | 當標籤變為不可見/不活動時觸發事件 |
切換標籤
您可以控制/切換標籤
範例
靜態標籤
tabs-static.svelte
<script>
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-svelte';
</script>
<Page pageContent={false}>
<Navbar title="Static Tabs" />
<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" class="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" class="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" class="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.svelte
<script>
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-svelte';
</script>
<Page pageContent={false}>
<Navbar title="Animated Tabs" />
<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" class="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" class="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" class="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.svelte
<script>
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-svelte';
</script>
<Page pageContent={false}>
<Navbar title="Swipeable Tabs" />
<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" class="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" class="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" class="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>