I want to add icon to the tab that I open before the title of the each tab. How to add the icon. How can I add an icon from bootstrap icons or from any other libraries to the every tab. Currently I have used antd library for creating a tab. This doesn't have an option of adding an icon directly. What can I do to achieve this. Here is jsfiddle link-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
CodePudding user response:
TabPane accepts tab as 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>;
Try this
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>;