Skip to main content

Message

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒

组件用法​

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

js用法顶部提示​

function App() {
  const handleSuccess = () => {
    Message.success({message: "成功提示的文案"})
  }
  const handleError = () => {
    Message.error({message: "错误提示的文案"})
  }
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => handleSuccess()}>success</Button>
      <Button type="default" onClick={() => handleError()}>error</Button>
    </div>
  );
}

自定义图标​

function App() {
  return (
    <div className="ykui-demo-row">
      <Message type="error" message="警告提示的文案" icon={IconHandUp} />
    </div>
  );
}

提示框自动隐藏​

autoHide 用于指定是否自动隐藏，默认为 true

function App() {
  const handleSuccess = () => {
    Message.success({message: "成功提示的文案", autoHide: false})
  }
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => handleSuccess()}>success</Button>
    </div>
  );
}

提示框自动隐藏时间​

autoHideDelay 用于指定自动隐藏的时间，默认为 3000（即 3 秒）

function App() {
  const handleSuccess = () => {
    Message.success({message: "成功提示的文案", autoHide: true, autoHideDelay: 5000})
  }
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => handleSuccess()}>success</Button>
    </div>
  );
}

提示框延迟显示​

fadeTimeout 用于指定是否延迟显示提示

function App() {
  const handleSuccess = () => {
    Message.success({message: "成功提示的文案", fadeTimeout: 2000})
  }
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => handleSuccess()}>success</Button>
    </div>
  );
}

提示方法​

方法说明
  • autoHide 用于指定是否自动隐藏，默认为 true
  • autoHideDelay 用于指定自动隐藏的时间，默认为 3000（即 3 秒）
  • fadeTimeout 用于指定是否延迟显示提示
function App() {
  const showMessage = (type) => {
    if (type === 'success') {
      Message.success({
        message: "成功提示的文案"
      })
    }
    if (type === 'error') {
      Message.error({
        message: "错误提示的文案",
        autoHide: false
      })
    }
    if (type === 'info') {
      Message.info({
        message: "消息提示的文案",
        autoHideDelay: 6666
      })
    }
    if (type === 'warn') {
      Message.warn({
        message: "警告提示的文案",
        fadeTimeout: 2000
      })
    }
  }

  return (
    <div className="ykui-demo-row">
      <Button type="success" onClick={() => showMessage('success')}>成功提示</Button>
      <Button type="error" onClick={() => showMessage('error')}>错误提示</Button>
      <Button type="info" onClick={() => showMessage('info')}>消息提示</Button>
      <Button type="warn" onClick={() => showMessage('warn')}>警告提示</Button>
    </div>
  );
}

Message API​

属性说明类型默认值
type类型warn〡info〡error〡success--
position类名ScreenPosition--
maxWidth最大宽度string〡string--
minWidth最小宽度string〡string--

ScreenPosition​

export enum ScreenPosition {
  top = 'top',
  left = 'left',
  right = 'right',
  bottom = 'bottom',
  topRight = 'topRight',
  topLeft = 'topLeft',
  bottomRight = 'bottomRight',
  bottomLeft = 'bottomLeft',
}