如何為每個選項卡添加圖示？-有解無憂

我想在每個選項卡標題之前打開的選項卡中添加圖示。如何添加圖示。如何將引導程式圖示或任何其他庫中的圖示添加到每個選項卡。目前我已經使用 antd 庫來創建一個選項卡。這沒有直接添加圖示的選項。我能做些什么來實作這一目標。這是jsfiddle鏈接-https://jsfiddle.net/6719phr3/1/

import React, { useState, useCallback } from "react";
import { Tabs, Button } from 'antd';
import 'antd/dist/antd.css';

const { TabPane } = Tabs;

const Tabbar = (props) => {

const [focusingPaneKey, setFocusingPaneKey] = useState('')
cons[openingPaneKeys, setOpeningPaneKeys] = useState([])

const openPane = (paneKey) => {
 setOpeningPaneKeys(oldState => {
  if (!oldState.includes(paneKey)) {
    return [...oldState, paneKey]
  }
  return oldState
})

setFocusingPaneKey(paneKey)
}

const closePane = (paneKey) => {
if (paneKey === focusingPaneKey) {
  const paneKeyIndex = openingPaneKeys.indexOf(paneKey)
  setFocusingPaneKey(openingPaneKeys[paneKeyIndex - 1])
}

setOpeningPaneKeys(openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey))
}

const handleTabsEdit = useCallback((key, action) => {
if (action === 'remove') {
  closePane(key)
}
}, [closePane])

const { panes } = props
const keysOfPane = Object.keys(panes)

return (
<div className="tab-section">
  <div style={{ marginBottom: 16 }}>
    {keysOfPane.map((key) => (
      <Button key={key} onClick={() => openPane(key)}>
        ADD Tab-{key}
      </Button>
    ))}
  </div>
  <Tabs
    hideAdd
    onChange={openPane}
    activeKey={focusingPaneKey}
    type="editable-card"
    onEdit={handleTabsEdit}
  >
    {openingPaneKeys
      .map((key) => panes[key])
      .map((pane) => (
        <TabPane tab={pane.title} key={pane.key}>
          {pane.content}
        </TabPane>
      ))}
  </Tabs>
</div>
)
}

export default Tabbar

uj5u.com熱心網友回復：

TabPane 接受 tab 作為 ReactNode，

https://ant.design/components/tabs/

 <Tabs
  hideAdd
  onChange={openPane}
  activeKey={focusingPaneKey}
  type="editable-card"
  onEdit={handleTabsEdit}
>
  {openingPaneKeys
    .map((key) => panes[key])
    .map((pane) => (
      <TabPane
        tab={
          <span>
            <AppleOutlined />
            {pane.title}
          </span>
        }
        key={pane.key}
      >
        {pane.content}
      </TabPane>
    ))}
</Tabs>;

試試這個

var x = {
  1: { key: "1", title: "Tab 1", content: "Content of Tab Pane 1" },
  2: { key: "2", title: "Tab 2", content: "Content of Tab Pane 2" },
  3: { key: "3", title: "Tab 3", content: "Content of Tab Pane 3" },
};

const map = {
  1: Icon1,
  2: Icon2,
  3: Icon3,
};

const getTab = (pane) => (
  <TabPane
    tab={
      <span>
        <pane.icon />
        {pane.title}
      </span>
    }
    key={pane.key}
  >
    {pane.content}
  </TabPane>
);

<Tabs
  hideAdd
  onChange={openPane}
  activeKey={focusingPaneKey}
  type="editable-card"
  onEdit={handleTabsEdit}
>
  {Object.keys(x).map((key) =>
    getTab({
      ...panes[key],
      icon: map[key],
    })
  )}
</Tabs>;

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397291.html

標籤：javascript css 反应

上一篇：使用CSS和PHP和HTML使標題具有粘性

下一篇：任何想法使輸入和按鈕行內？引導程式v5