mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-16 09:39:10 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity
c5198a4d11
ant-design/components/badge/demo/mix.md
Wuxh 647a03af09
fix(badge): fix the color cannot be customized when count is 0 (#39062) 
* test(badge): add case

* fix(badge): fix the color cannot be customized when count is 0

* test(badge): update snapshots

* docs(badge): update demo

* test: update case

* test(badge): update snapshots
2022-11-29 09:49:18 +08:00

1.4 KiB
Raw Blame History

order title debug
99
zh-CN en-US
各种混用的情况 Mixed usage
true

zh-CN

测试 count stauts color dot 共用的情况。

en-US

Using count/dot with custom stauts/color.

import { Avatar, Badge } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Badge count={5} status="success">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={5} status="warning">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={5} color="blue">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={5} color="#fa541c">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot status="success">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot status="warning">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot color="blue">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge dot color="#fa541c">
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={0} showZero />
    <Badge count={0} showZero color="blue" />
    <Badge count={0} showZero color="#f0f" />
    <Badge count={0} showZero>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={0} showZero color="blue">
      <Avatar shape="square" size="large" />
    </Badge>
  </>
);

export default App;