Toolbar / Tabbar - 图1

Toolbar Svelte Component

Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar Svelte component represents Toolbar component.

Toolbar Components

There are following components included:

  • Toolbar

Toolbar Properties

PropTypeDefaultDescription
<Toolbar> properties
innerbooleantrueWhen enabled (by default), it will put all the content within internal toolbarInner element. Disable it only in case you want to put totally custom layout inside
positionstringToolbar position, can be top or bottom
topbooleanTop positioned toolbar. Shortening for position=”top”
topIosbooleanTop positioned toolbar only for iOS theme
topMdbooleanTop positioned toolbar only for MD theme
topAurorabooleanTop positioned toolbar only for Aurora theme
bottombooleanBottom positioned toolbar. Shortening for position=”bottom”
bottomIosbooleanBottom positioned toolbar only for iOS theme
bottomMdbooleanBottom positioned toolbar only for MD theme
bottomAurorabooleanBottom positioned toolbar only for Aurora theme
tabbarbooleanfalseDefines whether the Toolbar is also a Tabbar or not
labelsbooleanfalseEnables Tabbar with labels (affects only when tabbar: true)
scrollablebooleanfalseEnables scrollable Tabbar (affects only when tabbar: true)
noShadowbooleanDisable shadow rendering for Material theme
noHairlinebooleanfalseDisable toolbar/tabbar top thin border (hairline) for iOS theme
hiddenbooleanfalseMakes toolbar hidden

Toolbar Methods

<Toolbar> methods
.hide(animate)Hide toolbar
.show(animate)Show toolbar

Toolbar Events

EventDescription
<Toolbar> events
toolbarHideEvent will be triggered when Toolbar becomes hidden
toolbarShowEvent will be triggered when Toolbar becomes visible

Toolbar Slots

Toolbar Svelte component (<Toolbar>) has additional slots for custom elements:

  • default - element will be inserted as a child of <div class="toolbarInner"> element
  • beforeInner - element will be inserted right before <div class="toolbarInner"> element
  • afterInner - element will be inserted right after <div class="toolbarInner"> element
  1. <Toolbar>
  2. <div slot="beforeInner">Before Inner</div>
  3. <div slot="afterInner">After Inner</div>
  4. <!-- Goes to default slot: -->
  5. <Link>Left Link</Link>
  6. <Link>Right Link</Link>
  7. </Toolbar>
  8. <!-- Renders to: -->
  9. <div class="toolbar">
  10. <div>Before Inner</div>
  11. <div class="toolbarInner">
  12. <a href="#" class="link">Left Link</a>
  13. <a href="#" class="link">Right Link</a>
  14. </div>
  15. <div>After Inner</div>
  16. </div>

Examples

Toolbar

  1. <Page>
  2. <Navbar title="Toolbar" backLink="Back"></Navbar>
  3. <Toolbar position={isBottom ? 'bottom' : 'top'}>
  4. <Link>Left Link</Link>
  5. <Link>Right Link</Link>
  6. </Toolbar>
  7. <BlockTitle>Toolbar Position</BlockTitle>
  8. <Block>
  9. <p>Toolbar supports both top and bottom positions. Click the following button to change its position.</p>
  10. <p>
  11. <Button fill onClick={() => isBottom = !isBottom}>Toggle Toolbar Position</Button>
  12. </p>
  13. </Block>
  14. <Block>
  15. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi...</p>
  16. </Block>
  17. </Page>
  18. <script>
  19. import {Page, Navbar, Toolbar, Link, BlockTitle, Block, Button} from 'framework7-svelte';
  20. let isBottom = true;
  21. </script>

Tabbar

  1. <Page pageContent={false}>
  2. <Navbar title="Tabbar" backLink="Back">
  3. <NavRight>
  4. <Link iconIos="f7:arrow_up_arrow_down_circle_fill" iconAurora="f7:arrow_up_arrow_down_circle_fill" iconMd="material:compare_arrows" onClick={() => isBottom = !isBottom}></Link>
  5. </NavRight>
  6. </Navbar>
  7. <Toolbar tabbar position={isBottom ? 'bottom' : 'top'}>
  8. <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
  9. <Link tabLink="#tab-2">Tab 2</Link>
  10. <Link tabLink="#tab-3">Tab 3</Link>
  11. </Toolbar>
  12. <Tabs>
  13. <Tab id="tab-1" class="page-content" tabActive>
  14. <Block>
  15. <p>Tab 1 content</p>
  16. <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>
  17. <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>
  18. <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>
  19. <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>
  20. <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>
  21. <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>
  22. <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>
  23. </Block>
  24. </Tab>
  25. <Tab id="tab-2" class="page-content">
  26. <Block>
  27. <p>Tab 2 content</p>
  28. <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>
  29. <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>
  30. <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>
  31. <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>
  32. <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>
  33. <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>
  34. <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>
  35. </Block>
  36. </Tab>
  37. <Tab id="tab-3" class="page-content">
  38. <Block>
  39. <p>Tab 3 content</p>
  40. <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>
  41. <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>
  42. <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>
  43. <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>
  44. <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>
  45. <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>
  46. <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>
  47. </Block>
  48. </Tab>
  49. </Tabs>
  50. </Page>
  51. <script>
  52. import {Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight, Tabs, Tab } from 'framework7-svelte';
  53. let isBottom = true;
  54. </script>

Tabbar Labels

  1. <Page pageContent={false}>
  2. <Navbar title="Tabbar Labels" backLink="Back">
  3. <NavRight>
  4. <Link iconIos="f7:arrow_up_arrow_down_circle_fill" iconAurora="f7:arrow_up_arrow_down_circle_fill" iconMd="material:compare_arrows" onClick={() => isBottom = !isBottom} />
  5. </NavRight>
  6. </Navbar>
  7. <Toolbar tabbar labels position={isBottom ? 'bottom' : 'top'}>
  8. <Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIos="f7:envelope_fill" iconAurora="f7:envelope_fill" iconMd="material:email" />
  9. <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:calendar_fill" iconAurora="f7:calendar_fill" iconMd="material:today" />
  10. <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_upload_fill" iconAurora="f7:cloud_upload_fill" iconMd="material:file_upload" />
  11. </Toolbar>
  12. <Tabs>
  13. <Tab id="tab-1" class="page-content" tabActive>
  14. <Block>
  15. <p>Tab 1 content</p>
  16. <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>
  17. <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>
  18. <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>
  19. <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>
  20. <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>
  21. <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>
  22. <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>
  23. </Block>
  24. </Tab>
  25. <Tab id="tab-2" class="page-content">
  26. <Block>
  27. <p>Tab 2 content</p>
  28. <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>
  29. <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>
  30. <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>
  31. <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>
  32. <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>
  33. <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>
  34. <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>
  35. </Block>
  36. </Tab>
  37. <Tab id="tab-3" class="page-content">
  38. <Block>
  39. <p>Tab 3 content</p>
  40. <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>
  41. <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>
  42. <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>
  43. <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>
  44. <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>
  45. <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>
  46. <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>
  47. </Block>
  48. </Tab>
  49. </Tabs>
  50. </Page>
  51. <script>
  52. import {Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight, Tabs, Tab } from 'framework7-svelte';
  53. let isBottom = true;
  54. </script>

Tabbar Scrollable

  1. <Page pageContent={false}>
  2. <Navbar title="Tabbar Scrollable" backLink="Back">
  3. <NavRight>
  4. <Link iconIos="f7:arrow_up_arrow_down_circle_fill" iconAurora="f7:arrow_up_arrow_down_circle_fill" iconMd="material:compare_arrows" onClick={() => isBottom = !isBottom}></Link>
  5. </NavRight>
  6. </Navbar>
  7. <Toolbar tabbar scrollable position={isBottom ? 'bottom' : 'top'}>
  8. {#each tabs as tab, index (index)}
  9. <Link
  10. tabLink={`#tab-${tab}`}
  11. tabLinkActive={index === 0}
  12. >Tab {tab}</Link>
  13. {/each}
  14. </Toolbar>
  15. <Tabs>
  16. {#each tabs as tab, index (index)}
  17. <Tab
  18. id={`tab-${tab}`}
  19. class="page-content"
  20. tabActive={index === 0}
  21. >
  22. <Block>
  23. <p><b>Tab {tab} content</b></p>
  24. <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>
  25. <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>
  26. <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>
  27. <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>
  28. <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>
  29. <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>
  30. <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>
  31. </Block>
  32. </Tab>
  33. {/each}
  34. </Tabs>
  35. </Page>
  36. <script>
  37. import { Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight, Tabs, Tab } from 'framework7-svelte';
  38. const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  39. let isBottom = true;
  40. </script>

Hide Toolbar On Scroll

  1. <Page hideToolbarOnScroll>
  2. <Navbar title="Hide Toolbar On Scroll" backLink="Back"></Navbar>
  3. <Toolbar bottom>
  4. <Link>Left Link</Link>
  5. <Link>Right Link</Link>
  6. </Toolbar>
  7. <Block strong>
  8. <p>Toolbar will be hidden if you scroll bottom</p>
  9. </Block>
  10. <Block>
  11. <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>
  12. <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>
  13. <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>
  14. <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>
  15. <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>
  16. <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>
  17. <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>
  18. </Block>
  19. </Page>
  20. <script>
  21. import { Page, Navbar, Toolbar, Link, BlockTitle, Block, NavRight } from 'framework7-svelte';
  22. </script>

← Toggle

Treeview →