Tabs

다른 탭 간에 전환과 이동을 쉽게 할 수 있는 요소입니다.

Anatomy

  1. Root
  2. Tab List
  3. Tab
  4. Panel Group
  5. Panel

Root

States

StateValuesDefault ValueDescription
selectedValuestring, nullnull선택된 Radio의 Value, 없을 시 null

Contexts

ContextValuesDefault ValueDescription
isDisabledtrue, falsefalseTrue일 경우, Tabs 전체가 유저와 상호작용 하지 않음
isSwipeabletrue, falsetrueTrue일 경우, 모바일에서 Panel Group이 스왑 기능이 활성화 됨

Tab

States

ContextValuesDefault ValueDescription
isHoveredtrue, falsefalseTab 영역 내에 포인터가 존재할 시 True로 전환
isFocusedtrue, falsefalseTab에 Focus가 잡혀있을 때 True로 전환
isPressedtrue, falsefalseTab 영역을 누르고 있을 때 True로 전환

Contexts

ContextValuesDefault ValueDescription
valuestring
isDisabledtrue, falsefalseTrue일 경우, Tab이 유저와 상호작용하지 않음

Derived States

StateValuesStatementDescription
isDisabledtrue, falseroot.isDisabled || isDisabled
isSelectedtrue, falseroot.selectedValue == value

Actions

ActionFromConditionTo
SELECT(tab)-!tab.isDisabled && !tab.isReadonlyroot.selctedValue = tab.value, root.currentTabIndex = tab.value
FOCUS(tab)-!tab.isDisabledroot.focusedValue = tab.value
BLUR(tab)-root.focusedValue = null
HOVER_IN(tab)-!tab.isDisabledroot.hoveredValue = tab.value
HOVER_OUT(tab)-!tab.isDisabledroot.hoveredValue = tab.value
PRESS_IN(tab)-!tab.isDisabledroot.pressedValue = tab.value
PRESS_OUT(tab)-!tab.isDisabledroot.pressedValue = tab.value

Panel Group

Actions

ActionFromConditionTo
TOUCH_START(panel group)-root.isSwipeableroot.isSwiping = true, root.touchStartX = event.x
TOUCH_MOVE(panel group)-root.isSwipeableroot.currentTabOffsetX = distance
TOUCH_END(panel group)-root.isSwipeable && distance > 0root.isSwiping = false, root.selectedValue = tab.nextValue
-root.isSwipeable && distance =< 0root.isSwiping = false, root.selectedValue = tab.prevValue

Triggers

Web

PartEventAction
TabPointerUpSELECT(tab)
TabPointerDownPRESS_DOWN(tab)
TabPointerUpPRESS_UP(tab)
TabPointerOverHOVER_IN(tab)
TabPointerLeaveHOVER_OUT(tab)
TabFocusFOCUS(tab)
TabBlurBLUR(tab)
TabKeyUp(Space)SELECT(tab)
TabKeyDown(Space)PRESS_IN(tab)
TabKeyUp(Space)PRESS_OUT(tab)

Mobile

PartEventAction
Panel GroupTouchStartTOUCH_START(panel group)
Panel GroupTouchMoveTOUCH_MOVE(panel group)
Panel GroupTouchEndTOUCH_END(panel group)