工具列 Svelte 元件

工具列元件
工具列屬性
範例

工具列是螢幕底部（或頂部）的固定區域，其中包含導覽元素。工具列沒有任何部分，只有內部的純連結

包含以下元件

工具列

名稱	類型	預設值	描述
bgClass	字串		要新增至工具列「背景」元素上的其他類別
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.bgIos	字串	'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterial	字串	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIos	字串	'bg-primary'
colors.tabbarHighlightBgMaterial	字串	'bg-md-light-primary dark:bg-md-dark-primary'
innerClass	字串		要新增至工具列「內部」元素上的其他類別
outline	布林值	未定義	呈現外部細線（邊框）。如果未指定，則會為 iOS 主題啟用
tabbar	布林值	false	啟用標籤列，與使用 `<Tabbar>` 元件相同
tabbarIcons	布林值	false	啟用帶有圖示的標籤列，與使用 `<Tabbar icons>` 元件相同
tabbarLabels	布林值	false	啟用帶有標籤的標籤列，與使用 `<Tabbar labels>` 元件相同
top	布林值	false	啟用頂部工具列，在這種情況下，它會在相對的兩側渲染邊框陰影
translucent	布林值	true	在 iOS 主題中，使工具列背景半透明（使用 `backdrop-filter: blur`）

範例

Toolbar.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Toolbar,
    Link,
    Block,
    Button,
  } from 'konsta/svelte';

  let isTop = false;
</script>

<Page>
  <Navbar title="Toolbar" />

  <Toolbar
    top={isTop}
    class={`left-0 ${
      isTop ? 'ios:top-11-safe material:top-14-safe sticky' : 'bottom-0 fixed'
    } w-full`}
  >
    <Link toolbar>Link 1</Link>
    <Link toolbar>Link 2</Link>
    <Link toolbar>Link 3</Link>
  </Toolbar>

  <Block strongIos outlineIos class="space-y-4">
    <p>
      Toolbar supports both top and bottom positions. Click the following button
      to change its position.
    </p>
    <p>
      <Button
        onClick={() => {
          isTop = !isTop;
        }}
      >
        Toggle Toolbar Position
      </Button>
    </p>
  </Block>
</Page>

工具列 Svelte 元件

工具列元件

工具列屬性

範例