Message 信息提示

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

API

Message

示例：

Message.show({
    type: 'error',
    title: '错误',
    content: '请联系相关人员反馈！',
    hasMask: true
});

Message.hide

Message.hide() 提供关闭反馈弹层的快捷方法。

Message.

Message.show({type: type, title: 'xxx'}); 的便捷调用方法。

示例：

Message.success('反馈内容');
// 或者
Message.success({
    title: '反馈内容',
    duration: 1000
});

<!— api-extra-end —>

ARIA and KeyBoard

说明： 此组件需要结合其他组件使用，才会有提示。参考上文无障碍。

代码示例

信息类型

通过设置type调整信息类型

查看源码在线预览

import { Message } from '@alifd/next';
ReactDOM.render(
    <div className="message-type-demo">
        <Message title="Success" type="success">
            Content Content Content Content
        </Message>
        <Message title="Warning" type="warning">
            Content Content Content Content
        </Message>
        <Message title="Error" type="error">
            Content Content Content Content
        </Message>
        <Message title="Notice" type="notice">
            Content Content Content Content
        </Message>
        <Message title="Help" type="help">
            Content Content Content Content
        </Message>
        <Message title="Loading" type="loading">
            Content Content Content Content
        </Message>
    </div>, mountNode);

.message-type-demo .next-message {
    margin-bottom: 10px;
}

信息外观

通过设置shape调整信息外观

查看源码在线预览

import { Message, Radio } from '@alifd/next';
const types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];
const list = [
    {
        value: 'inline',
        label: 'inline'
    }, {
        value: 'addon',
        label: 'addon'
    }, {
        value: 'toast',
        label: 'toast'
    }
];
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            shape: 'inline'
        };
        this.handleSelect = this.handleSelect.bind(this);
    }
    handleSelect(shape) {
        this.setState({ shape });
    }
    render() {
        const { shape } = this.state;
        return (
            <div className="message-shape-demo">
                <span className="demo-label">Select Shape：</span>
                <Radio.Group defaultValue="inline" dataSource={list} value={this.state.shape} onChange={this.handleSelect} />
                {types.map(type => (
                    <Message key={type} title={type} type={type} shape={shape}>
                        Content Content Content Content
                    </Message>
                ))}
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

.message-shape-demo .demo-label {
    display: inline-block;
    vertical-align: top;
    height: 22px;
    line-height: 22px;
}
.message-shape-demo .next-message-title {
    text-transform: capitalize;
}
.message-shape-demo .next-message {
    margin-top: 10px;
}
.message-shape-demo .next-message.next-message-toast {
    position: relative !important;
}

信息尺寸

通过size设置尺寸

查看源码在线预览

import { Message, Radio } from '@alifd/next';
const types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];
const list = [
    {
        value: 'medium',
        label: 'medium'
    }, {
        value: 'large',
        label: 'large'
    }
];
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="message-size-demo">
                <span className="demo-label">Select Size：</span>
                <Radio.Group defaultValue="medium" dataSource={list} value={this.state.size} onChange={this.handleSelect} />
                {types.map(type => (
                    <Message key={type} title={type} type={type} size={size}>
                        Content Content Content Content
                    </Message>
                ))}
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

.message-size-demo .demo-label {
    display: inline-block;
    vertical-align: top;
    height: 28px;
    line-height: 28px;
}
.message-size-demo .next-message-title {
    text-transform: capitalize;
}
.message-size-demo .next-message {
    margin-top: 10px;
}

可关闭组件

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

查看源码在线预览

import { Message } from '@alifd/next';
const onClose = () => console.log('onClose triggered!');
const afterClose = () => console.log('afterClose triggered!');
ReactDOM.render(
    <div>
        <Message title="title" closeable onClose={onClose} afterClose={afterClose}>
            Content Content Content Content
        </Message>
    </div>, mountNode);

受控显示隐藏

查看源码在线预览

import { Message, Button } from '@alifd/next';
class App extends React.Component {
    state = {
        visible: true
    }
    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>
                <Message type="warning" visible={visible} title="Warning" closeable onClose={this.handleClose}>
                    This item already has the label "travel". You can add a new label.
                </Message>
            </div>
        );
    }
}
ReactDOM.render(<App />, mountNode);

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

弹窗用法

可以通过Message.show和Message.hide方法来方便的显示或隐藏反馈弹窗。

查看源码在线预览

import { Message, Button } from '@alifd/next';
const show = () => {
    Message.show({
        type: 'loading',
        content: 'Will be closed after 3 seconds or manually click on the close button',
        afterClose: () => console.log('Closed the toast')
    });
};
const hide = () => Message.hide();
ReactDOM.render(
    <div className="message-toast-demo">
        <Button onClick={show}>Show</Button>
        <Button onClick={hide}>Hide</Button>
    </div>, mountNode);

.message-toast-demo .next-btn.next-medium {
    margin-right: 10px;
}

弹窗便捷方法

可以通过Message.success等静态方法来方便的显示指定类型的信息弹窗。

查看源码在线预览

import { Message, Button } from '@alifd/next';
const showSuccess = () => Message.success('success');
const showWarning = () => Message.warning('warning');
const showError = () => Message.error('error');
const showNotice = () => Message.notice('notice');
const showHelp = () => Message.help('help');
const showLoading = () => Message.loading('loading');
ReactDOM.render(
    <div className="message-toast-quick-demo">
        <Button onClick={showSuccess}>success</Button>
        <Button onClick={showWarning}>warning</Button>
        <Button onClick={showError}>error</Button>
        <Button onClick={showNotice}>notice</Button>
        <Button onClick={showHelp}>help</Button>
        <Button onClick={showLoading}>loading</Button>
    </div>, mountNode);

.message-toast-quick-demo .next-btn.next-medium {
    margin-right: 10px;
    margin-bottom: 10px;
}

无障碍

通过Enter键点击button时，自动聚焦到Message上读取信息。请参考ARIA and KeyBoard。

查看源码在线预览

import { Message, Button } from '@alifd/next';
const showSuccess = () => Message.success('success');
ReactDOM.render(
    <div className="message-toast-quick-demo">
        <Button onClick={showSuccess}>success</Button>
    </div>, mountNode);

相关区块

暂无相关区块