选项卡组件

动态选项卡界面

示例

创建动态选项卡界面，如 WAI ARIA 作者实践指南 中所述。Tabs 是一个更高级别的组件，用于快速创建与一组 TabPane 匹配的 Nav。

结果

正在加载...

实时编辑器

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;

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;

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;

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;

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;

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 允许您快速将自己的选项卡组件拼凑在一起，并添加所需的额外标记。

创建一组 NavItems，每个 NavItems 都具有与 TabPane 的 eventKey 相对应的 eventKey。将整个内容包装在 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;

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