Label

标签组件

  • 通过phLabel设置label类型，可选参考所有label类型
  • 通过phStyle来改变颜色, 可选primary、info、success、calm、light、gray。
  • 通过phSize设置大小, 可选sm、md。
  • 不提供默认回调, 但支持自定义className，事件等操作。

主要属性和接口：

  • phLabel:标签类型
    如：<Label phLabel='zu'/>
  • phStyle:标签颜色, 默认primary
    如：<Label phStyle='info'/>
  • phSize:标签大小, 默认sm
    如：<Label phSize='lg'/>

方法

属性

事件

Extends Component
Defined in: src/label/index.js:20
Module: 标签组件

Available since 0.1.0

Constructor

Label

Label ()

Defined in src/label/index.js:20

Available since 0.1.0

Example:

import React, { Component } from "react"

import Label from "phoenix-ui/lib/label"
import Code from "./code/code"

export default class Labels extends Component{
    render(){
        return(
            <div>
                <h2 className="comp-title">Label</h2>
                <h3 className="comp-type">phLabel 标签类型</h3>
                <div className="content">
                    <Label phLabel="zu"/>
                    <Label phLabel="tuan"/>
                    <Label phLabel="fu"/>
                    <Label phLabel="cu"/>
                    <Label phLabel="quan"/>
                    <Label phLabel="shou"/>
                    <Label phLabel="piao"/>
                    <Label phLabel="ding"/>
                    <Label phLabel="jia"/>
                    <Label phLabel="yin"/>
                    <Label phLabel="ka"/>
                    <Label phLabel="wai"/>
                    <Label phLabel="dian"/>
                    <Label phLabel="pin"/>
                    <Label phLabel="ke"/>
                    <Label phLabel="pai"/>
                    <Label phLabel="huo"/>
                </div>
                <Code target="label-phlabel" />

                <h3 className="comp-type">phStyle(默认primary) 标签颜色</h3>
                <div className="content">
                    <Label phLabel="tuan"/>
                    <Label phLabel="ke" phStyle="info"/>
                    <Label phLabel="ding" phStyle="success"/>
                    <Label phLabel="cu" phStyle="tip"/>
                    <Label phLabel="huo" phStyle="calm"/>
                    <Label phLabel="ka" phStyle="light"/>
                    <Label phLabel="zu" phStyle="gray"/>
                </div>
                <Code target="label-phstyle" />

                <h3 className="comp-type">phSize(默认sm) 标签大小</h3>
                <div className="content">
                    <Label phLabel="pai"/>
                    <Label phLabel="pai" phSize="md"/>
                </div>
                <Code target="label-phsize" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/label/index.js:46

样式前缀

Default:

'label'

phLabel

String

Defined in src/label/index.js:53

label类型

Default:

''

phSize

String

Defined in src/label/index.js:60

label标签大小[sm、md], 默认为sm

Default:

'sm'

phStyle

String

Defined in src/label/index.js:67

label标签颜色[primary、info、success、calm、light、gray], 默认primary

Default:

'primary'