CODEWITHSUNDEEP
cssreactjs
Jin
Jin

Reputation: 1439

How Can I Create Dotted Lines to Display Data in Rows in ReactJS using CSS?

I have a short design like this in Reactjs

Monday......................08:00 AM - 21:00 PM

As you see above I have many dots, how can I create it shorter without entering many dots like that. Enter dot [....] like this is not good for the website.

Any idea about this. Could you support me, please

Upvotes: 0

Views: 772

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

You can do this in CSS using dotted borders. In my example below I have utilized the Flex layout. Reposition the dots as necessary as I indicated in the CSS code comments.

const App = () => {
  return (
    <React.Fragment>
      <div className="dotted-data-container">
        <div className="dotted-data-key">Monday</div>
        <div className="dotted-data-separator"></div>
        <div className="dotted-data-value">08:00 AM - 21:00 PM</div>
      </div>
      <div className="dotted-data-container">
        <div className="dotted-data-key">Saturday</div>
        <div className="dotted-data-separator"></div>
        <div className="dotted-data-value">08:00 AM - 21:00 PM</div>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
.dotted-data-container {
    display: flex;
}

.dotted-data-separator {
    flex: 1;
    border-bottom: 2px dotted; /* style as necessary */
    position: relative;
    top: -2px; /* reposition as necessary */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 3

Yatrix
Yatrix

Reputation: 13775

This should do it.

[...new Array(numberOfDots)].map(()=> ".").join("")

Upvotes: -1

Related Questions