工具列 Vue 元件

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

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

包含以下元件

工具列

名稱	類型	預設值	描述
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'
component	字串	'div'	元件的 HTML 元素
innerClass	字串		要添加到工具列「內部」元素的額外類別
outline	布林值	未定義	呈現外部細線（邊框）。如果未指定，則會為 iOS 主題啟用
tabbar	布林值	false	啟用標籤列，與使用 `<Tabbar>` 元件相同
tabbarIcons	布林值	false	啟用帶有圖示的標籤列，與使用 `<Tabbar icons>` 元件相同
tabbarLabels	布林值	false	啟用帶有標籤的標籤列，與使用 `<Tabbar labels>` 元件相同
top	布林值	false	啟用頂部工具列，在這種情況下，它會在相反的側邊呈現邊框陰影
translucent	布林值	true	使工具列背景在 iOS 主題中呈現半透明（帶有 `backdrop-filter: blur`）

範例

Toolbar.vue

<template>
  <k-page>
    <k-navbar title="Toolbar" />

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

    <k-block strong-ios outline-ios-p class="space-y-4">
      <p>
        Toolbar supports both top and bottom positions. Click the following
        button to change its position.
      </p>
      <p>
        <k-button @click="() => (isTop = !isTop)">
          Toggle Toolbar Position
        </k-button>
      </p>
    </k-block>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kToolbar,
    kLink,
    kBlock,
    kButton,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kToolbar,
      kLink,
      kBlock,
      kButton,
    },
    setup() {
      const isTop = ref(false);

      return {
        isTop,
      };
    },
  };
</script>

工具列 Vue 元件

工具列元件

工具列屬性

範例