Toast Svelte 组件

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'
opened	布尔值	false	允许打开/关闭 Toast 并设置其初始状态
position	'left' \| 'right' \| 'center'	'left'	Toast 位置（仅在宽屏上）。可以是 `left`、`center` 或 `right`
translucent	布尔值	true	在 iOS 主题中使 Toast 背景半透明（使用 `backdrop-filter: blur`）

Toast 插槽

名称	描述
button	Toast 按钮内容

示例

Toast.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Button,
    Toast,
    Block,
  } from 'konsta/svelte';

  let toastLeftOpened = false;
  let toastCenterOpened = false;
  let toastRightOpened = false;

  const openToast = (setter) => {
    // close other toast
    toastLeftOpened = false;
    toastCenterOpened = false;
    toastRightOpened = false;
    setter();
  };
</script>

<Page>
  <Navbar title="Toast" />

  <Block strongIos outlineIos class="space-y-4">
    <Toast position="left" opened={toastLeftOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastLeftOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is left toast!</div>
    </Toast>
    <Toast position="center" opened={toastCenterOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastCenterOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is center toast!</div>
    </Toast>
    <Toast position="right" opened={toastRightOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastRightOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is right toast!</div>
    </Toast>
    <p>
      Toasts provide brief feedback about an operation through a message on the
      screen.
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastLeftOpened = true))}>
        Toast on Left
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastCenterOpened = true))}>
        Toast on Center
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastRightOpened = true))}>
        Toast on Right
      </Button>
    </p>
  </Block>
</Page>