@combine-labs/combine-polaris
Version:
Combine Lab's product component library. Forked from Shopify's Polaris.
198 lines (152 loc) • 4.07 kB
Markdown
---
name: Tabs
category: Navigation
platforms:
- android
- ios
- web
keywords:
- layout
- navigate
- organize
- list views
- list filters
- fitted tabs
- segmented controls
- scrollable
---
# Tabs
Use to alternate among related views within the same context.
---
## Best practices
Tabs should:
- Represent the same kind of content, such as a list-view with different filters applied. Don’t use tabs to group content that is dissimilar.
- Only be active one at a time.
- Not force merchants to jump back and forth to do a single task. Merchants should be able to complete their work and find what they need under each tab.
- Not be used for primary navigation.
---
## Content guidelines
### Tabs
Tabs should:
- Be clearly labeled to help differentiate the different sections beneath them.
- Have short and scannable labels, generally kept to single word.
- Relate to the section of Shopify they’re on. Imagine the page section title is an invisible noun after the tab. For example, the tabs for the orders section are:
- All
- Open
- Unfulfilled
- Unpaid
The tabs for the gift cards section are:
- All
- New
- Partially used
- Used
- Disabled
And for the customers section, the tabs are:
- All
- New
- Returning
- Abandoned checkouts
- Email subscribers
Where possible, follow this pattern when writing tabs.
---
## Examples
### Default tabs
Use for most cases, especially when the number of tabs may be more than three.
```jsx
class TabsExample extends React.Component {
state = {
selected: 0,
};
handleTabChange = (selectedTabIndex) => {
this.setState({selected: selectedTabIndex});
};
render() {
const {selected} = this.state;
const tabs = [
{
id: 'all-customers',
content: 'All',
accessibilityLabel: 'All customers',
panelID: 'all-customers-content',
},
{
id: 'accepts-marketing',
content: 'Accepts marketing',
panelID: 'accepts-marketing-content',
},
{
id: 'repeat-customers',
content: 'Repeat customers',
panelID: 'repeat-customers-content',
},
{
id: 'prospects',
content: 'Prospects',
panelID: 'prospects-content',
},
];
return (
<Card>
<Tabs tabs={tabs} selected={selected} onSelect={this.handleTabChange} />
<Card.Section title={tabs[selected].content}>
<p>Tab {selected} selected</p>
</Card.Section>
</Card>
);
}
}
```
<!-- content-for: android -->
<!-- /content-for -->
<!-- content-for: ios -->
<!-- /content-for -->
### Fitted tabs
Use when tabs contain a few (2 or 3) items within a narrow column.
```jsx
class FittedTabsExample extends React.Component {
state = {
selected: 0,
};
handleTabChange = (selectedTabIndex) => {
this.setState({selected: selectedTabIndex});
};
render() {
const {selected} = this.state;
const tabs = [
{
id: 'all-customers',
content: 'All',
accessibilityLabel: 'All customers',
panelID: 'all-customers-content',
},
{
id: 'accepts-marketing',
content: 'Accepts marketing',
panelID: 'accepts-marketing-content',
},
];
return (
<Card>
<Tabs
tabs={tabs}
selected={selected}
onSelect={this.handleTabChange}
fitted
/>
<Card.Section title={tabs[selected].content}>
<p>Tab {selected} selected</p>
</Card.Section>
</Card>
);
}
}
```
<!-- content-for: android -->
<!-- /content-for -->
<!-- content-for: ios -->
Also known as [Segmented controls](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/) on iOS.
<!-- /content-for -->