工具栏 Vue 组件

工具栏组件
工具栏道具
示例

工具栏是屏幕底部（或顶部）的固定区域，包含导航元素。工具栏没有任何部分，只是里面的普通链接。

包含以下组件

工具栏

名称	类型	默认值	描述
bgClass	字符串		要添加到工具栏“背景”元素的附加类
颜色	对象		具有 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'
组件	字符串	'div'	组件的 HTML 元素
innerClass	字符串		要添加到工具栏“内部”元素的附加类
轮廓	布尔值	未定义	渲染外部细线（边框）。如果未指定，将为 iOS 主题启用
标签栏	布尔值	false	启用标签栏，与使用 `<Tabbar>` 组件相同
tabbarIcons	布尔值	false	启用带图标的标签栏，与使用 `<Tabbar icons>` 组件相同
tabbarLabels	布尔值	false	启用带标签的标签栏，与使用 `<Tabbar labels>` 组件相同
顶部	布尔值	false	启用顶部工具栏，在这种情况下，它会在阴影的相对侧渲染边框
半透明	布尔值	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 组件

工具栏组件

工具栏道具

示例