0
205
Viewscss: cómo manejar el borde colapsado en la pestaña
Estoy creando una pestaña.
Cuando cambio de pestaña, el elemento activo tendrá un borde negro, mientras que el inactivo tendrá un borde gris.
Pero encuentro la superposición de bordes para los 2 elementos como a continuación 
El borde superpuesto debe ser solo negro.
¿Como arreglarlo?
Aplicación.js
import "./styles.css"; import Tab from "./Tab"; import { useState } from "react"; const options = [ { id: "1", label: "First" }, { id: "2", label: "Second" } ]; export default function App() { const [selectedOption, setSelectedOption] = useState(""); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <Tab options={options} selectedOption={selectedOption} setSelectedOption={setSelectedOption} /> </div> ); }Tab.jsx
import React from "react"; import "./styles.css"; function Tab(props) { const { options, selectedOption, setSelectedOption } = props; return ( <div className="tab"> {options && options.map((option) => { return ( <div className={ "tab__item " + (selectedOption === option.id ? "tab__item--active" : "") } key={option.id} onClick={() => { setSelectedOption(option.id); }} > {option.label} </div> ); })} </div> ); } export default Tab;estilos.css
.App { font-family: sans-serif; text-align: center; } .tab { display: flex; } .tab .tab__item { flex: 1 1 0; border: 1px solid #c3c4c7; padding: 0.1rem 0.2rem; } .tab .tab__item--active { border: 1px solid #3c434a; } .tab .tab__item:hover { cursor: pointer; }https://codesandbox.io/s/blissful-sound-t312f?file=/src/App.js
·
Juan Pablo Isaza
2 answers
Answer question0
Para lograr el comportamiento requerido, necesitamos renderizar estilos condicionalmente.
Si el problema es la superposición, simplemente podemos agregar un margen.
.tab .tab__item { flex: 1 1 0; border: 1px solid #c3c4c7; margin: 0.1rem; padding: 0.1rem 0.2rem; }Si no quieres dar un margen. Puedes hacer algo como esto.
- Crear una función getInactiveClass
- Si no se selecciona ninguna pestaña, simplemente devuelva "" como antes
- Aplique 3 estilos diferentes según la pestaña seleccionada para eliminar el borde derecho/borde izquierdo
- Si la pestaña seleccionada tiene una pestaña a su izquierda, eliminamos el borde derecho
- Si la pestaña seleccionada tiene una pestaña a su derecha, eliminamos el borde izquierdo
- Nota: ambos bordes se eliminarán si la pestaña seleccionada está entre 2 pestañas
const getInactiveClass = (key) => { const index = options.findIndex((item) => item.id === selectedOption); if (!selectedOption) return ""; if (key === index - 1) { return "tab__item--inactive-right"; } if (key === index + 1) { return "tab__item--inactive-left"; } };
·
Juan Pablo Isaza
Report
0
Para resolver este problema, solo necesita manipular las propiedades del borde css. En este caso border-left y border-right . ejemplo de trabajo
CSS
.tab { display: flex; } .tab .tab__item { flex: 1 1 0; border: none; border-top: 1px solid #c3c4c7; border-bottom: 1px solid #c3c4c7; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0.1rem 0.2rem; } .tab__item:first-child { border-left: 1px solid #c3c4c7; } .tab__item:last-child { border-left: 1px solid #c3c4c7; border-right: 1px solid #c3c4c7; } .tab__item--active:first-child { border: 1px solid #3c434a; } .tab__item--active:first-child ~ .tab__item:last-child { border-left: 1px solid transparent; } .tab__item--active:last-child { border: 1px solid #3c434a; } .tab .tab__item:hover { cursor: pointer; }
·
Juan Pablo Isaza
Report
Answer question