npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uiw/react-badge

v4.22.3

Published

Badge component

Downloads

1,074

Readme

Badge 标记

Buy me a coffee Open in unpkg NPM Downloads npm version

出现在按钮、图标旁的数字或状态标记。

import { Badge } from 'uiw';
// or
import Badge from '@uiw/react-badge';

基础用法

import React from 'react';
import { Badge, Row, Col, Avatar, Divider } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Row gutter={20}>
        <Col fixed>
          <Badge count={9}>
            <Avatar shape="square" size="large" />
          </Badge>
        </Col>
        <Col fixed>
          <Badge count={100}>
            <Avatar shape="square" size="large" />
          </Badge>
        </Col>
        <Col>
          <Badge dot count={9}>
            <Avatar shape="square" size="large" />
          </Badge>
        </Col>
      </Row>
      <Divider />
      <Badge count={12}>
        评论
      </Badge>
    </div>
  );
}

封顶数字

不包裹任何元素即是独立使用,可自定样式展现。

import React from 'react';
import { Badge, Row, Col, Avatar, Divider } from 'uiw';

const styl={ marginRight: 20, display: 'inline-block' }

export default function Demo() {
  return (
    <Row gutter={20}>
      <Col fixed>
        <Badge count={99}>
          <Avatar shape="square" size="large" />
        </Badge>
      </Col>
      <Col fixed>
        <Badge count={100} style={{ backgroundColor: '#87d068' }}>
          <Avatar shape="square" size="large" />
        </Badge>
      </Col>
      <Col fixed>
        <Badge count={99} max={10} style={styl}>
          <Avatar shape="square" size="large" />
        </Badge>
      </Col>
      <Col fixed>
        <Badge count={100} max={999} style={styl}>
          <Avatar shape="square" size="large" />
        </Badge>
      </Col>
      <Col fixed>
        <Badge count={100} max={999} style={styl}>
          <Avatar shape="square" size="large" />
        </Badge>
      </Col>
    </Row>
  )
}

独立使用

不包裹任何元素即是独立使用,可自定样式展现。

import React from 'react';
import { Badge, Row, Col } from 'uiw';

export default function Demo() {
  return (
    <Row gutter={10}>
      <Col fixed>
        <Badge count={25} />
      </Col>
      <Col fixed>
        <Badge count={4} style={{ backgroundColor: '#fff', color: '#f04134', boxShadow: 'rgb(217, 217, 217) 0px 0px 0px 1px inset' }} /> 
      </Col>
      <Col fixed>
        <Badge count={109} style={{ backgroundColor: '#87d068' }} /> 
      </Col>
    </Row>
  )
}

小红点

以红点的形式标注需要关注的内容。

import React from 'react';
import { Badge, Icon } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Badge dot style={{ marginRight: 10 }}>
        数据查询
      </Badge>
      <Badge dot count={4}>
        <Icon type='mail-o' />
      </Badge>
    </div>
  );
}

状态点

用于表示状态的小圆点,可以设置 processing={true} 让状态点,显示动画效果。

import React from 'react';
import { Badge } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Badge color="#28a745" />
      <Badge color="#008EF0" />
      <Badge color="#dc3545" />
      <Badge color="#393E48" />
      <Badge color="#ffc107" />
      <Badge color="#f95c2b" />
      <Badge color="#dc3545"/>
      <Badge color="#c2c2c2"/>
      <Badge color="#F95C2B" processing />
      <br />
      <Badge color="#28a745">Success</Badge>
      <br />
      <Badge color="#dc3545">Error</Badge>
      <br />
      <Badge color="#c2c2c2">Default</Badge>
      <br />
      <Badge color="#008EF0" processing>Processing</Badge>
      <br />
      <Badge color="#ffc107">Warning</Badge>
      <Badge color="#ffc107" processing>Warning</Badge>
    </div>
  );
}

API

| 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | | style | 默认设置计数圆点样式,设置 colorstyle 设置外层节点样式 | Object | - | | count | 展示的数字 | Number | - | | max | 最大值,超过最大值会显示 '{max}+' | Number | 99 | | dot | 不展示数字,只有一个小红点 | Boolean | false | | processing | 不展示数字,只有一个小红点 | Boolean | - | | color | 设置 Badge 为状态点的颜色 | String | - |