Designing a React
application, what I want is having the title of a Card
or Paper
on the top border with some indention from left side, like this:
I searched a lot and couldn't find a generic way to do so. Should I create a customised component or there's way for this?
I don't know exactly what you want it to look like, but you can achieve something like that by using the
fieldset
andlegend
elements.It might look like this:
Result:
This approach is used by Material-UI for the "Outlined" variant of TextField (demo here). The code that handles this aspect is the
NotchedOutline
component (source here).You can also fairly easily do something yourself via a
position
attribute to move a title element up over the border. This would actually allow you to use one of thosematerial-ui
components to provide most of the styles, and then just move the title on to the border.Checkout this Codepen for an examples: https://codepen.io/codingmatty/pen/bOXKpZ