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
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
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>
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
Related
I am new to material UI and react js, I just tried to add 2 buttons, one is with primary color, and another with Primary-light. How can I do that
I am using emotion library. This is what I tried it. I am not trying to change of the default color of primary-light, I wants to use the default primary-light color to my button
<Button variant="contained" >Primary Button</Button>
<Button variant="contained" color="secondary" >secondary Button</Button>
the above 2 buttons are working as expected.
<Button variant="contained" color="primary-light" >secondary Button</Button> //I know the syntax is wrong.
How to do this?
"primary-light" is not one of the supported colours by MUI buttons.
Which you can see in the documentation here here
You have a few options:
Manually override the style of this button. (not ideal).
Make a class that specifies the colour you want and provide the hex colour code as the background colour. (also not ideal).
Make a JSX class using makeStyles that takes the app's theme as an argument and provide the primary.light colour directly from your theme. (I'm not sure if this is outdated in version 5 of material UI but it is how you would usually do it in v4).
In your case it's probably easiest to take a quick look at the documentation Here Which shows how to customize colours on buttons using your theme and the styled function which is imported from mui/material/styles.
I had to create "primaryLight" color property in theme object so I could use. Also had to add types in order to Button can accept "primaryLight".
I used this document
A hacky workaround would be to use the defined theme color and then overwrite with sx prop.
<Button
color={'primary'}
variant='contained'
onClick={() => toggle(true)}
sx={{width: '100%', bgcolor: 'primary.dark', '&:hover': {bgcolor: 'primary.light'}}}
>
comments
</Button>
I believe this is prevented by design.
Button components are meant to get a color, and use the color main key.
You may use ButtonPropsColorOverrides to allow more color values, which is useful when you add more colors to the theme, but still - you'll get the color's main key, and cannot access other color keys.
I believe this design is meant to keep the color system integrity. You're not supposed to use primary.light key since it may be used for other effects (like hover).
Note that you can use inner color keys for some other components, like typography:
<Typography variant="body2" color="primary.light">Hello</Typography>
I am new to React, I want to create a rating bar like this:
I want to use material UI, but I didn't find a component like this.
I found a rating UI component: https://material-ui.com/components/rating/. but I need the UI to be like a linear gauge and change color with a different number (1/5, 2/5,3/5,4/5,5/5).
Actually, I already used the rating component:
<Grid item xs={6} className={classes.overAllScoreValueContainer}>
<Box component="fieldset" marginLeft={0} marginTop={0.25} padding={0} borderColor="transparent">
<Rating
name="overall-score"
value={this.state.overAllRating}
readOnly
size={"large"}
classes={{
iconFilled: this.props.classes.iconFilled,
iconHover: this.props.classes.iconHover
}}
/>
</Box>
</Grid>
but the UI is not correct.
anyone can help?
Thank you for pointing out using the progress bar in material UI.
I can make the shape like what shown in the picture, but how to change color according to the value??
please check this:
https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js
You can use material ui progress... see the document.
https://material-ui.com/components/progress/#progress
You can also customize it.
Hey thanks for posting your sandbox. I was able to provide the color dynamically with your help. If you're still stuck here then just pass the color as a prop and !important to your style. Thank you soo much.
Here's the updated sandbox link - https://codesandbox.io/s/staging-bird-dh50kl
I am creating a table with data. Want pagination like this attached image in the footer.
Left-hand side I want the numbers and right-hand side Results per page.
Probably you have to use the combination of Pagination and Table pagination. And hide the unused panels with the CSS.
<div className={classes.root}>
<Pagination count={10} variant="outlined" shape="rounded" />
<TablePagination
component="div"
count={100}
page={page}
onChangePage={handleChangePage}
rowsPerPage={rowsPerPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>;
I have created a sample codesandbox (This is just a workaround) - https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225
Let me know if you need more help.
As #Tejogol mentioned you can use the Material UI table example pagination and change it.
You can store the current page number in a state variable and add a different style to the corresponding navigation field. The style seems like a simple border with a small border radius (1-3px).
For the results per page you can use React spacers. Don't forget to update the current page number when changing the results per page.
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
I am studying about Material-UI but I couldn't find in the Demo (example) anything similar with what they have in their website.
My problem is I want to copy this example, so I am trying to reproduce the container (not the content) using the <Card /> component, but it doesn't reproduce very well, so I want to know if there is a specific component to use.
If I understand your question correctly, you're looking for a way to emulate the collapsible demo container that reveals the code behind the demos in Material-UI's documentation (and you want to do so using Material-UI components).
That specific container is implemented in the docs site as an internal component and is composed of Material-UI components with a reliance on JSS for styling. It is also open-source, so looking at the code should help you.
Here is an excerpt from the render method:
<div className={classes.root}>
<IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
<CodeIcon />
</IconButton>
<Collapse in={this.state.codeOpen}>
<MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
</Collapse>
<div className={classes.demo} data-mui-demo={name}>
<DemoComponent />
</div>
</div>
This is a component that is used for demos in the Material-UI documentation. It is little more than a styled div with an IconButton.
The MarkdownElement contains the code that is toggled by the code button presented at the top-right of the container. It is wrapped in a Collapse component, which handles the animated transition that takes place when the visibility of that code is toggled.
The DemoComponent is where the demo is presented.
All style is handled using JSS, defined in a stylesheet object.
I'm sure you can build this into a Card by following this pattern. It should be pretty straight-forward, something like adding an action to the CardHeader that triggers a state change and toggles whatever you're looking to expand.