Label 标签组件

创建标签组件用来突出所要显示的信息

参数（props）

参数名 说明 必填 类型 默认值 备注
status 不同状态 否 string

属性可选值

DEMO 列表

简单的用法

本 Demo 演示最基础的用法。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceLabel from '@icedesign/label';
import {Button} from '@alifd/next';

class App extends Component {
  render() {
    return (
      <div style={{marginTop: '10px'}}>
        <IceLabel status="default">默认</IceLabel>
        <IceLabel status="primary">主题</IceLabel>
        <IceLabel status="success">成功</IceLabel>
        <IceLabel status="warning">警示</IceLabel>
        <IceLabel status="info">提示</IceLabel>
        <IceLabel status="danger">危险</IceLabel>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

inverse 的用法

本 Demo 演示 inverse 设置为 false (背景色和文字颜色色调一致) 的用法。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceLabel from '@icedesign/label';
import {Button} from '@alifd/next';

class App extends Component {
  render() {
    return (
      <div>
        <IceLabel inverse={false} status="default">default</IceLabel>
        <IceLabel inverse={false} status="primary">primary</IceLabel>
        <IceLabel inverse={false} status="success">success</IceLabel>
        <IceLabel inverse={false} status="warning">warning</IceLabel>
        <IceLabel inverse={false} status="info">info</IceLabel>
        <IceLabel inverse={false} status="danger">danger</IceLabel>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

自定义的用法

本 Demo 演示自定义背景和文字颜色用法。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IceLabel from '@icedesign/label';
import {Button} from '@alifd/next';

class App extends Component {
  render() {
    return (
    <div>
      <div style={{marginTop: '10px'}}>
        <IceLabel style={{backgroundColor: '#fdd8e7', color: '#f5317f'}}>粉色</IceLabel>
        <IceLabel style={{backgroundColor: '#fcdbd9', color: '#f04134'}}>红色</IceLabel>
        <IceLabel style={{backgroundColor: '#fde3cf', color: '#f56a00'}}>橘色</IceLabel>
        <IceLabel style={{backgroundColor: '#cfefdf', color: '#00a854'}}>绿色</IceLabel>
        <IceLabel style={{backgroundColor: '#cfedf0', color: '#00a2ae'}}>青色</IceLabel>
        <IceLabel style={{backgroundColor: '#d2eafb', color: '#108ee9'}}>蓝色</IceLabel>
        <IceLabel style={{backgroundColor: '#e4e2fa', color: '#7265e6'}}>紫色</IceLabel>
      </div>
      <div style={{marginTop: '10px'}}>
        <IceLabel style={{backgroundColor: '#f5317f'}}>粉色</IceLabel>
        <IceLabel style={{backgroundColor: '#f04134'}}>红色</IceLabel>
        <IceLabel style={{backgroundColor: '#f56a00'}}>橘色</IceLabel>
        <IceLabel style={{backgroundColor: '#00a854'}}>绿色</IceLabel>
        <IceLabel style={{backgroundColor: '#00a2ae'}}>青色</IceLabel>
        <IceLabel style={{backgroundColor: '#108ee9'}}>蓝色</IceLabel>
        <IceLabel style={{backgroundColor: '#7265e6'}}>紫色</IceLabel>
      </div>
    </div>
  );
  }
}

ReactDOM.render((
  <App />
), mountNode);