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) |