Dot
Dot 컴포넌트는 상태나 알림을 시각적으로 표시하기 위한 작은 원형 표시기입니다. 다양한 색상과 크기 옵션을 제공하여 인터페이스에 시각적 표시를 쉽게 추가할 수 있습니다.
인터랙티브 예제
아래 UI에서 다양한 속성을 직접 변경하여 Dot의 모습을 확인해보세요.
colorselect
sizeselect
classNamestring
추가 CSS 클래스
기본 사용법
import { Dot } from '@ncds/ui-admin';
function App() {
return <Dot />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'sm' | 점의 크기 |
| color | 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled' | 'neutral' | 점의 색상 |
상세 예제
색상
Dot 컴포넌트는 다양한 색상 옵션을 제공합니다.
neutral
error
warning
success
blue
pink
disabled
크기
Dot 컴포넌트는 세 가지 크기를 지원합니다.
sm (6px)
md (8px)
lg (10px)
실제 사용 예시
상태 표시기로 Dot 컴포넌트를 사용하는 일반적인 예시입니다.
온라인
오프라인
유지보수 중
대기 중
접근성 고려사항
Dot 컴포넌트는 주로 시각적 표시기로 사용되므로, 접근성을 위해 항상 적절한 텍스트 설명과 함께 사용하는 것이 좋습니다.
시스템 상태: 정상
커스텀 스타일링
추가 클래스를 전달하여 Dot 컴포넌트의 스타일을 커스터마이즈할 수 있습니다.