Question

0

199

Views

css - how to handle collapse border in Tab

I am creating a tab.
When I switch the tab, the active item will have black border, while the inactive one will have grey border.

But I find the border overlap for all 2 items like below

The overlap border should be black only.

How to fix it?

App.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;

styles.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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

To achieve the required behavior we need to render styles conditionally

If overlapping is the problem we can simply add a margin.

  .tab .tab__item {
    flex: 1 1 0;
    border: 1px solid #c3c4c7;
    margin: 0.1rem;
    padding: 0.1rem 0.2rem;
  }

If you don't want to give a margin. You can do something like this.
- Create a function getInactiveClass
- If no tab is selected just return "" as before
- Apply 3 different styles based on the selectedTab to remove border-right/border-left
- If selectedTab has a tab on its left we remove border-right
- If selectedTab has a tab on its right we remove border-left
- Note: Both borders would be removed if selectedTab is in between 2 tabs

  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";
    }
  };

View Complete code snippet on CodeSandbox

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T11:32:36.310Z

To solve this problem, you need just to manipulate the css border properties. In this case border-left and border-right. working example

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;
}

0

199

css - how to handle collapse border in Tab

2 answers

0

To achieve the required behavior we need to render styles conditionally

0

Find remote jobs

Andres GPT