ツールバー 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 コンポーネント

ツールバーのコンポーネント

ツールバーのプロパティ

例