Appearance
StatusIndicator
StatusIndicator는 상태를 시각적으로 표시하는 데 사용되는 컴포넌트입니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'default' | 'fill' | 'dot' | 'default' | 인디케이터의 스타일 타입입니다. |
color | 'green' | 'red' | 'orange' | 'blue' | 'yellow' | N/A | 인디케이터의 색상입니다. (필수) |
size | 'small' | 'medium' | 'large' | 'medium' | 인디케이터의 크기입니다. |
Usage
Default
Running
vue
<StatusIndicator color="blue">Running</StatusIndicator>Fill
Running
vue
<StatusIndicator type="fill" color="blue">Running</StatusIndicator>Dot
dot 타입은 텍스트 왼쪽에 색상 점을 표시합니다.
Running
vue
<StatusIndicator type="dot" color="blue">Running</StatusIndicator>Examples
Default
Blue
Red
Orange
Yellow
Green
Blue
Red
Orange
Yellow
Green
Blue
Red
Orange
Yellow
Green
Fill
Blue
Red
Orange
Yellow
Green
Blue
Red
Orange
Yellow
Green
Blue
Red
Orange
Yellow
Green
Dot
Blue
Red
Orange
Yellow
Green
Blue
Red
Orange
Yellow
Green
Blue
Red
Orange
Yellow
Green