Skip to main content

Alert

用于页面中展示重要的提示信息

基本用法​

function App() {
  return (
    <div className="ykui-demo-row">
      <Alert type="success" closable={false} message="成功提示的文案" />
      <Alert type="error" closable={false} message="错误提示的文案" />
      <Alert type="info" closable={false} message="消息提示的文案" />
      <Alert type="warn" closable={false} message="警告提示的文案" />
    </div>
  );
}

带有 icon​

function App() {
  return (
    <div className="ykui-demo-row">
      <Alert type="success" showIcon message="成功提示的文案" />
      <Alert type="error" showIcon message="错误提示的文案" />
      <Alert type="info" showIcon message="消息提示的文案" />
      <Alert type="warn" showIcon message="警告提示的文案" />
    </div>
  );
}

关闭按钮图标​

function App() {
  return (
    <div className="ykui-demo-row">
      <Alert type="error" closable message="错误提示的文案" />
      <Alert type="info" closable message="消息提示的文案" />
    </div>
  );
}

文字位置​

function App() {
  return (
    <div className="ykui-demo-row">
      <Alert type="error" closable align="left" message="错误提示的文案" />
      <Alert type="success" closable align="center" message="成功提示的文案" />
      <Alert type="info" closable align="right" message="消息提示的文案" />
    </div>
  );
}

Alert API​

属性说明类型默认值
text内容string〡ReactNode--
showIcon显示辅助图标booleanfalse
closeIcon是否显示关闭图标booleanfalse
onClose关闭事件MouseEventHandler<SVGSVGElement>--