I want to customize it like the image above.
I want to give white for the margins and blue for everything else.
This is my source code.
<CircularProgress
variant="determinate"
color={!action ? "primary" : "progress_second"}
{...props}
size="215px"
thickness={3}
variant="determinate"
value={Math.round((props.value?.done / props.value?.total) * 100 || 0)}
style={{
transform: "rotate(440deg)",
}}
/>
This is my circularprogress.
please help me!
Check this out it might help in your case. You can set whatever color you want to the spinner using sx prop:
https://smartcodehelper.com/2022/01/25/material-ui-circular-progress-customization-example/
<CircularProgress
variant="determinate"
size="10rem"
{...props}
sx={{color:"red"}}
/>
or use predefined theme colors such as primary, secondary etc
<CircularProgress
variant="determinate"
size="10rem"
{...props}
color="secondary"
/>
Related
I have made a Bluetooth connection status indicator using a tooltip and a badge. However I'm struggling with the badge's positioning.
Here's my code:
<Tooltip className={classes.help} title={getBluetoothStatus()}>
<IconButton onClick={props.onClick} size="large">
<Badge badgeContent="✔" color="success" overlap="circular">
<BluetoothIcon />
</Badge>
</IconButton>
</Tooltip>
Which looks like this:
However, I want the badge to be positioned on the edge of the circular IconButton.
I've tried placing the Badge around the IconButton like so:
<Tooltip className={classes.help} title={getBluetoothStatus()}>
<Badge badgeContent="✔" color="primary" overlap="circular">
<IconButton onClick={props.onClick} size="large">
<BluetoothIcon />
</IconButton>
</Badge>
</Tooltip>
This does place the Badge more outwards and fixes the issue. Unfortunately it add an unwanted square:
I've tried adding css properties such as padding, margin and transform:translate to no avail :(
Any thoughts or suggestions are highly appreciated, thanks!
Managed to get it looking like intended:
Had to separate Badge component from the Icon component and then I just styled the badge with transform: 'translate(30px, -20px)'
Here's the code I used in case anyone needs it:
<Tooltip className={classes.help} title={getBluetoothStatus()}>
<IconButton onClick={props.onClick} size="large" >
<Badge badgeContent="✔" color="success" overlap="circular" style={{ transform: 'translate(30px, -20px)'}}>
</Badge>
<BluetoothIcon />
</IconButton>
</Tooltip>
Let me know if you find a better way.
can't find how do i change the dots color
tried various changes in makestyles including
dot: {
backgroundColor: "#008000 !important"
}
but nothing worked
https://codesandbox.io/s/material-demo-forked-sslwl?file=/demo.js:423-480
According to the MobileStepper API docs, you need to supply your properties to the classes prop instead of className. An example for changing the color of the active dot:
classes={{
dotActive: classes.dot
}}
Fixes are mentioned below.
Define styles object correctly.
const useStyles = makeStyles({
root: {
maxWidth: 400,
flexGrow: 1
},
dot: {
backgroundColor: "#008000"
},
dotActive: {
backgroundColor: "#3f51b5"
}
});
Define classes prop in MobileStepper as per the API documentation.
According to the API documentation, you can override the default style of the component in 3 ways. Here use 1st way & that is using classes object prop.
<MobileStepper
variant="dots"
steps={6}
position="static"
activeStep={activeStep}
classes={{
root: classes.root, // this will overrides default styles related to MobileStepper root element
dot: classes.dot, // this will overrides default styles related to dot elements
dotActive: classes.dotActive,
}}
nextButton={
<Button size="small" onClick={handleNext} disabled={activeStep === 5}>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button size="small" onClick={handleBack} disabled={activeStep === 0}>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>;
Note - If you override the default colour of dots, then you have to override the active dot colour also.
https://codesandbox.io/s/mobilestepper-53cx2?file=/demo.js:343-522
Let me know if you need further support.
I have a set of FloatingActionButton that I am using from material-ui in my ReactJS code as
<div className="callActionButtons">
<FloatingActionButton style={{padding: '5px'}}>
<VoiceSettingsIcon/>
</FloatingActionButton>
<FloatingActionButton style={{padding: '5px'}} onTouchTap={this.endCall}>
<CallEndIcon />
</FloatingActionButton>
<FloatingActionButton style={{padding: '5px'}}>
<VideoIcon/>
</FloatingActionButton>
</div>
The UI currently looks like
I want to apply a backgroundColor property to the FloatingActionButton so that the center one has a red background and looks like
going through the documentation of FloatingActionButton. I tried to provide styles using
<FloatingActionButton style={{padding: '5px'}}
iconStyles={{backgroundColor: 'red'}}
onTouchTap={this.endCall}>
nothing changed
I also tried providing background color with inline style like
<FloatingActionButton style={{padding: '5px', backgroundColor: 'red'}}
onTouchTap={this.endCall}>
With this I get the following display
I can't quite figure out how to get the desired result. Any help is appreciated.
Thanks in advance
To Change the icon background-color, send backgroundColor={red500} as props. Here red500 is desired color. You can also pass string or color code
<FloatingActionButton style={{padding: '5px'}} backgroundColor={red500}
onTouchTap={this.endCall}>
<CallEndIcon />
</FloatingActionButton>
You can get color this way:
import {red500} from 'material-ui/styles/colors'
Using material-ui and react/jsx, I have an AppBar. I wanted to add a notifications menu icon with badge (number) on it, that is, to show the number of new notifications.
The problem is that the badge will be displayed incorrectly. That is, with weird styles and look.
Here is what I have already tried
<AppBar>
<IconMenu anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
iconButtonElement={
<FlatButton label={<Badge badgeContent={5} />} icon={<NotificationsIcon />} />
}
/>
</AppBar>
That way, the badge will not be aligned correctly with the bell (notifications) icon.
I have also tried making the IconMenu part of the AppBar's iconElementRight property to no avail.
Any help?
You're right - it does seem to take some experimenting with the proper nesting order, and even then you have to tweak the style a bit. But, here's a sample webpackbin that I think looks decent without being hacky: http://www.webpackbin.com/EJqz0NVzM
<AppBar>
<IconMenu
iconButtonElement={
<IconButton style={{ padding: 0 }}>
<Badge
badgeStyle={{ top: 12, right: 12, backgroundColor: colors.yellow800 }}
badgeContent={5}
secondary={true}
>
<NotificationIcon color={muiTheme.appBar.textColor} />
</Badge>
</IconButton>
}
>
<MenuItem primaryText="View Notifications" />
<MenuItem primaryText="Dismiss All" />
</IconMenu>
</AppBar>
Once you nest the components correctly, the final bit is setting the padding on the IconButton to zero. Once you do this, it will look as expected according to the material-ui docs.
In this configuration, in my humble opinion, the badge is floating a little too far away from the notification icon. So, I also added a custom "badgeStyle" to nudge the badge inward to overlay on top of the notification icon slightly. I also put a custom yellow color on the badge too, just to illustrate that you can further customize the look of that badge (could change borderRadius, boxShadow, fontSize, etc)
Problem description
I am trying to put a chip inside a toolbar and am having problems with vertical alignment. I can fix it with overriding some styles of course, but as a real beginner I assume I'm doing something wrong i.e. not using the material-ui components in the right way?
Steps to reproduce
If I put a chip as a direct child of an appbar the chips fills the whole height incorrectly:
http://i.imgur.com/2mHKaIV.png
render() {
return (
<Toolbar>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}
If I wrap it in a list item it's height is correct but it still isn't centered in the toolbar:
http://i.imgur.com/Ksc5CTd.png
render() {
return (
<Toolbar>
<ListItem disabled={true}>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</ListItem>
</Toolbar>
)
What am I doing wrong?
(naturally I want it vertically centered in the toolbar and of the correct height for a chip)
Versions
Material-UI: 0.15.4
React: 15.3.2
Browser: Chrome 53.0.2785.116 (Mac OSX)
I was able to do a mockup (I hate how difficult it is to set up React/Material-Ui problems) and found the same issue. I think it's expected behavior from how the chip is positioned.
However, it is all fixed with margin: 'auto'
render() {
return (
<Toolbar>
<Chip style={{ margin: 'auto' }}>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}