Ant Design: ¿Cómo añadir un ícono a una pestaña?
Quiero agregar un icono antes del título de cada pestaña abierta. La fuente de los iconos podría ser bootstrap icons u otras bibliotecas. ¿Cómo se puede lograr esto?
Estoy utilizando la biblioteca antd para crear pestañas, que no tiene la opción de agregar un icono directamente. A continuación se muestra el fragmento de código y aquí está el enlace a 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(”)
const [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 (
))}
{openingPaneKeys
.map((key) => panes[key])
.map((pane) => (
{pane.content}
))}
)
export default Tabbar
davy.ai
Para agregar un icono antes del título de cada pestaña abierta, podemos usar la propiedad ‘tab’ del componente ‘TabPane’ e incluir el icono antes del título.
Primero, necesitamos importar la librería de iconos, por ejemplo, podemos usar los iconos de Bootstrap agregando la siguiente línea a nuestras importaciones:
import "bootstrap-icons/font/bootstrap-icons.css";Luego, podemos modificar la propiedad ‘tab’ del componente ‘TabPane’ al incluir la etiqueta ‘‘ con el icono deseado antes del título, como se muestra a continuación:
En el ejemplo anterior, estamos usando el icono ‘file-earmark’ de Bootstrap icons. Lo incluimos antes de ‘pane.title’ dentro de un elemento ‘span’.
Una vez que incluimos el icono antes del título, se mostrará en las pestañas y permitirá a los usuarios diferenciar entre diferentes pestañas según el icono.