Badge

Badge标记

  • 主要是用来提供不同颜色的标识, 通过phStyle来改变颜色, 可选default、primary、warning、danger、info、error、success。
  • 不提供默认回调, 但支持自定义className，事件等操作。

主要属性和接口：

  • phStyle:颜色, 默认primary
    如：<Badge phStyle='info'>惠</Badge>

方法

属性

事件

Extends Component
Defined in: src/badge/index.js:10
Module: 标签组件

Available since 0.1.0

Constructor

Badge

Badge ()

Defined in src/badge/index.js:10

Available since 0.1.0

Example:

import React, { Component } from "react"

import Badge from "phoenix-ui/lib/badge"
import Code from "./code/code"

export default class badge extends Component{
    render(){
        return(
            <div>
                <h2 className="comp-title">Badge</h2>
                <h3 className="comp-type">默认颜色</h3>
                <div className="content">
                    <Badge>1</Badge>
                    <Badge>10</Badge>
                    <Badge>Hot</Badge>
                </div>
                <h3 className="comp-type">phStyle 标记颜色</h3>
                <div className="content">
                    <Badge phStyle="primary">New</Badge>
                    <Badge phStyle="success">New</Badge>
                    <Badge phStyle="info">New</Badge>
                    <Badge phStyle="danger">New</Badge>
                    <Badge phStyle="error">New</Badge>
                    <Badge phStyle="warning">New</Badge>
                </div>
                <Code target="badge-phstyle" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/badge/index.js:30

样式前缀

Default:

'badge'

phStyle

String

Defined in src/badge/index.js:37

标记颜色[default、primary、warning、danger、info、error、success], 默认primary

Default:

'default'