Tab - Expanded Tab List

The expanded tab list is a component that allows for viewing of numerous tab items at a glance. This element is used as a pair with a flexible tab element, and cannot be used alone.

  • Anatomy
  • States - Expanded Tab List Items
  • Behavior
  • Open Extension Tab List
  • Close Extension Tab List
  • Moving Tabs
  • Usage
  • Sizing
  • Height
  • Width

Anatomy

  1. Container
  2. Expanded Tab List Item
  3. Title
  4. Collapse Button

States - Expanded Tab List Items

The Selected and Unselected states are available and the selection states cannot be duplicated.

Behavior

Open Extension Tab List

Users can use the expand button on the flexible tab to open a component.

Close Extension Tab List

Users can tap the collapse button or the dimmed area at the bottom to close a component.

Moving Tabs

When a list item is selected, the expanded tab list is closed and the selected tab is focused. The position of the focused tab is decided according to the flexible tab focusing rules.

Usage

alt

Don't

Do not use the expanded tab if there are only a small number of tabs.

Sizing

Height

  Element Properties
1 Tab Area Height: Flexible
2 List Area Height: Unchangeable (Fixed)
3 Dimmed Area Minimun Height: 78
4 Home Indicator (Safe Area)  

Width

Item Rows and Column

The container becomes larger or smaller according to the text length. The space between the items has a fixed value (12), and the space between rows increases as the container becomes larger.

  Element Properties
1 Padding

Value: Unchageable

  • Left&Right Padding: 20
2 Margin Between Items

Value: Unchageable

  • Gap: 8
3 Margin Between Rows

Value: Unchageable

  • Gap: 12
Container Size and Break Rows

The left and right margins of a container are fixed (16), and one of the items will be sent to the next row when the row becomes longer.

  Element Properties
1 Padding
  • Value: 16, Unchangeable
2 Content Area Width
  • Flexible
  • Screen Width - Paddings