Message

在屏幕顶部中央显示的轻量级反馈消息。

导入

import { message } from 'asterui'

示例

基础消息

用于用户操作的轻量级反馈消息。

</>

SuccessErrorInfoWarning

import { message, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          color="primary"
          onClick={() => message.success('Changes saved successfully')}
        >
          Success
        </Button>
  
        <Button
          onClick={() => message.error('Failed to save changes')}
        >
          Error
        </Button>
  
        <Button
          onClick={() => message.info('New updates available')}
        >
          Info
        </Button>
  
        <Button
          onClick={() => message.warning('Session expires in 5 minutes')}
        >
          Warning
        </Button>
      </Space>
    )
}

export default App

加载消息

显示可以通过编程方式关闭的加载消息。

</>

Submit

import { message, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [loadingId, setLoadingId] = useState<string | null>(null);
  
  const handleClick = () => {
    const id = message.loading('Processing...');
    setLoadingId(id);
  
    setTimeout(() => {
      message.destroy(id);
      message.success('Done!');
      setLoadingId(null);
    }, 2000);
  };
  
  return (
      <Button onClick={handleClick} disabled={!!loadingId}>
        {loadingId ? 'Processing...' : 'Submit'}
      </Button>
    )
}

export default App

自定义持续时间

控制消息保持可见的时间。

</>

1 secondDefault (3s)6 seconds

import { message, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() => message.info('Quick message', { duration: 1 })}
        >
          1 second
        </Button>
  
        <Button
          color="primary"
          onClick={() => message.info('Default duration')}
        >
          Default (3s)
        </Button>
  
        <Button
          onClick={() => message.info('Longer message', { duration: 6 })}
        >
          6 seconds
        </Button>
      </Space>
    )
}

export default App

堆叠消息

多个消息在屏幕顶部中央堆叠。

</>

Show Multiple

import { message, Button } from 'asterui'

function App() {
  return (
      <Button
        color="primary"
        onClick={() => {
          message.success('First message');
          setTimeout(() => message.info('Second message'), 300);
          setTimeout(() => message.warning('Third message'), 600);
        }}
      >
        Show Multiple
      </Button>
    )
}

export default App

API

消息选项

属性	描述	类型	默认值
content	消息文本（第一个参数）	React.ReactNode	-
duration	自动关闭持续时间（秒）	number	3
key	唯一标识符。使用相同键更新会更新现有消息	string	-
icon	要显示的自定义图标	React.ReactNode	-
className	额外的 CSS 类名	string	-
style	内联样式	React.CSSProperties	-
data-testid	用于测试框架的测试 ID	string	-
onClick	点击消息时的回调	() => void	-
onClose	消息关闭时的回调	() => void	-

无障碍

• 消息通过实时区域向屏幕阅读器朗读
• 图标提供视觉提示以及颜色表示消息类型
• 消息自动关闭但可以配置为持续存在