#Message 消息

import { Message } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Message>Notice：这是一条说明信息</Message>
      <Message type="success">Success：保存成功</Message>
      <Message type="warning">Warning：即将超出配额</Message>
      <Message type="error">Error：保存失败，请重试</Message>
      <Message icon="help">自定义图标（覆盖类型默认图标）</Message>
    </div>
  );
}

export default App;

import { Message } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <Message inline>Inline：这是一条内联说明</Message>
      <Message inline type="error">
        Inline error：这是一条内联错误
      </Message>
    </div>
  );
}

export default App;

import { useState } from "react";
import { Button, Message } from "ooui-react";

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {visible ? (
        <Message type="warning" showClose onClose={() => setVisible(false)}>
          点右侧 × 关闭（由 onClose 卸载）
        </Message>
      ) : (
        <Button onClick={() => setVisible(true)}>重新显示</Button>
      )}
    </div>
  );
}

export default App;