Badge
English | 中文
Small numerical value or status descriptor for UI elements. It supports the following features:
- pure dot and number within dot two styles
- customize color
- friendly animation
Badge supports <Badge>{your component}</Badge> and <Badge/> two kinds of usages. When you pass a component as children to Badge (namely the first usage), the red point would be placed at the upper-right corner of your component automatically.
However, as the problem of overflow: visible is not supported on Android was not resolved until react-native@0.57 (change log and commit b81c8b5), Badge would be clipped on Android. Therefore, if your react-native's version is smaller than 0.57, you can use the second usage which renders a red point so that you can place it by yourself.
How to use
npm install @rn-components-kit/badge --save| Preview | Code |
|---|---|
 |
Demo1 Code |
 |
Demo2 Code |
 |
Demo3 Code |
 |
Demo4 Code |
Props
Reference
Props
style
Allow you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
dot
Determines whether it is rendered as a dot without number in it
| Type | Required | Default |
|---|---|---|
| string | no | true |
color
Determines the dot's color
| Type | Required | Default |
|---|---|---|
| string | no | '#F5222D' |
count
If you specify the count prop, you should set dot prop false as well (they are two exclusive modes). And in this case, this number would be rendered at the center of dot
| Type | Required | Default |
|---|---|---|
| number | no | 0 |
overflowCount
Max count to show. If count is greater than overflowCount, it will be displayed as ${overflowCount}+
| Type | Required | Default |
|---|---|---|
| number | no | 99 |
showZero
Determines whether it should be shown when count is 0
| Type | Required | Default |
|---|---|---|
| string | no | false |
offsetX
If you are not satisfied with the dot's position (upper-right corner), you can adjust it through offsetX/offsetY
| Type | Required | Default |
|---|---|---|
| number | no | 0 |
offsetY
If you are not satisfied with the dot's position (upper-right corner), you can adjust it through offsetX/offsetY
| Type | Required | Default |
|---|---|---|
| number | no | 0 |