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	布林值	布林值	使 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>