動的なタブ付きインターフェース
WAI ARIAオーサリングプラクティスで説明されているように、動的なタブ付きインターフェースを作成します。Tabsは、Navと一連のTabPaneを迅速に作成するためのより高度なコンポーネントです。
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function UncontrolledExample() {
return (
<Tabs
defaultActiveKey="profile"
id="uncontrolled-tab-example"
className="mb-3"
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default UncontrolledExample;
制御付き
選択ロジックを手動で処理する場合、Tabsを直接制御できます。
import { useState } from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function ControlledTabsExample() {
const [key, setKey] = useState('home');
return (
<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3"
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default ControlledTabsExample;
アニメーションなし
transitionプロップをfalseに設定します。
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function NoAnimationExample() {
return (
<Tabs
defaultActiveKey="home"
transition={false}
id="noanim-tab-example"
className="mb-3"
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default NoAnimationExample;
塗りつぶしと揃え
Navコンポーネントと同様に、Tabsの内容が利用可能な幅全体に広がるように強制できます。比例してスペースを埋めるにはfillを使用します。Tabsは全体の幅ですが、各Tabアイテムのサイズは異なります。
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function FillExample() {
return (
<Tabs
defaultActiveKey="profile"
id="fill-tab-example"
className="mb-3"
fill
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="longer-tab" title="Loooonger Tab">
Tab content for Loooonger Tab
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default FillExample;
各Tabを同じサイズにするにはjustifyを使用します。
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
function JustifiedExample() {
return (
<Tabs
defaultActiveKey="profile"
id="justify-tab-example"
className="mb-3"
justify
>
<Tab eventKey="home" title="Home">
Tab content for Home
</Tab>
<Tab eventKey="profile" title="Profile">
Tab content for Profile
</Tab>
<Tab eventKey="longer-tab" title="Loooonger Tab">
Tab content for Loooonger Tab
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
Tab content for Contact
</Tab>
</Tabs>
);
}
export default JustifiedExample;
ドロップダウン？
動的なタブ付きインターフェースにはドロップダウンメニューを含めるべきではありません。これは、ユーザビリティとアクセシビリティの両方の問題を引き起こすためです。ユーザビリティの観点から、現在表示されているタブのトリガー要素が（閉じられたドロップダウンメニュー内にあるため）すぐに表示されないという事実は、混乱を引き起こす可能性があります。アクセシビリティの観点から、現在、この種の構成を標準的なWAI ARIAパターンにマッピングする賢明な方法がないため、支援技術のユーザーにとって簡単に理解できるようにはできません。
つまり、ドロップダウンは技術的には機能しますが（フォーカス管理を除く）、サポートについては何も主張しません。
カスタムタブレイアウト
より複雑なレイアウトの場合、柔軟なTabContainer、
TabContent、およびTabPaneコンポーネントと任意のスタイルのNavを使用すると、必要な追加のマークアップを使用して独自のタブコンポーネントを迅速に作成できます。
各TabPaneのeventKeyに対応するeventKeyを持つ一連のNavItemを作成します。全体をTabContainerでラップすると、完全に機能するカスタムタブコンポーネントが完成します。グリッドシステム、ピル、下線を活用した以下の例をご覧ください。
import Col from 'react-bootstrap/Col';
import Nav from 'react-bootstrap/Nav';
import Row from 'react-bootstrap/Row';
import Tab from 'react-bootstrap/Tab';
function LeftTabsExample() {
return (
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">First tab content</Tab.Pane>
<Tab.Pane eventKey="second">Second tab content</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
);
}
export default LeftTabsExample;
API
TabContainer
TabContent
TabPane