トースト Vue コンポーネント

トーストコンポーネント
トーストプロパティ
トーストスロット
例

トーストは、画面上のメッセージを通じて操作に関する簡単なフィードバックを提供します。

トーストコンポーネント

以下のコンポーネントが含まれています

トースト

トーストプロパティ

名前	タイプ	デフォルト	説明
colors	オブジェクト		Tailwind CSS カラークラスを持つオブジェクト
colors.bgIos	文字列	'bg-black'
colors.bgMaterial	文字列	'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIos	文字列	'text-white'
colors.textMaterial	文字列	'text-md-light-primary dark:text-md-dark-primary'
component	文字列	'div'	コンポーネントのHTML要素
opened	真偽値	false	トーストを開閉し、初期状態を設定できます
position	'left' \| 'right' \| 'center'	'left'	トーストの位置（ワイドスクリーンのみ）。`left`、`center`、または`right`を指定できます
translucent	真偽値	true	iOSテーマでトーストの背景を半透明にします（`backdrop-filter: blur`を使用）

トーストスロット

名前	説明
button	トーストボタンのコンテンツ

例

Toast.vue

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

    <k-block strong-ios outline-ios class="space-y-4">
      <k-toast position="left" :opened="opened.left">
        <template #button>
          <k-button clear inline @click="() => (opened.left = false)">
            Close
          </k-button>
        </template>
        <div class="shrink">Hello this is left toast!</div>
      </k-toast>
      <k-toast position="center" :opened="opened.center">
        <template #button>
          <k-button clear inline @click="() => (opened.center = false)">
            Close
          </k-button>
        </template>
        <div class="shrink">Hello this is center toast!</div>
      </k-toast>
      <k-toast position="right" :opened="opened.right">
        <template #button>
          <k-button clear inline @click="() => (opened.right = false)">
            Close
          </k-button>
        </template>
        <div class="shrink">Hello this is right toast!</div>
      </k-toast>
      <p>
        Toasts provide brief feedback about an operation through a message on
        the screen.
      </p>
      <p>
        <k-button @click="() => openToast('left')"> Toast on Left </k-button>
      </p>
      <p>
        <k-button @click="() => openToast('center')">
          Toast on Center
        </k-button>
      </p>
      <p>
        <k-button @click="() => openToast('right')"> Toast on Right </k-button>
      </p>
    </k-block>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kButton,
    kToast,
    kBlock,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kButton,
      kToast,
      kBlock,
    },
    setup() {
      const opened = ref({
        left: false,
        center: false,
        right: false,
      });
      const openToast = (side) => {
        // close other toast
        opened.value = { left: false, center: false, right: false };
        opened.value[side] = true;
      };
      return {
        openToast,
        opened,
      };
    },
  };
</script>