时间戳

首页 > 解决方案 > 在反应引导选项卡的标题旁边放置图片

reactjs - 在反应引导选项卡的标题旁边放置图片

问题描述

React 引导选项卡允许我们创建选项卡。

<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <Sonnet />
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <Sonnet />
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <Sonnet />
  </Tab>
</Tabs>

每个Tab都有一个tag接受string. 我想知道是否可以显示图片而不是title？还是两者都显示？另外，我希望我可以在选项卡标题旁边显示一张图片。

标签： reactjsreact-bootstrap

解决方案

看到第一个标签，你有一个标题和一个图像，彼此相邻。

<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 
          <img src="https://lh3.googleusercontent.com/-pxzt5JSmq3o/AAAAAAAAAAI/AAAAAAAAARw/oSQ00wYMa9g/photo.jpg?sz=32"></img>
          </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">
          <Sonnet />
        </Tab.Pane>
        <Tab.Pane eventKey="second">
          <Sonnet />
        </Tab.Pane>
      </Tab.Content>
    </Col>
  </Row>
</Tab.Container>

推荐阅读