Ionic-framework: feat: <hr> line bar component

[indraraj26]

Feature Request

Ionic version:


[x] 4.x

Describe the Feature Request

Describe Preferred Solution

It will be helpful to have line bar like we have in ion-item-divider, I am not able to achieve the same with

---

tag
Currently i am hiding the ion-item-divider content and moving the ion-item-divider with margin to have appropriate design.

Describe Alternatives

Related Code

Additional Context

[liamdebeasi]

Thanks for the feature request. Are you able to create this with a div? I am not sure I understand the benefit of this being a component.

[indraraj26]

I am not able to create semi line bar like we are having with ion-item-divider, Could you share how you will do it with div i tried adding 0.5px solid #ccc it is not that much semi (height)

Thank you

[liamdebeasi]

Can you share a screenshot of the effect you are trying to get?

[conde2]

I think he is probably trying to achieve a separator/divider line that can be used anywhere

https://material.angular.io/components/divider/overview

https://stackoverflow.com/questions/41411155/does-bootstrap-4-have-a-built-in-horizontal-divider

[liamdebeasi]

Ah, that makes sense. Thanks! In that case, this is something that is already possible in Ionic Framework.

Here is a CodePen example: https://codepen.io/liamdebeasi/pen/YzwNzao

You need to add a bit of CSS to style it, but you can place that in your global css, and it should work anywhere in your app.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.