タブ
タブを使用してコンテンツのセクションを表示します。
タブはコンテンツのセクションであり、一度に 1 つのコンテンツパネルが表示されます。現在表示されているパネルの上端に沿って、タブエレメントのリストが並べられます。
Tabs
コンポーネントをアプリに追加するには、以下のようにします。
import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui';
基本的なタブ
<Tabs fitted> <TabList> {[1, 2].map((i) => ( <Tab key={i} tabKey={i}>Tab {i}</Tab> ))} </TabList> <TabPanels> {[1, 2].map((i) => ( <TabPanel key={i} tabKey={i}> <Box css={{background: 'container', padding: 'large'}}>Tab panel {i}</Box> </TabPanel> ))} </TabPanels> </Tabs>
Props
Prop | Type |
---|---|
children Required |
|
fitted |
|
onSelectionChange |
|
selectedKey |
|
size |
|
小さなタブ
<Tabs size="small"> <TabList> {[1, 2, 3, 4, 5].map((i) => ( <Tab key={i} tabKey={i}>Tab {i}</Tab> ))} </TabList> <TabPanels> {[1, 2, 3, 4, 5].map((i) => ( <TabPanel key={i} tabKey={i}> <Box css={{background: 'container', padding: 'large'}}>Tab panel {i}</Box> </TabPanel> ))} </TabPanels> </Tabs>
無効化されたタブ
<Tabs size="large" fitted> <TabList> <Tab tabKey="1">Tab</Tab> <Tab tabKey="2">Another Tab</Tab> <Tab tabKey="3" disabled>Disabled Tab</Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <Box css={{background: 'container', padding: 'large'}}>Test Tab Panel 1</Box> </TabPanel> <TabPanel tabKey="2"> <Box css={{background: 'container', padding: 'large'}}>Test Tab Panel 2</Box> </TabPanel> <TabPanel tabKey="3"> <Box css={{background: 'container', padding: 'large'}}>Test Tab Panel 3</Box> </TabPanel> </TabPanels> </Tabs>
タブ
TabList
コンポーネントは、コンテンツの選択に対応します。 TabList
は Tab
コンポーネントのコレクションで構成されます。各 Tab
は、tabKey
プロパティで一意に識別できます。 map
関数を使用して Tab
コンポーネントをレンダリングする場合も、React のルールを満たすために key
を追加する必要があります 。
Props
Prop | Type |
---|---|
children Required |
|
disabled |
|
tabKey |
|
TabPanel
TabPanels
コンポーネントは、タブ付きのコンテンツパネルの表示に対応します。 TabPanels
は TabPanel
コンポーネントのコレクションで構成されます。各 TabPanel
は、tabKey
プロパティーで一意に識別できます。 map
関数を使用して TabPanel
コンポーネントをレンダリングする場合も、React のルールを満たすために key
を追加する必要があります 。
Props
Prop | Type |
---|---|
children Required |
|
tabKey |
|
制御タブ
Tabs
の selectedKey
プロパティを、Tab
および TabPanel
の tabKey
プロパティと組み合わせて使用し、制御コンポーネントを作成します。
<Tabs selectedKey={key} onSelectionChange={setSelectedKey}> <TabList> {['a', 'b', 'c', 'd', 'e'].map((key) => ( <Tab key={key} tabKey={key}>Tab {key}</Tab> ))} </TabList> <TabPanels> {['a', 'b', 'c', 'd', 'e'].map((key) => ( <TabPanel key={key} tabKey={key}> <Box css={{background: 'container', padding: 'large'}}>Tab panel {key}</Box> </TabPanel> ))} </TabPanels> </Tabs>
サポートされていない使用法
フラグメントのすべての子に同じキーが付与されている場合を除き、タブはフラグメント内の条件付きコンテンツをサポートしていません。
const UnsupportedExample = () => { const [result, setResult] = useState(null); return ( <Tabs> <TabList> <Tab tabKey="1"> <> {result && <Inline>View results</Inline>} {!result && <Inline>Create results</Inline>} </> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result && <Inline>Results</Inline>} {!result && <Inline>No results yet</Inline>} </> </TabPanel> </TabPanels> </Tabs> ); }
サポートされていない方法でタブを使用しないようにするため、フラグメントの代わりにコンポーネントを使用してください。 または、フラグメントの子すべてに共有の key
を付与してください。
const SupportedExample = () => { const [result, setResult] = useState(null); return ( <Tabs> <TabList> <Tab tabKey="1"> <Box> {result && <Inline>View results</Inline>} {!result && <Inline>Create results</Inline>} </Box> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result && <Inline key="tab-panel-result">Results</Inline>} {!result && <Inline key="tab-panel-result">No results yet</Inline>} </> </TabPanel> </TabPanels> </Tabs> ); }