Label 标签组件

如果项目中使用的是 1.x 版本的基础组件(@alifd/next),请在左侧导航顶部切换组件版本。

安装方法

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

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

参数(props)

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

属性可选值

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

代码示例

简单的用法

本 Demo 演示最基础的用法。

Label 标签组件 - 图1

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import IceLabel from '@icedesign/label';
  4. import {Button} from '@icedesign/base';
  5. class App extends Component {
  6. render() {
  7. return (
  8. <div style={{marginTop: '10px'}}>
  9. <IceLabel status="default">默认</IceLabel>
  10. <IceLabel status="primary">主题</IceLabel>
  11. <IceLabel status="success">成功</IceLabel>
  12. <IceLabel status="warning">警示</IceLabel>
  13. <IceLabel status="info">提示</IceLabel>
  14. <IceLabel status="danger">危险</IceLabel>
  15. </div>
  16. );
  17. }
  18. }
  19. ReactDOM.render((
  20. <App />
  21. ), mountNode);

inverse 的用法

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

Label 标签组件 - 图2

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import IceLabel from '@icedesign/label';
  4. import {Button} from '@icedesign/base';
  5. class App extends Component {
  6. render() {
  7. return (
  8. <div>
  9. <IceLabel inverse={false} status="default">default</IceLabel>
  10. <IceLabel inverse={false} status="primary">primary</IceLabel>
  11. <IceLabel inverse={false} status="success">success</IceLabel>
  12. <IceLabel inverse={false} status="warning">warning</IceLabel>
  13. <IceLabel inverse={false} status="info">info</IceLabel>
  14. <IceLabel inverse={false} status="danger">danger</IceLabel>
  15. </div>
  16. );
  17. }
  18. }
  19. ReactDOM.render((
  20. <App />
  21. ), mountNode);

自定义的用法

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

Label 标签组件 - 图3

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import IceLabel from '@icedesign/label';
  4. import {Button} from '@icedesign/base';
  5. class App extends Component {
  6. render() {
  7. return (
  8. <div>
  9. <div style={{marginTop: '10px'}}>
  10. <IceLabel style={{backgroundColor: '#fdd8e7', color: '#f5317f'}}>粉色</IceLabel>
  11. <IceLabel style={{backgroundColor: '#fcdbd9', color: '#f04134'}}>红色</IceLabel>
  12. <IceLabel style={{backgroundColor: '#fde3cf', color: '#f56a00'}}>橘色</IceLabel>
  13. <IceLabel style={{backgroundColor: '#cfefdf', color: '#00a854'}}>绿色</IceLabel>
  14. <IceLabel style={{backgroundColor: '#cfedf0', color: '#00a2ae'}}>青色</IceLabel>
  15. <IceLabel style={{backgroundColor: '#d2eafb', color: '#108ee9'}}>蓝色</IceLabel>
  16. <IceLabel style={{backgroundColor: '#e4e2fa', color: '#7265e6'}}>紫色</IceLabel>
  17. </div>
  18. <div style={{marginTop: '10px'}}>
  19. <IceLabel style={{backgroundColor: '#f5317f'}}>粉色</IceLabel>
  20. <IceLabel style={{backgroundColor: '#f04134'}}>红色</IceLabel>
  21. <IceLabel style={{backgroundColor: '#f56a00'}}>橘色</IceLabel>
  22. <IceLabel style={{backgroundColor: '#00a854'}}>绿色</IceLabel>
  23. <IceLabel style={{backgroundColor: '#00a2ae'}}>青色</IceLabel>
  24. <IceLabel style={{backgroundColor: '#108ee9'}}>蓝色</IceLabel>
  25. <IceLabel style={{backgroundColor: '#7265e6'}}>紫色</IceLabel>
  26. </div>
  27. </div>
  28. );
  29. }
  30. }
  31. ReactDOM.render((
  32. <App />
  33. ), mountNode);

相关区块

Label 标签组件 - 图4

暂无相关区块