CODEWITHSUNDEEP
reactjsuser-interfacebootstrap-4reactstrap
Windula Kularatne
Windula Kularatne

Reputation: 311

Design Bootstrap dynamic nav tabs component

I want to design a dynamic nav tabs component. when the card is clicked relevant tab is shown, with the connection arrow and border-color green.

sample code or a suggestion would be much helpful

.

Upvotes: 0

Views: 439

Answers (2)

Quentin Grisel
Quentin Grisel

Reputation: 4987

Here is how you can do :

.js :

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const selectBlock = (e) => {
    e.target.classList.toggle('selected');
  }

  return (
    <div className="block" onClick={(e) => {selectBlock(e)}}>
      <div>Here is the block</div>
      <div className="arrow">
        <FakeArrow />
      </div>
    </div>
  );
};

const FakeArrow = () => {
  return (
    <div>
      <span className="arrow-down-border" />
      <span className="arrow-down" />
    </div>
  );
};

render(<App />, document.getElementById("root"));

.css :

.block {
  position: relative;
  width: 150px;
  height: 50px;
  text-align: center;
  border: 2px solid black;
}

.arrow {
  display: none;
}

.block.selected {
  border: 2px solid #99d32c;
}

.block.selected .arrow {
  display: block;
}

/* You need to fake the arrow border with another arrow behind */
.arrow-down-border {
  position: absolute;
  bottom: -20px;
  left: 55px; /* 150px (main block) / 2 -20px (size of the triangle)*/
  width: 0; 
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #99d32c;
}

.arrow-down{
  position: absolute;
  bottom: -17px;
  left: 58px; /* 150px (main block) / 2 -17px (size of the triangle)*/
  width: 0; 
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 17px solid #ffffff;
}

Here is the repro on Stackblitz.

Of course this is just an example, you have to set a color for the arrows so my advice would be to do it with constants or props. Same thing for the position and others functionality you can add to the FakeArrow component.

Now, it would be waaaayy easier to manage it with an image if you really need a border (this is the tricky part in your requirement), or a simple arrow without border.

You can take a look at this post, it's the same question actually, i used a slightly different way to do it with css, but the result seems to be the same.

Upvotes: 1

Roshni
Roshni

Reputation: 31

You can use accordion by bootstrap. Use css flexbox to horizontally align the tabs next to each other and bind a javascript method that changes css color properties (arrow, green color) on clicking.

Here is the link - https://getbootstrap.com/docs/4.0/components/collapse/

Upvotes: 2

Related Questions