Want to add a label switch component to their background, did not find the right one, just see Chrome’s TAB bar, switch up very silky, so they copied 👀

Results the preview

CodeSandbox

Github

🔥 : Dragging is implemented

Implementation approach

Simply say about the TAB bar and right-click menu implementation, specific reference code

TAB bar

<div className="container">
    <div className="top" />
    <div className="content">
      <div
        onContextMenu={(e)= > onTagContextMenu(e, tag.path)}
        className={`tag-c ${currentTag === tag.path ? "active" : ""}`}
      >
        <span className="tag-text">{tag.title}</span>
        <span className="tag-close">X</span>
      </div>
    </div>
    <div className="bottom" />
</div
Copy the code
.tag-c {
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 8px 10px 0;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  width: 120px;
  box-sizing: border-box;
  background-color: #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tag-c.active {
  background-color: #ddd;
}
.tag-c.active::before {
  position: absolute;
  content: "";
  height: 5px;
  width: 9999px;
  background-color: #ccc;
  left: -9999px;
  border-bottom-right-radius: 10px;
  bottom: -5px;
}
.tag-c.active::after {
  position: absolute;
  content: "";
  height: 5px;
  width: 9999px;
  background-color: #ccc;
  left: 120px;
  border-bottom-left-radius: 10px;
  bottom: -5px;
}
Copy the code
  • The wholediv.containerSet a background color, selecteddiv.tag-cSet the background color to highlight
  • div.bottomSet the high light color
  • Add upper rounded corners and usediv.tag-ctheborder-radiusimplementation
  • Add lower rounded corners and usediv.tag-c::afteranddiv.tag-c::beforeimplementation

Div. Top is added at the top to make it easier for div. Content to be centered

Right-click menu

Listen for and rewrite the onContextMenu event for div.tag-c

const onTagContextMenu = useCallback((e, path) = > {
    e.preventDefault();
    setContextMenuVisiable(true);
    setContextMenuPos({ x: e.pageX, y: 20 });
    // ...} []);Copy the code

To be perfect

  • Drag tabs (✅)
  • Adaptive label width
  • Some switching animations (✅)