Tabs
Tabs are used to switch between different views of content within a given view in George.
A typical example is to use Tabs to toggle a view between two different states of group of elements, like showing either Open or Completed Orders.
System Tabs
This is the default variant of Tabs that are to be used in George.
iOS iOS
The native platform component “Segmented Control” is the preferred way of showing a tabbed view on iOS.
Android Android
A custom tab implementation is the preferred way of showing a tabbed view on Android.
Rules For Android
- Use Composable
Tabs - Use a
PagerStateto synchronize state betweenTabsandHorizontalPageror otherPagerimplementations.
Custom Tabs
This special variant is currently only used within Products and is the main element to navigate between different sections of a Product’s features & content.
The styling is aligned across Android & iOS to guarantee a unified design:
The technical difference to System Tabs is that Custom Tabs can exceed the device content width and overflowing tab items can be accessed by horizontally scrolling the Tab row:
Rules For Android
- System tabs and custom tabs are the same on Android.
Tokens
| Element | Token |
|---|---|
| label | color.state.info |
| base | color.surface.primary |