I want a stacked progress bar tracking two fields:
valueBuffer: amount unlocked out of total. The light blue bar.
value: amount claimed out of unlocked. The dark blue bar.
Variant buffered suits my use case but the dotted line animation is annoying. How do I disable the animation and replace it with a regular bar?
<LinearProgress variant="buffer" value={50} valueBuffer={70} />
If this is not possible, what is the alternative to have a bootstrap style stacked progress bar?
You can use add a custom style to .MuiLinearProgress-dashed and modify the default dashed styles using sx attribute like this:
<LinearProgress
variant="buffer"
value={progress}
valueBuffer={buffer}
sx={{
"& .MuiLinearProgress-dashed": {
backgroundColor: "lightgrey",
backgroundImage: "none",
animation: "none"
}
}}
/>
You can take a look at this sandbox for a live working example of this solution.
Related
I am using a <TextareaAutosize> component from the Material UI Library in my React app, as such:
<TextareaAutosize
minRows="2"
style={{resize: "vertical"}}
/>
This creates a textarea that autosizes based on the size of the content. I have styled it so that the user is only able to manually expand vertically.
The current behavior is that, when the user shrinks the textbox, there is no way to view the content out of sight. My goal is to bring up the scroll bar when the user shrinks the text area.
View CodeSandbox to test.
Simply add overflow: 'auto' to the style attribute.
<TextareaAutosize
minRows="2"
style={{ width: '50%', resize: 'vertical', overflow: 'auto' }}
/>
Codesandbox
Is there a way to change the entire background color of the bottom tab when switching tabs in React Navigation 5?
Like this (tiktok app for example):
Background black on first tab
Background white on first tab
You can set the style in tabBarOptions
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
inactiveTintColor: '#fff',
style: {
backgroundColor: '#000',
}
}}
>
{/* screens */}
</Tab.Navigator>
Use the currently active route information from the props to switch that color as needed.
Runnable example: https://snack.expo.io/#notbrent/createbottomtabnavigator---background-color
edit: it looks like I am actually mistaken about this and there isn't an obvious way to edit the tab bar background color based off of the active tab with standard bottom tab navigator. You can use createMaterialBottomTabNavigator to get this behavior easily, otherwise you will likely need to do some other wokaround, eg: implement a custom tab bar or extend the default tab bar.
Following the instructions in the gatsby-background-image documentation, I'm able to add a full width background image to a component by including the following in my component
<BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}>
{children}
</BackgroundImage>
This results in the following "stretched" background:
However, I do not want my image to be the full width of the component. Instead, I would like my background image to repeat within my component to achieve the following:
I see that styling of the background image is supported, but I'm not sure how correctly style the background image to make it repeat. Any help would be much appreciated!
Just add the style object as shown in the Styling & Passed Through Styles section.
<BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}
style={{ backgroundRepeat: 'repeat', backgroundSize: '200' }}>
{children}
</BackgroundImage>
I am using Material-UI React Drawer. Is there a way I can have the drawer confined to a specific section of my page instead of occupying the entire window? I have tried giving the root component an absolute position instead of fixed but this does not change the placement of the drawer.
<div className="confirmation-drawer">
<Drawer
anchor="top"
open={state.top}
onClose={toggleDrawer('top', false)}>
<!-- Drawer content goes here -->
</Drawer>
</div>
I need the drawer inside the .confirmation-drawer div and not the entire page. Any help would be highly appreciated.
The code below worked for me. It uses the preferred one-off styling method in the MUI docs. Transitions work without any additional tweaks. Of course make sure you have a 'relative' element up in the DOM tree.
<Drawer
sx={{
'& .MuiDrawer-root': {
position: 'absolute'
},
'& .MuiPaper-root': {
position: 'absolute'
},
}}
>
</Drawer>
what #Jon Deavers said is true, though there is a workaround. you can find the z-index of the drawer overlay (1300 in may case) and set a higher z-index to the component you wish to be on top. then just set paddings inside the drawer so all it's content is visible.
as i said its merely a workaround but i hope it helps somebody.
try this:
import {styled, Drawer as MuiDrawer} from '#mui/material'
const Drawer = styled(MuiDrawer)({
position: "relative", //imp
width: 240, //drawer width
"& .MuiDrawer-paper": {
width: 240, //drawer width
position: "absolute", //imp
transition: "none !important"
}
})
If you want transitions then use collapse.
<Collapse orientation='horizontal' in={open} >
<Box> ... </Box>
</Collapse>
The Drawer component is a nav menu component that is designed to overlay the application and not to be nested inside a container. It will always appear over your other content.
If you are looking to have a dynamic element in which you can hide information and other interactive components you may want to take a look at the Accordion component from MUI.
https://material-ui.com/api/accordion/
That will allow you to have a small "drawer"-like element that other components can be hidden inside of.
I have a blueprintjs dialog :
<BP.Dialog iconName="application" isOpen={this.state.fieldformopen} ...>
When the state fieldformopen changes, the dialog appear. But it appears with a growing animation. This is a problem since the dialog is quite full of things, and the animation is slow and discontinued.
I don't see any way of disabling the animation. The fields transitionDuration and transitionName are set only when changing css.
Thanks for any information to disable the animation.
Add this style to the Dialog component:
style={{ transition: 'none' }}
So your component would look like:
<Dialog
style={{ transition: 'none' }} >
This removes the growing animation, but still keeps the more subtle fade animation.