Toast React 组件

Toast 组件
Toast 属性
示例

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

Toast 组件

包含以下组件

Toast

Toast 属性

名称	类型	默认值	描述
button	ReactNode		Toast 按钮内容
colors	object		包含 Tailwind CSS 颜色类的对象
colors.bgIos	string	'bg-black'
colors.bgMaterial	string	'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIos	string	'text-white'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'div'	组件的 HTML 元素
opened	boolean	false	允许打开/关闭 Toast 并设置其初始状态
position	'left' \| 'right' \| 'center'	'left'	Toast 位置（仅在宽屏上）。可以是 `left`、`center` 或 `right`
translucent	boolean	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>
  );
}