Notice 消息提示

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

主动出现在页面上的非常态式信息，公告等。它具有一定的时效性，非功能性。

API

消息提示

代码示例

组件类型

通过设置type为prompt、warning、system可分别创建普通、警告、系统提示组件，type默认值为prompt。提示组件有三种类型：普通提示、警告提示、系统提示。

查看源码在线预览

import { Notice } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Notice title="title">Content Content Content Content</Notice>
    <Notice title="title" type="warning">
      Content Content Content Content
    </Notice>
    <Notice title="title" type="system">
      Content Content Content Content
    </Notice>
  </div>,
  mountNode
);

.next-notice {
    margin-bottom: 10px;
}

可关闭组件

通过增加closable属性可以控制提示框是否可关闭。

查看源码在线预览

import { Notice } from "@icedesign/base";
const onClose = () => console.log("onClose triggered!");
const afterClose = () => console.log("afterClose triggered!");
ReactDOM.render(
  <div>
    <Notice title="title" closable onClose={onClose} afterClose={afterClose}>
      Content Content Content Content
    </Notice>
  </div>,
  mountNode
);

受控显示隐藏

查看源码在线预览

import { Notice, Button } from "@icedesign/base";
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleChange() {
    this.setState({
      visible: !this.state.visible
    });
  }
  handleClose() {
    this.setState({
      visible: false
    });
  }
  render() {
    const { visible } = this.state;
    return (
      <div className="control-demo">
        <Button onClick={this.handleChange}>Toggle Visible</Button>
        <Notice
          type="warning"
          visible={visible}
          title="警告"
          closable
          onClose={this.handleClose}
        >
          现在不是一个买房的低点，建议慎重考虑。
        </Notice>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.control-demo .next-btn-medium {
    margin-bottom: 10px;
}

定制组件外观

查看源码在线预览

import { Notice } from "@icedesign/base";
ReactDOM.render(
  <Notice
    className="custom"
    closable
    iconType="success"
    title={
      <span>
        您的 信用保障极速贷款服务申请 已通过，获得信用保障极速贷款总额度：<a
          className="redit-lines"
          href=""
        >
          300000
        </a>{" "}
        人民币
      </span>
    }
  />,
  mountNode
);

.custom.next-notice.next-notice-prompt.next-notice-standalone {
    border-color: #1DC11D;
}
.custom .next-icon-success:before {
    color: #1DC11D;
}
.custom .redit-lines {
    color: #FF6A00;
}

组件外观

注意，当通知组件的type属性值为system时，无论是否设置组件的外观shape值，组件都表现为有外观。

• addon 嵌入型，即通知组件会取消边框的显示，用于嵌入在某些内容区域中

• standalone 默认外观，即提示组件会自带边框提示组件有三种外观，可以通过shape属性设置。

查看源码在线预览

import { Notice, Select } from "@icedesign/base";
const Option = Select.Option;
const types = ["prompt", "warning", "system"];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shape: "standalone"
    };
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(shape) {
    this.setState({ shape });
  }
  render() {
    const { shape } = this.state;
    return (
      <div className="notice-shape-demo">
        <span className="demo-label">请选择Shape：</span>
        <Select defaultValue="standalone" onChange={this.handleSelect}>
          <Option value="standalone">Standalone</Option>
          <Option value="addon">Addon</Option>
        </Select>
        {types.map(type => (
          <Notice
            key={type}
            title="title"
            type={type}
            shape={shape}
            animation={false}
          >
            Content Content Content Content
          </Notice>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.notice-shape-demo .demo-label {
    display: inline-block;
    vertical-align: top;
    height: 28px;
    line-height: 28px;
}
.notice-shape-demo .next-notice {
    margin-top: 10px;
}

组件尺寸

通过设置size属性为medium、large可分别创建普通尺寸、大尺寸的提示组件，size默认值为medium。提示组件共有两种尺寸：普通、大型。

查看源码在线预览

import { Notice, Select } from "@icedesign/base";
const Option = Select.Option;
const types = ["prompt", "warning", "system"];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      size: "medium"
    };
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(size) {
    this.setState({ size });
  }
  render() {
    const { size } = this.state;
    return (
      <div className="notice-size-demo">
        <span className="demo-label">请选择Size：</span>
        <Select defaultValue="medium" onChange={this.handleSelect}>
          <Option value="medium">Medium</Option>
          <Option value="large">Large</Option>
        </Select>
        {types.map(type => (
          <Notice
            key={type}
            title="title"
            type={type}
            size={size}
            animation={false}
          >
            Content Content Content Content
          </Notice>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.notice-size-demo .demo-label {
    display: inline-block;
    vertical-align: top;
    height: 28px;
    line-height: 28px;
}
.notice-size-demo .next-notice {
    margin-top: 10px;
}

相关区块

暂无相关区块