Toast 消息提示

Toast 用于全局展示操作反馈信息。

基础用法

点击按钮触发不同类型的消息提示。

使用方法

  1. 在应用根组件包裹 ToastProvider
  2. 使用 useToast hook 获取 addToast 方法
// App.tsx
import { ToastProvider } from '@kzqkzq/tactile-ui';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}
// 在组件中使用
import { useToast } from '@kzqkzq/tactile-ui';

function MyComponent() {
  const { addToast } = useToast();
  
  const handleClick = () => {
    addToast({
      variant: 'success',
      title: '成功',
      description: '操作已完成'
    });
  };
}

API

ToastProvider Props

属性说明类型默认值
duration持续时间(ms)number5000

addToast Options

属性说明类型默认值
variant类型'success' | 'error' | 'warning' | 'info''info'
title标题string-
description描述string-
action操作按钮ReactNode-