Badge
Badge
UI 요소에 대한 작은 숫자 값 또는 상태 설명자입니다.
가져오기import{ Badge }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
배지는 일반적으로 알림 또는 프로필 사진에 근접하여 눈길을 끌도록 표시되며, 보통 읽지 않은 메시지 수가 표시됩니다.
Common props ref：Common props
| 프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
|---|---|---|---|---|
| color | 배지 도트 색상의 사용자 지정 | string | - | |
| count | 배지에 표시할 숫자, overflowCount보다 큰 경우 ${overflowCount}+로 표시되고, 0일 경우 숨김 | ReactNode | - | |
| classNames | 시맨틱 DOM 클래스 | Record<SemanticDOM, string> | - | 5.7.0 |
| dot | count 대신 빨간 색 도트를 표시 여부 | boolean | false | |
| offset | 배지 도트의 오프셋 설정 | [number, number] | - | |
| overflowCount | 표시할 최대 개수 | number | 99 | |
| showZero | count가 0일 때 배지를 표시할지에 대한 여부 | boolean | false | |
| size | count가 설정되어 있다면, size는 배지의 크기를 설정 | default | small | - | - |
| status | 배지를 상태 표시 도트로 설정 | success | processing | default | error | warning | - | |
| styles | 시멘틱 DOM 스타일 | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
| text | status가 설정되어 있다면, text는 dot 상태 표시 내용을 설정 | ReactNode | - | |
| title | 배지 위에 커서가 올라갔을 때 표시할 내용 | string | - |
| 프로퍼티 | 설명 | 타입 | 기본값 | 버전 |
|---|---|---|---|---|
| color | 리본 색상의 사용자 지정 | string | - | |
| placement | 리본의 배치, start 와 end를 통한 텍스트 방향 설정 (RTL 혹은 LTR) | start | end | end | |
| text | 리본 내의 콘텐츠 | ReactNode | - |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| dotSize | 도트 배지의 크기 | number | 6 |
| indicatorHeight | 배지의 높이 | string | number | 20 |
| indicatorHeightSM | 작은 배지의 높이 | string | number | 14 |
| indicatorZIndex | 배지의 z-index | string | number | auto |
| statusSize | 상태 배지의 크기 | number | 6 |
| textFontSize | 배지 텍스트의 글씨 크기 | number | 12 |
| textFontSizeSM | 작은 배지 텍스트의 글씨 크기 | number | 12 |
| textFontWeight | 배지 텍스트의 글씨 굵기 | string | number | normal |
기본적인 사용. 배지는 count가 0일 때 숨겨지지만, showZero 를 통해 표시할 수 있습니다.
overflowCount보다 카운트가 클 경우 ${overflowCount}+가 표시됩니다. 기본 overflowCount값은 99입니다.
카운트가 변경되면 애니메이션이 적용됩니다.
배지 도트의 오프셋을 설정합니다. 기본 위치의 왼쪽과 위쪽에서 상태 도트의 오프셋을 나타내는 [left, top]형식입니다.
상태가 포함된 독립형 배지.
리본 배지를 사용합니다.
사용자 지정 status/color와 함께 count/dot 사용.
Colorful badge 사용 시 count를 지원합니다.
어떠한 요소도 감싸지 않고 독립적으로 사용되며 맞춤형 연출이 가능합니다.
오른쪽 상단의 배지는 빨간색으로 한정되어 있습니다.
특정 카운트 없이 빨간색 배지만 표시됩니다. 카운트가 0이면 점이 표시되지 않습니다.
배지를 통해 링크될 수 있도록 a태그로 감쌀 수 있습니다.
숫자 배지의 크기를 설정합니다.
다양한 상황에서 사용할 수 있는 다양한 색상의 배지 스타일이 설정되어 있습니다. 사용자 지정 색상을 위해 헥스 색상 문자열로 설정할 수도 있습니다.
Buggy!
커서가 올라갔을 때 배지가 count 대신 title를 표시합니다.
Component Token 디버그
