Quiero agregar un ícono antes del título de cada pestaña abierta. La fuente de los íconos podría ser íconos de arranque u otras bibliotecas. ¿Cómo se puede lograr esto?
Estoy usando la biblioteca antd para crear pestañas, que no tiene la opción de agregar un ícono directamente. A continuación se muestra el fragmento de código y aquí está el enlace 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 TabbarTabPane acepta la pestaña como 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>;Prueba esto
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>;