Stripe Apps の Tabs コンポーネント
Tab を使用してコンテンツのセクションを表示します。
Tab (タブ) は、一度に 1 つのコンテンツパネルとして表示されるコンテンツのセクションです。現在表示されているパネルの上端に沿って、タブエレメントのリストが並べられます。
Tabs コンポーネントをアプリに追加するには、以下のようにします。
import {Tabs, Tab, TabList, TabPanel, TabPanels} from '@stripe/ui-extension-sdk/ui';
<Box css={{width: 'fill'}}> <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={{backgroundColor: 'container', padding: 'large'}}> Tab panel {i} </Box> </TabPanel> ))} </TabPanels> </Tabs> </Box>
Tabs プロパティ
| プロパティー | タイプ |
|---|---|
| 必須
1 つ以上の |
| オプション
|
| オプション
|
| オプション
選択した |
| オプション
コンポーネントのサイズ。 |
Tab
TabList コンポーネントはコンテンツの選択に対応しています。TabList は Tab コンポーネントのコレクションで構成されます。各 Tab は、tabKey プロパティで一意に識別できます。map 関数を使用して Tab コンポーネントをレンダリングする場合も、React のルールを満たすために key を追加する必要があります。
TabList プロパティ
| プロパティー | タイプ |
|---|---|
| 必須
1 つ以上の |
Tab プロパティ
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| オプション
タブを無効化するかどうか。 |
| オプション
|
| オプション非推奨 代わりに
|
TabPanel
TabPanels コンポーネントは、タブ付きのコンテンツパネルの表示に対応します。TabPanels は TabPanel コンポーネントのコレクションで構成されます。各 TabPanel は、tabKey プロパティで一意に識別できます。map 関数を使用して TabPanel コンポーネントをレンダリングする場合も、React のルールを満たすために key を追加する必要があります 。
TabPanel プロパティ
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| オプション
|
| オプション非推奨 代わりに
|
小さな Tab
<Box css={{width: 'fill'}}> <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={{backgroundColor: 'container', padding: 'large'}}> Tab panel {i} </Box> </TabPanel> ))} </TabPanels> </Tabs> </Box>
無効化された Tab
<Box css={{width: 'fill'}}> <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={{backgroundColor: 'container', padding: 'large'}}> Test Tab Panel 1 </Box> </TabPanel> <TabPanel tabKey="2"> <Box css={{backgroundColor: 'container', padding: 'large'}}> Test Tab Panel 2 </Box> </TabPanel> <TabPanel tabKey="3"> <Box css={{backgroundColor: 'container', padding: 'large'}}> Test Tab Panel 3 </Box> </TabPanel> </TabPanels> </Tabs> </Box>
サポートされていない使用法
フラグメントのすべての子に同じキーが付与されている場合を除き、Tab はフラグメント内の条件付きコンテンツをサポートしていません。
const [result, setResult] = React.useState(null); return ( <Box css={{width: 'fill'}}> <Tabs> <TabList> <Tab tabKey="1"> <> {result ? ( <Inline>View results</Inline> ) : ( <Inline>Create results</Inline> )} </> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result ? ( <Inline>Results</Inline> ) : ( <Inline>No results yet</Inline> )} </> </TabPanel> </TabPanels> </Tabs> </Box> )
サポートされていない方法で Tab を使用しないようにするため、フラグメントの代わりにコンポーネントを使用してください。または、フラグメントのすべての子に共有の key を付与してください。
const [result, setResult] = React.useState(null); return ( <Box css={{width: 'fill'}}> <Tabs> <TabList> <Tab tabKey="1"> <Box> {result ? ( <Inline>View results</Inline> ) : ( <Inline>Create results</Inline> )} </Box> </Tab> </TabList> <TabPanels> <TabPanel tabKey="1"> <> {result ? ( <Inline key="tab-panel-results">Results</Inline> ) : ( <Inline key="tab-panel-no-results">No results yet</Inline> )} </> </TabPanel> </TabPanels> </Tabs> </Box> )
制御タブ
Tabs の selectedKey プロパティを、Tab および TabPanel の tabKey プロパティと組み合わせて使用し、制御コンポーネントを作成します。
const [key, setSelectedKey] = React.useState<React.Key>('c'); return ( <Box css={{width: 'fill'}}> <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={{backgroundColor: 'container', padding: 'large'}}> Tab panel {key} </Box> </TabPanel> ))} </TabPanels> </Tabs> </Box> )