CSS: badge ​

.instui-badge — 대상의 모서리에 놓이는 작은 카운트 또는 상태 점.

대상 위에 배지를 배치하려면 둘 다 .instui-badge-wrapper(위치 앵커)로 감싸고 -placement-* 수식어로 배지를 고정하세요.

Source: badge.css

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/badge.css";

데모 ​

예제들 ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

구조 ​

배지는 자체적으로 인라인으로 렌더되거나, 대상 위에 고정하는 선택적 instui-badge-wrapper 내부에 렌더될 수 있습니다.

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자 ​

수정자설명
.-color-danger주의/오류 카운트.
.-color-inverseOn-dark: a light chip with dark text.
.-color-success긍정/완료 카운트.
.-placement-bottom-end하단-끝(corner) 위치.
.-placement-bottom-start하단-시작(corner) 위치.
.-placement-end-center끝(edge) 가장자리에 중심을 맞춘 위치.
.-placement-start-center시작(edge) 가장자리에 중심을 맞춘 위치.
.-placement-top-end상단-끝(corner) 위치.
.-placement-top-start상단-시작(corner) 위치.
.-pulse펄스(맥박)하는 주목 링.
.-standalone인라인으로 렌더되며, 대상의 모서리 위에 위치하지 않습니다.
.-type-notification카운트 없이 점만 표시.

의사 요소 ​

의사 요소설명
::before배지의 강조 색상으로 그려진 펄스 주목 링(-pulse 변형).

사용자 정의 속성 ​

속성타입기본설명
--pantoken-badge-accent<color>—칩 채우기; 각 -color-* 변형과 펄스 링은 이 색에서 읽습니다.
--pantoken-badge-text<color>—강조색과 짝을 이루어 가독성을 유지하는 텍스트 색상.

애니메이션 ​

애니메이션설명
pantoken-badge-pulse펄스 링 애니메이션.

사용된 토큰 ​

Token타입값
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

관련 항목 ​

  • pill — 인라인 레이블-칩 대응체.