Chip
Chip은 사용자와의 상호작용을 전제로 하며, 선택, 삭제, 드래그 등 다양한 형태로 사용됩니다.
정보를 작고 간결하게 나타내는 인터랙션 컴포넌트로, 둥근 직사각형 형태에 아이콘, 텍스트, 닫기 버튼 등을 조합하여 구성됩니다.
라벨, 상태 표시 등 짧은 정보를 강조하는 데애도 사용됩니다.
Shapes
요쇼의 Default 형태는 Squircle 또는 Square 중 하나로 설정하며, 프로젝트 초기 단계에서 선택하여 전체 UI에 일관되게 적용합니다.
| Default | is-pill |
|---|---|
|
Text
|
Text
|
Sizes
| is-sm | Default (medium) | is-lg |
|---|---|---|
|
Text
|
Text
|
Text
|
Variants
| Variant / Color | is-outline | is-filled |
|---|---|---|
| is-green |
Text
|
Text
|
| is-brown |
Text
|
Text
|
| is-navy |
Text
|
Text
|
| is-purple |
Text
|
Text
|
| is-teal |
Text
|
Text
|
| is-red |
Text
|
Text
|
| is-blue |
Text
|
Text
|
| is-olive |
Text
|
Text
|
| is-gray |
Text
|
Text
|
Patterns
프로젝트에서 사용되는 UI 패턴들을 모아두는 섹션
| 1 |
타입1
타입2
타입3
타입3
타입3
타입3
타입3
타입4
타입5
|
|---|---|
| 2 |
타입1
타입2
타입3
타입4
타입5
타입6
타입7
타입8
타입9
|
| 3 |
타입1
타입2
타입3
타입4
타입5
타입6
타입7
타입8
타입9
|
| 4 |
타입1
타입2
타입3
타입4
타입5
타입6
타입7
타입8
타입9
|
| 5 |
타입1
타입2
타입3
타입4
타입5
타입6
타입7
타입8
타입9
|