Notification

通知组件，用于显示通知信息。

组件

Notification

<Notification> 组件。

Props

title

PropType: node

通知标题，如无特殊需求，一般无须设置。

amStyle

PropType: string

通知样式，默认为黑色。可选值：

• 'primary'
• 'secondary'
• 'success'
• 'warning'
• 'alert'

closeBtn

PropType: bool

是否显示关闭按钮，默认为 true。

animated

PropType: bool

打开、关闭是否显示动画效果。

visible

PropType: bool

通知栏是否可见，使用时 visible 为 true 打开通知，否则关闭。

static

PropType: bool

是否渲染为静态的通知栏。

onDismiss

PropType: func

点击「关闭」按钮时的处理函数。

示例

import React from 'react';
import {
  Container,
  Group,
  Notification,
  Button,
  Field,
} from 'amazeui-touch';
const NotificationExample = React.createClass({
  getInitialState() {
    return {
      visible: false,
      amStyle: '',
    };
  },
  openNotification() {
    this.setState({
      visible: true,
      amStyle: this.refs.barStyle.getValue()
    });
  },
  closeNotification() {
    this.setState({
      visible: false
    });
  },
  render() {
    return (
      <Container {...this.props}>
        <Group
          header="交互显示"
        >
          <Field
            type="select"
            label="选择通知栏颜色"
            defaultValue=""
            ref="barStyle"
          >
            <option value="">Default</option>
            <option value="primary">Primary</option>
            <option value="secondary">Secondary</option>
            <option value="success">Success</option>
            <option value="warning">Warning</option>
            <option value="alert">Alert</option>
          </Field>
          <Button
            onClick={this.openNotification}
            disabled={this.state.visible}
            amStyle="primary"
          >
            显示通知栏
          </Button>
          <Button
            onClick={this.closeNotification}
            disabled={!this.state.visible}
            amStyle="alert"
          >
            关闭通知栏
          </Button>
        </Group>
        <Notification
          title="测试标题"
          amStyle={this.state.amStyle}
          visible={this.state.visible}
          animated
          onDismiss={this.closeNotification}
        >
          这是一个动态显示的通知 :)
        </Notification>
        <Group
          header="静态通知栏样式展示"
        >
          <Notification visible static>这是一个通知 :)</Notification>
          <Notification visible static amStyle="primary">这是一个通知 :)</Notification>
          <Notification visible static amStyle="secondary">这是一个通知 :)</Notification>
          <Notification visible static amStyle="success">这是一个通知 :)</Notification>
          <Notification visible static amStyle="warning">这是一个通知 :)</Notification>
          <Notification visible static amStyle="alert">这是一个通知 :)</Notification>
        </Group>
      </Container>
    );
  }
});
export default NotificationExample;

DemoCopy

原文: http://t.amazeui.org/#/docs/notification