Skip to content Shopify logoPolaris

Tabs

Use to alternate among related views within the same context.

Use for most cases, especially when the number of tabs may be more than three.

import{LegacyCard,Tabs}from'@shopify/polaris';import{useState,useCallback}from'react';functionTabsDefaultExample(){const[selected,setSelected]=useState(0);consthandleTabChange=useCallback((selectedTabIndex:number)=>setSelected(selectedTabIndex),[],);consttabs=[{id:'all-customers-1',content:'All',accessibilityLabel:'All customers',panelID:'all-customers-content-1',},{id:'accepts-marketing-1',content:'Accepts marketing',panelID:'accepts-marketing-content-1',},{id:'repeat-customers-1',content:'Repeat customers',panelID:'repeat-customers-content-1',},{id:'prospects-1',content:'Prospects',panelID:'prospects-content-1',},];return(<Tabstabs={tabs}selected={selected}onSelect={handleTabChange}><LegacyCard.Sectiontitle={tabs[selected].content}><p>Tab{selected}selected</p></LegacyCard.Section></Tabs>);}

Props

Want to help make this feature better? Pleaseshare your feedback.

interface TabsProps
tabs TabProps[]

The items that map to each Tab.
children? React.ReactNode

Content to display in tabs.
selected number

The index of the currently selected Tab.
disabled? boolean

Whether the Tabs are disabled or not.
onSelect? (selectedTabIndex:number) =>void

Optional callback invoked when a Tab becomes selected.
canCreateNewView? boolean

Whether to show the add new view Tab.
newViewAccessibilityLabel? string

Label for the new view Tab. Will override the default of "Create new view".
onCreateNewView? (value:string) =>Promise<boolean>

Optional callback invoked when a merchant saves a new view from the Modal.
fitted? boolean

Fit tabs to container.
disclosureText? string

Text to replace disclosures horizontal dots.

最佳实践

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.

  • 有短和可校验的标签,一般保存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

和the customers section, the tabs are:

  • All
  • New
  • Returning
  • Abandoned checkouts
  • Email subscribers

Where possible, follow this pattern when writing tabs.