Toast React 組件

Toast 組件
Toast 屬性
範例

Toast 通過螢幕上的訊息提供有關操作的簡短回饋。

Toast 組件

包含以下組件

Toast

Toast 屬性

名稱	類型	預設值	描述
button	ReactNode		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.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Toast,
  Block,
} from 'konsta/react';

export default function ToastPage() {
  const [toastLeftOpened, setToastLeftOpened] = useState(false);
  const [toastCenterOpened, setToastCenterOpened] = useState(false);
  const [toastRightOpened, setToastRightOpened] = useState(false);

  const openToast = (setter) => {
    // close other toast
    setToastLeftOpened(false);
    setToastCenterOpened(false);
    setToastRightOpened(false);
    setter(true);
  };
  return (
    <Page>
      <Navbar
        title="Toast"
        />

      <Block strongIos outlineIos className="space-y-4">
        <Toast
          position="left"
          opened={toastLeftOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastLeftOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is left toast!</div>
        </Toast>
        <Toast
          position="center"
          opened={toastCenterOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastCenterOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is center toast!</div>
        </Toast>
        <Toast
          position="right"
          opened={toastRightOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastRightOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="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(setToastLeftOpened)}>
            Toast on Left
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastCenterOpened)}>
            Toast on Center
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastRightOpened)}>
            Toast on Right
          </Button>
        </p>
      </Block>
    </Page>
  );
}