CODEWITHSUNDEEP
reactjsmaterial-ui
Gopi Nath
Gopi Nath

Reputation: 431

how to achieve multi line label with react Material UI

I am using react js to develop my web application and I am using React material design for the UI. Below is the url which I am referring.

https://material-ui-next.com/

I am trying to achieve something like this

enter image description here

I am using the tabs but I can't get a two line text as like the image I shared. either I can use image and label or if the label is too big then it goes in multi line. How can I achieve two line text as like the image

Upvotes: 12

Views: 35906

Answers (4)

FFaFafy
FFaFafy

Reputation: 63

To extend Domovikx's answer you can also use

<Typography component="pre">{content}</Typography>

It will automagically apply all styles required from typography.

Upvotes: 2

Abraham Simpson
Abraham Simpson

Reputation: 350

This may be helpful for someone. Setting white-space: break-spaces can help to achieve this as it can be set to nowrap on some parent element.

Upvotes: 4

Domovikx
Domovikx

Reputation: 404

In order to make multiline text, you can insert the HTML < pre > tag, from which the text formatting is retained. Then it remains to inherit the style of the text.

 <Typography>
    <pre style={{ fontFamily: 'inherit' }}>
        {content}
    </pre>
 </Typography>

Upvotes: 21

dauffret
dauffret

Reputation: 1407

It's an old question, but I see nobody has answered it yet.

In order to get multi line and multi styles for your tab label, you need to place your labels and values in two different items. (make sure you wrap them in a div first)

The preferred way in MUI @1.0.0 is to use the <Typography /> tag.

Check out the typography docs for all the variants.

So it would look something like this:

<Tab
   value={this.state.value}
   label={
      <div>
        <Typography variant="caption">
          Following
        </Typography>
        <Typography variant="title">
          58
        </Typography>
      </div>
   }
 />

However since all your tabs need that, you should probably create a function to take care of that.

I have created a sandbox based on the MUI example provided here: https://codesandbox.io/s/vw6107rv3

Upvotes: 14

Related Questions