Toast Vue 組件

Toast 元件
Toast Props
Toast 插槽
範例

Toast 在螢幕上透過訊息提供關於操作的簡短回饋。

Toast 元件

包含以下元件

Toast

Toast Props

名稱	類型	預設值	描述
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	允許開啟/關閉 Toast 並設定其初始狀態
position	'left' \| 'right' \| 'center'	'left'	Toast 位置（僅在寬螢幕上）。可以是 `left`、`center` 或 `right`
translucent	布林值	布林值	在 iOS 主題中使 Toast 背景半透明（使用 `backdrop-filter: blur`）

Toast 插槽

名稱	描述
button	Toast 按鈕內容

範例

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>