Badge📢

It is used to describe the component state. When you see it, you will be very anxious and want to eliminate it

Code demonstration

import { UBadge } from 'ungeui';

Basic useage❗

30
30
30
Basic useageIt matches the avatar and represents unread news

Different background colors🌈

3
3
3
🌈Basic useagemaybe you want more than red, you can switch between different background colors

Upper and lower limits🚧

97
🚧Basic useageif you don't want to see the explosion message, set an upper limit

Display lower limit value⛔

3
3
⛔Basic useageis the lower limit displayed or hidden when the minimum value is reached?

Dot🔵🔴🟠🟢

🔵Basic useagequietly remind you of new messages

Other combinations📁

Text Message
Button
5
📁Basic useageit can also be used in other places

Props

PropertyDescriptionTypeDefault
valuedisplayed value | number | stringundefined
colorbackground color | string#FF4D4F
maxupper limit | numberundefined
minlower limit | number0
hideLowerLimitwhether to hide when the lower limit is reached | booleanfalse
dotwhether to display as dots | booleanfalse

Last Updated:4/20/2022, 1:27:49 PM