@ray-js/components-ty-alert v0.1.0

English | 简体中文

@ray-js/components-ty-alert

涂鸦风格警告提示组件

Installation

$ npm install @ray-js/components-ty-alert
# or
$ yarn add @ray-js/components-ty-alert

Usage

Basic Usage

import Alert from '@ray-js/components-ty-alert';

export default () => <Alert message="Alert message" />;

Three kinds of style

import Alert from '@ray-js/components-ty-alert';

export default () => (
  <>
    <Alert type="info" message="Alert message" />
    <Alert type="warning" message="Alert message" />
    <Alert type="error" message="Alert message" />
  </>
);

Custom Content

import Alert from '@ray-js/components-ty-alert';

export default () => (
  <Alert
    type="info"
    message={
      <>
        <Text className={styles.text}>
          如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。
        </Text>
        <Button type="default" size="mini" onClick={handleClick}>
          家庭设置
        </Button>
      </>
    }
  />
);

Custom Icon

import Alert from '@ray-js/components-ty-alert';
import Icon from '@ray-js/components';

export default () => (
  <>
    <Alert
      showIcon
      type="info"
      message="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
    />
    <Alert
      showIcon
      icon={<Icon type="icon-wifi" size={16} color="#83abff" />}
      type="warning"
      message="如果是家中常住成员，建议您将他设为家庭成员，共享家中所有设备和智能场景。"
    />
  </>
);