Stack
The work of Stack is similar to the flex property in css. With use of a stack you can set the direction of items in row and column. You can add the divider, icon and image between the items.
Source Code:
import { Stack, Button,Typography, Divider } from "@mui/material";
import SendIcons from '@mui/icons-material/Send';
function MultiStack() {
return(
<>
{/* stack usage with button */}
<Stack spacing={4}>
<Typography variant='h3'>Default Stack</Typography>
<Stack spacing={3}>
<Button variant="contained" color="primary">mui buttons</Button>
<Button variant="contained" color="primary">mui buttons</Button>
<Button variant="contained" color="primary">mui buttons</Button>
</Stack>
<Typography variant='h3'>Stack with direction='row'</Typography>
<Stack spacing={3} direction='row' justifyContent="center">
<Button variant="contained" color="secondary">mui buttons</Button>
<Button variant="outlined" color="secondary">mui buttons</Button>
<Button variant="contained" color="secondary">mui buttons</Button>
</Stack>
<Typography variant='h3'>Stack with divider</Typography>
<Stack spacing={3} direction='row' justifyContent="center"
divider={<Divider orientation="vertical" flexItem />}>
<Button variant="outlined" color="secondary">mui buttons</Button>
<Button variant="outlined" color="secondary">mui buttons</Button>
<Button variant="outlined" color="secondary">mui buttons</Button>
</Stack>
<Stack spacing={3} direction='row' justifyContent="center"
divider={<Divider orientation="vertical" flexItem sx={{ bgcolor: "secondary.light" }} />}>
<Button variant="contained" color="secondary">mui buttons</Button>
<Button variant="contained" color="secondary">mui buttons</Button>
<Button variant="contained" color="secondary">mui buttons</Button>
</Stack>
<Stack spacing={3} direction='row' justifyContent="center" alignItems="center" divider={<SendIcons/>}>
<Button variant="outlined" color="secondary">mui buttons</Button>
<Button variant="outlined" color="secondary">mui buttons</Button>
<Button variant="outlined" color="secondary">mui buttons</Button>
</Stack>
<Stack spacing={3} direction='row' justifyContent="center"
divider={<Divider style={{ background: "url('https://bellard.org/bpg/2small.png') no-repeat center/cover",
height:"50px",width:"50px",border:"none" }} />}>
<Button variant="contained" color="warning">mui buttons</Button>
<Button variant="contained" color="warning">mui buttons</Button>
<Button variant="contained" color="warning">mui buttons</Button>
</Stack>
</Stack>
</>
);
}
export default MultiStack;
SpeedDial
Now the speed dial comes into the lab to the core.The use of the speed dial component is to access some quick features to display on hover like taking a screenshot, chat, print the page etc. in speed dial you set the direction with left, right, top, bottom. You can also change the color and image in it conveniently that optimizes your working pattern effectively.
Source Code:
import { Typography, SpeedDial, SpeedDialAction, SpeedDialIcon } from "@mui/material";
import CameraIcons from '@mui/icons-material/CameraAlt';
import ScreenshotIcons from '@mui/icons-material/Screenshot';
import MicIcons from '@mui/icons-material/Mic';
import EditIcons from '@mui/icons-material/Edit';
function MuiSpeedDial() {
return(
<>
<Typography variant="h4">Speed Dial using material ui</Typography>
{/* default speeddial */}
<SpeedDial ariaLabel='speed dial for quick features'
sx={{position:'absolute', bottom: 20,right: 20}}
icon={<SpeedDialIcon/>}
>
<SpeedDialAction icon={<CameraIcons/>} tooltipTitle='Photo' />
<SpeedDialAction icon={<ScreenshotIcons/>} tooltipTitle='snapshot' />
<SpeedDialAction icon={<MicIcons/>} tooltipTitle='Google Assistance' />
</SpeedDial>
{/* speeddial with tooltip */}
<SpeedDial ariaLabel='speed dial for quick features'
sx={{position:'absolute', bottom: 20,right: 100}}
icon={<SpeedDialIcon />}
>
<SpeedDialAction icon={<CameraIcons/>} tooltipTitle='Photo' tooltipOpen/>
<SpeedDialAction icon={<ScreenshotIcons/>} tooltipTitle='snapshot' tooltipOpen/>
<SpeedDialAction icon={<MicIcons/>} tooltipTitle='Google Assistance' tooltipOpen/>
</SpeedDial>
{/* speeddial with customisation */}
<SpeedDial ariaLabel='speed dial for quick features'
sx={{ position:'absolute', bottom: 20,right: 180,
'& .MuiFab-primary': { '&:hover': {backgroundColor: '#a46bc7'}, backgroundColor: 'purple', color: 'white' } }}
icon={<SpeedDialIcon />}
>
<SpeedDialAction icon={<CameraIcons/>} tooltipTitle='Photo'
sx={{ backgroundColor: '#e81a4a', color: 'white'}} />
<SpeedDialAction icon={<ScreenshotIcons/>} tooltipTitle='snapshot'
sx={{ backgroundColor: '#e81a4a', color: 'white'}}/>
<SpeedDialAction icon={<MicIcons/>} tooltipTitle='Google Assistance'
sx={{ backgroundColor: '#e81a4a', color: 'white'}}/>
</SpeedDial>
{/* speedial icon change onclick */}
<SpeedDial ariaLabel='speed dial for quick features'
sx={{position:'absolute', bottom: 20,right: 260}}
icon={<SpeedDialIcon openIcon={<EditIcons />}/>}
>
<SpeedDialAction icon={<CameraIcons/>} tooltipTitle='Photo' />
<SpeedDialAction icon={<ScreenshotIcons/>} tooltipTitle='snapshot' />
<SpeedDialAction icon={<MicIcons/>} tooltipTitle='Google Assistance' />
</SpeedDial>
{/* speedial direction */}
<SpeedDial ariaLabel='speed dial for quick features'
sx={{position:'absolute', bottom: 20,right: 340}}
icon={<SpeedDialIcon/>}
direction='left'
>
<SpeedDialAction icon={<CameraIcons/>} tooltipTitle='Photo' />
<SpeedDialAction icon={<ScreenshotIcons/>} tooltipTitle='snapshot' />
<SpeedDialAction icon={<MicIcons/>} tooltipTitle='Google Assistance' />
</SpeedDial>
</>
);
}
export default MuiSpeedDial ;
Rating
Rating in version 5 comes from the lab to the core. You can make rating style in one single line using component. In rating component you can change the color and image of it.
Source Code:
import { Stack,Rating, Typography, Box } from "@mui/material";
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import * as React from 'react';
import FavoriteIcons from '@mui/icons-material/Favorite';
import FavoriteBorderIcons from '@mui/icons-material/FavoriteBorder';
import SentimentVeryDissatisfiedIcons from '@mui/icons-material/SentimentVeryDissatisfied';
import SentimentDissatisfiedIcons from '@mui/icons-material/SentimentDissatisfied';
import SentimentSatisfiedIcons from '@mui/icons-material/SentimentSatisfied';
import SentimentSatisfiedAltIcons from '@mui/icons-material/SentimentSatisfiedAltOutlined';
import SentimentVerySatisfiedIcons from '@mui/icons-material/SentimentVerySatisfied';
// for hover text
const labels = { 0.5: 'Bad', 1: 'Bad+', 2: 'Poor+', 2.5: 'Good', 3: 'Good+', 3.5: 'Nice',
4: 'Nice+', 4.5: 'Very Nice', 5: 'Very Nice+',
};
function getLabelText(value) {
return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
}
// customize icon and color
const StyledRating = styled(Rating)({
'& .MuiRating-iconFilled': { color: '#ff6d75', },
'& .MuiRating-iconHover': { color: '#ff3d47', },
});
// emoji rating
const EmojiRating = styled(Rating)(({ theme }) => ({
'& .MuiRating-iconEmpty .MuiSvgIcon-root': { color: theme.palette.action.disabled, },
}));
const customIcons = {
1: { icon: <SentimentVeryDissatisfiedIcons color="error" />, label: 'Very Disappointed', },
2: { icon: <SentimentDissatisfiedIcons color="error" />, label: 'Disappointed', },
3: { icon: <SentimentSatisfiedIcons color="warning" />, label: 'Neutral', },
4: { icon: <SentimentSatisfiedAltIcons color="success" />, label: 'Happy', },
5: { icon: <SentimentVerySatisfiedIcons color="success" />, label: 'Very Happy', },
};
function IconContainer(props) {
const { value, ...other } = props;
return <span {...other}>{customIcons[value].icon}</span>;
}
IconContainer.propTypes = {
value: PropTypes.number.isRequired,
};
function MuiRating() {
const [value, setValue] = React.useState(0);
const [hover, setHover] = React.useState(-1);
return(
<>
<Stack spacing={4}>
{/* rating with size */}
<Stack spacing={2} alignItems="center">
<Typography variant="h4">Different ratings style using <span className="highlight">mui</span>
</Typography>
{/* rating component */}
<Rating size="small"/>
<Rating size="medium"/>
<Rating size="large"/>
</Stack>
<Stack spacing={2} alignItems="center">
<Typography variant="h4">Ratings precision <span className="highlight">mui</span> </Typography>
<Rating name="half-rating" size="large" defaultValue={2.5} precision={0.5} />
</Stack>
<Stack spacing={2} alignItems="center">
<Typography variant="h4">Ratings with hover feedback <span className="highlight">mui</span> </Typography>
<Rating name="hover-feedback" precision={0.5} defaultValue={0} size="large" value={value}
onChange={(event, newValue) => { setValue(newValue); }}
onChangeActive={(event, newHover) => { setHover(newHover); }}
/>
{value !== null && (
<Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
)}
</Stack>
{/* customizing color and icon */}
<Stack spacing={2} alignItems="center">
<Typography variant="h4">Customizing ratings icon and color in <span className="highlight">mui</span> </Typography>
<StyledRating
defaultValue={2}
precision={0.5}
icon= {<FavoriteIcons fontSize="inherit" />}
emptyIcon={<FavoriteBorderIcons fontSize="inherit" />}
/>
<EmojiRating
name="highlight-selected-only"
defaultValue={1}
IconContainerComponent={IconContainer}
getLabelText={(value) => customIcons[value].label}
highlightSelectedOnly
/>
</Stack>
</Stack>
</>
);
}
export default MuiRating;
Skeleton
Skeleton components are used to display a placeholder preview of the content before the data gets loaded to reduce the load time frustration. You can see a live example of it on linkedin. It can support three shapes text, rect, circle.
Source Code:
import { Stack,Skeleton, Box} from "@mui/material";
import { Typography } from "@mui/material";
import { useState, useEffect } from "react";
// skeleton function component
function MuiSkeleton() {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false)
}, 3000);
}, []);
return (
<>
<Stack spacing={4}>
<Stack spacing={2} alignItems="center" >
<Typography variant='h4'>Skeleton in <span className="highlight">mui</span></Typography>
<Skeleton variant="circular" width={45} height={45} />
<Skeleton variant="text" width={220}/>
<Skeleton variant="rectangular" width={210} height={118} />
</Stack>
<Stack spacing={2} >
<Typography variant='h4'>Animation in Skeleton</Typography>
<Typography variant="legend" color="#f50057">By default, animation of the skeleton is pulsates,
but you can change the animation to a wave or disable it. </Typography>
<Skeleton />
<Skeleton animation="wave" />
<Skeleton animation={false} />
</Stack>
<Stack spacing={2} alignItems= "center" >
<div className="card" >
<Box sx={{ display:'flex', justifyContent:'center',marginBottom:2}}>
{
loading ? ( <Skeleton variant="circular" width={140} height={140}/> )
: ( <img src="https://joeschmoe.io/api/v1/jack" alt="img"
style={{ width:140,height:140,borderRadius:"50%" }} /> )
}
</Box>
<Box sx={{marginBottom:2}}>
{
loading ? (
<Typography variant="h4"><Skeleton variant="rectangular"/></Typography>
) :
( <Typography variant="h4">jack sparrow</Typography> )
}
</Box>
<Box>
{
loading ? (
<Typography sx={{display:"block"}}><Skeleton variant="rectangular"/></Typography>
) : (
<Typography > Captain Jack Sparrow is a fictional character and the main protagonist of
the Pirates of the Caribbean film series. </Typography> )
}
</Box>
</div>
</Stack>
</Stack>
</>
);
}
export default MuiSkeleton;
Hire Our Worthy Web DevelopersExplore the Benefits of Our Web
Development ServicesGet Expert Assistance
Development ServicesGet Expert Assistance
Conclusion
I hope that this blog might be useful for working in mui. In upcoming blogs we will discuss more about new updates in front end technologies.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
