Label 标签组件

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

安装方法

在命令行中执行以下命令npm install @icedesign/label@1.0.4 -S

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

参数（props）

属性可选值

• status: default || primary || success || info || warning || danger

代码示例

简单的用法

本 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);

相关区块

暂无相关区块