Toast Vue 组件

Toast 组件
Toast 属性
Toast 插槽
示例

Toast 通过屏幕上的消息提供有关操作的简短反馈。

Toast 组件

包含以下组件

Toast

Toast 属性

名称	类型	默认值	描述
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	布尔值	true	在 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>