Components
Chip
Chip은 사용자가 특정 액션 혹은 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다.
개요
옵션 테이블
| 속성 | 값 | 기본값 |
|---|---|---|
| size | medium, small | medium |
| layout | with text, icon only | with text |
| selected | true, false | false |
| disabled | true, false | false |
| prefix icon | icon | |
| suffix icon | icon |
링크
스펙
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | colorDuration | |
| colorTimingFunction | |||
| cornerRadius | |||
| prefixIcon | paddingLeft | ||
| prefixAvatar | size | ||
| suffixIcon | paddingRight | ||
| label | fontWeight | ||
| paddingX | |||
| icon | color |
variant=solid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| pressed | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| disabled | root | opacity | 0.5 |
| selected | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| selected, pressed | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| selected, disabled | root | opacity | 0.5 |
variant=outlineStrong
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | strokeColor | |
| strokeWidth | 1px | ||
| color | |||
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| pressed | root | strokeColor | |
| strokeWidth | 1px | ||
| color | |||
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| disabled | root | opacity | 0.5 |
| selected | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| selected, pressed | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| selected, disabled | root | opacity | 0.5 |
variant=outlineWeak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | strokeColor | |
| strokeWidth | 1px | ||
| color | |||
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| pressed | root | strokeColor | |
| strokeWidth | 1px | ||
| color | |||
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| disabled | root | opacity | 0.5 |
| selected | root | strokeColor | |
| strokeWidth | 1px | ||
| color | |||
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| selected, pressed | root | strokeColor | |
| strokeWidth | 1px | ||
| color | |||
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| icon | color | ||
| selected, disabled | root | opacity | 0.5 |
size=small
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | height | 32px |
| paddingX | |||
| label | fontSize | ||
| lineHeight | |||
| prefixIcon | size | ||
| suffixIcon | size | ||
| prefixAvatar | size | ||
| icon | size |
size=medium
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | height | 36px |
| paddingX | |||
| label | fontSize | ||
| lineHeight | |||
| prefixIcon | size | ||
| suffixIcon | size | ||
| prefixAvatar | size | ||
| icon | size |
size=large
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | height | 40px |
| paddingX | |||
| label | fontSize | ||
| lineHeight | |||
| prefixIcon | size | ||
| paddingLeft | |||
| suffixIcon | size | ||
| prefixAvatar | size | ||
| icon | size |
size=small, layout=iconOnly
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minWidth |
size=medium, layout=iconOnly
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minWidth |
size=large, layout=iconOnly
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minWidth |
Last updated on