Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Divider] Support displaying text inside

See original GitHub issue

How about having text inside the divider? <Divider>Text</Divider>

Result would be like this:

sample code:

<>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider>Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider orientation="left">Left Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider orientation="right">Right Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>

just like ant design has: https://ant.design/components/divider/#header

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:11 (10 by maintainers)

Top GitHub Comments

3reactions

oliviertassinaricommented, Oct 3, 2020

@lsqproduction You can find the documentation in https://next.material-ui.com/components/dividers/#dividers-with-text.

3reactions

sheerryycommented, Aug 11, 2020

@oliviertassinari can you take a look at this code? It is in rough form and many things are still missing, but is this good approach? I think passing text as a prop (text) will be better than passing it as children.

Top Results From Across the Web

[Divider] Support displaying text inside · Issue #21820 - GitHub

How about having text inside the divider? Text Result would be like this: sample code: <> Lorem ipsum dolor sit amet, consectetur adipiscing ......

Add centered text to the middle of a horizontal rule [duplicate]

This is the cleanest solution in this thread to be honest, the issue with no text can be overlooked since you would want...

CSS Nugget: Text Divider in Flexbox - DEV Community ‍ ‍

In this tutorial, we'll create a fluid text divider with a single <div> , with the help of Flexbox and pseudo-elements.

How To Create Dividers with CSS - W3Schools

How To Create Dividers. Step 1) Add HTML: Example. <hr class="dashed">

mjml-guides – Documentation for MJML - The Responsive ...

Here is an example showing the use in combination with the css-class attribute, which is supported by all body components. <mjml> <mj-head> <mj-attributes>...