Tabs
다른 탭 간에 전환과 이동을 쉽게 할 수 있는 요소입니다.
Anatomy
- Root
- Tab List
- Tab
- Panel Group
- Panel
Root
States
| State | Values | Default Value | Description |
| selectedValue | string, null | null | 선택된 Radio의 Value, 없을 시 null |
Contexts
| Context | Values | Default Value | Description |
| isDisabled | true, false | false | True일 경우, Tabs 전체가 유저와 상호작용 하지 않음 |
| isSwipeable | true, false | true | True일 경우, 모바일에서 Panel Group이 스왑 기능이 활성화 됨 |
Tab
States
| Context | Values | Default Value | Description |
| isHovered | true, false | false | Tab 영역 내에 포인터가 존재할 시 True로 전환 |
| isFocused | true, false | false | Tab에 Focus가 잡혀있을 때 True로 전환 |
| isPressed | true, false | false | Tab 영역을 누르고 있을 때 True로 전환 |
Contexts
| Context | Values | Default Value | Description |
| value | string | ||
| isDisabled | true, false | false | True일 경우, Tab이 유저와 상호작용하지 않음 |
Derived States
| State | Values | Statement | Description |
| isDisabled | true, false | root.isDisabled || isDisabled | |
| isSelected | true, false | root.selectedValue == value |
Actions
| Action | From | Condition | To |
| SELECT(tab) | - | !tab.isDisabled && !tab.isReadonly | root.selctedValue = tab.value, root.currentTabIndex = tab.value |
| FOCUS(tab) | - | !tab.isDisabled | root.focusedValue = tab.value |
| BLUR(tab) | - | root.focusedValue = null | |
| HOVER_IN(tab) | - | !tab.isDisabled | root.hoveredValue = tab.value |
| HOVER_OUT(tab) | - | !tab.isDisabled | root.hoveredValue = tab.value |
| PRESS_IN(tab) | - | !tab.isDisabled | root.pressedValue = tab.value |
| PRESS_OUT(tab) | - | !tab.isDisabled | root.pressedValue = tab.value |
Panel Group
Actions
| Action | From | Condition | To |
| TOUCH_START(panel group) | - | root.isSwipeable | root.isSwiping = true, root.touchStartX = event.x |
| TOUCH_MOVE(panel group) | - | root.isSwipeable | root.currentTabOffsetX = distance |
| TOUCH_END(panel group) | - | root.isSwipeable && distance > 0 | root.isSwiping = false, root.selectedValue = tab.nextValue |
| - | root.isSwipeable && distance =< 0 | root.isSwiping = false, root.selectedValue = tab.prevValue |
Triggers
Web
| Part | Event | Action |
| Tab | PointerUp | SELECT(tab) |
| Tab | PointerDown | PRESS_DOWN(tab) |
| Tab | PointerUp | PRESS_UP(tab) |
| Tab | PointerOver | HOVER_IN(tab) |
| Tab | PointerLeave | HOVER_OUT(tab) |
| Tab | Focus | FOCUS(tab) |
| Tab | Blur | BLUR(tab) |
| Tab | KeyUp(Space) | SELECT(tab) |
| Tab | KeyDown(Space) | PRESS_IN(tab) |
| Tab | KeyUp(Space) | PRESS_OUT(tab) |
Mobile
| Part | Event | Action |
| Panel Group | TouchStart | TOUCH_START(panel group) |
| Panel Group | TouchMove | TOUCH_MOVE(panel group) |
| Panel Group | TouchEnd | TOUCH_END(panel group) |