I have this piece of code here that will make a list of reviews in react, is there a way to add more text into ListItemText because most online tutorials only go up to secondary but I want to add a tertiary text if possible
<Paper>
<List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
{this.state.bookReviews.map((review =>
<>
<ListItem alignItems="flex-start" key={review.id}>
<ListItemAvatar>
<Avatar alt="Cindy Baker" />
</ListItemAvatar>
<ListItemText
primary={review.heading}
secondary={
<React.Fragment>
<Typography
sx={{ display: 'inline' }}
component="span"
variant="body2"
color="text.primary"
>
</Typography>
{review.reviewText}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li"/>
</>
))}
</List>
</Paper>
Related
I am using react-pro-sidebar. Menu hierarchy works as expected.
When I click all its submenus are shown. In the submenus I have routing. So when I click anyone of the submenus, all the whole menus are getting collapsed. Looks its due to routing. Is it? If yes, How can prevent this?
i wants to expanded my submenu whenever i clicked on submenu
<ProSidebar collapsed={isCollapsed}>
<Menu iconShape="square">
{/* LOGO AND MENU ICON */}
<MenuItem
onClick={() => setIsCollapsed(!isCollapsed)}
icon={isCollapsed ? <MenuOutlinedIcon /> : undefined}
style={{
margin: "10px 0 20px 0",
color: colors.grey[100],
}}
>
{!isCollapsed && (
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
ml="15px"
>
<Typography variant="h3" color={colors.grey[100]}>
SimpliTaught
</Typography>
<IconButton onClick={() => setIsCollapsed(!isCollapsed)}>
<MenuOutlinedIcon />
</IconButton>
</Box>
)}
</MenuItem>
{/* {!isCollapsed && (
<Box mb="25px">
<Box display="flex" justifyContent="center" alignItems="center">
<img
alt="profile-user"
width="100px"
height="100px"
src={`https://picsum.photos/id/6/200/300`}
style={{ cursor: "pointer", borderRadius: "50%" }}
/>
<span style={{ position: "absolute", right: "0", left: "0" }}>
<CreateOutlinedIcon />
</span>
</Box>
<Box textAlign="center">
<Typography
variant="h2"
color={colors.grey[100]}
fontWeight="bold"
sx={{ m: "10px 0 0 0" }}
>
Shoaib Qasim
</Typography>
<Typography variant="h5" color={colors.greenAccent[500]}>
Super Admin
</Typography>
</Box>
</Box>
)} */}
<Box paddingLeft={isCollapsed ? undefined : "10%"}>
{!isCollapsed && (
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
User Management
</Typography>
)}
<Item
title="Dashboard"
to="/dashboard"
icon={<HomeOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<SubMenu
title="Users"
icon={<PeopleOutlineIcon />}
selected={selected}
setSelected={setSelected}
style={{
color: colors.grey[100],
}}
>
<Item
title="Users List"
to="/user-list"
icon={<PermIdentityOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
</SubMenu>
{!isCollapsed && (
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Manage Content
</Typography>
)}
<Item
title="Add User"
to="/add-user"
icon={<CategoryIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Books"
to="/book-list"
icon={<ContactsOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Top Courses"
to="/top-courses"
icon={<ReceiptOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Pages
</Typography>
<Item
title="Profile Form"
to="/form"
icon={<PersonOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Calendar"
to="/calendar"
icon={<CalendarTodayOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
</Box>
</Menu>
</ProSidebar>
I am building an appbar in React. I am using material components to make it.
Is there a way to center the "TITLE" element and make the menu items align to the right at the same time?
enter image description here
The problem is that centering the "TITLE" element and placing the menu items on the right does not seem possible inside a container such as a Box or a Grid. i use "<Box sx={{ flexGrow: 1 }} />" to avoid that components of menu align next to title but I can't therefore align the "TITLE" element in the center of the appbar
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography
variant="h6"
noWrap
component="div"
sx={{ display: 'block'}}
>
TITLE
</Typography>
<Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: 'flex' }}>
<IconButton size="large" aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
</IconButton>
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
>
<Badge badgeContent={17} color="error">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
size="large"
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle />
</IconButton>
</Box>
</Toolbar>
</AppBar>
{renderMobileMenu}
{renderMenu}
</Box>
How do I put the clear icon on the card on the top right side of the card overlapping it.
What is the proper way to do it?
CLICK HERE = CODESANDBOX
<Paper
sx={{
padding: "1em",
background: "black"
}}
>
<IconButton color="error" aria-label="add to shopping cart">
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>;
Try this:
<Paper
sx={{
padding: "1em",
background: "black",
position: "relative"
}}
>
<IconButton
sx={{
position: "absolute",
top: "-15px",
right: "-15px",
// not necessary, just added this coz it looks weird
background: "white"
}}
color="error"
aria-label="add to shopping cart"
>
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>
What I did is simple, make the Paper position relative, then make the icon button absolute.
This way the button will follow whenever you move/animate the Paper.
The outcome would be something like this: https://wphyd.csb.app/
I have a project to monitor employees and I have a sidebar in this project.
As is evident in the first two pictures, there is a sidebar, and inside it there is a button. Then I press the button, then the dialog appears in the "bottom left" of the page, and I want to do the same idea.
And the thing that I did is in the third picture,
I create a button within the sidebar, and when I click on this button, a dialog appears, but the dialog appears in the middle of the page and not at the bottom left of the page.
How can I solve this problem?
const useStyles = makeStyles((theme: Theme) =>
createStyles({
dialogPaper: {
maxWidth: '36rem',
height: '33rem',
},
border: {
borderBottom: '10rem'
}, paper: {
// padding: theme.spacing(2),
// textAlign: 'center',
// color: theme.palette.text.secondary,
},
dividerColor: {
backgroundColor: '#000000',
},
resize: {
fontSize: 24,
color: '#BDBDBD'
},
oneEdgeShadow: {
background: '#384047',
boxShadow: '0 0 0 4px #384047, 0 4px 4px black',
}
})
);
export default function FormDialog() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const navigation = useNavigate();
const onMySettings=() =>{
console.log('Clicked on My settings');
navigation('/dashboard/workspace-sidebar/settings');
}
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog classes={{paper: classes.dialogPaper}} open={open} onClose={handleClose}
aria-labelledby="form-dialog-title">
<Grid container xs={12}>
<Grid item xs={2}>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{
fontWeight: 500,
fontSize: '11px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#BDBDBD'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
</ListItem>
</List>
</Grid>
<Divider classes={{root: classes.dividerColor}} orientation="vertical" flexItem/>
<Grid item xs={5}>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '10px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{
paddingBottom: '1rem',
fontWeight: 500,
fontSize: '10px',
lineHeight: 1,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: '#BDBDBD'
}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
<ListItemText>Ali Baba {/*Workspaces*/}</ListItemText>
</ListItem>
<ListItem button>
<ListItemText primary="Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Import/Export"/>
</ListItem>
<ListItem button>
<ListItemText primary="People"/>
<Button onClick={handleClose} startIcon={<PersonAddIcon />} style={{
borderRadius: 2,background: '#7b68ee'}} variant="contained">
Invite
</Button>
</ListItem>
<ListItem button>
<ListItemText primary="Spaces"/>
</ListItem>
<ListItem button>
<ListItemText primary="Integrations"/>
</ListItem>
<ListItem button>
<ListItemText primary="Template Center"/>
</ListItem>
<ListItem button>
<ListItemText primary="Trash"/>
</ListItem>
<ListItem button>
<ListItemText primary="Security & Permissions"/>
</ListItem>
</List>
</Grid>
<Divider classes={{root: classes.dividerColor}} orientation="vertical" flexItem/>
<Grid item xs>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button style={{paddingBottom: '1rem'}}>
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg"/>
</ListItemAvatar>
<ListItemText>Ali Baba</ListItemText>
</ListItem>
<ListItem button onClick={onMySettings}>
<ListItemText primary="My Settings"/>
</ListItem>
<ListItem button>
<ListItemText primary="Notifications"/>
</ListItem>
<ListItem button>
<ListItemText primary="Layout size & style"/>
</ListItem>
<ListItem button>
<ListItemText primary="Rewards"/>
</ListItem>
</List>
<List component="nav" aria-label="main mailbox folders"
style={{paddingLeft: '1rem', fontSize: '14px', color: '#BDBDBD',
lineHeight: 1}}>
<ListItem button>
<ListItemText primary="Log out"/>
</ListItem>
<Divider classes={{root: classes.dividerColor}} variant="middle" />
<ListItem button>
<ListItemText primary="Help"/>
</ListItem>
<ListItem button>
<ListItemText primary="Hotkeys"/>
</ListItem>
<ListItem button>
<ListItemText primary="Dark mode"/>
</ListItem>
</List>
</Grid>
</Grid>
</Dialog>
</div>
);
}
You need to modify the paper style of the Dialog component.
First create your desirable style and position by makeStyles as below:
const useStyles = makeStyles({
paper: {
position: "absolute",
left: 0,
bottom: 0
}
});
and then pass it to the Dialog component:
<Dialog
classes={{ paper: classes.paper }}
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
>
working example in sandbox
Currently using MUI grid system, and I am by no means an expert. I have currently have a grid that looks like this by default on you typical screen
if you make the screen a bit smaller all the way up until 600px the grid becomes mashed and looks kinda wonky like this
Once you get below 600 px the grid finally stacks like this
and I would like this desired effect to happen way before like around 900 px is there a way to achieve this??? Ive tried almost everything but the grid won't stack like i would like in the last picture. My grid is as follows:
<Grid
container
spacing={2}
className={classes.grid}
alignItems='center'
>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginBottom: 20 }}
>
<Img
placeholder={BarhopPlace}
src={BarHop}
alt='barhop'
cache={false}
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography
variant='h5'
variant='h5'
style={{ marginBottom: 10 }}
>
Bar Hop
</Typography>
<Typography variant='body2'>
A platform that provides users with the top drinking places
based on their location. Technologies used: ReactJS, NodeJS,
JavaScript, and the Yelp API .
</Typography>
<br />
<Box className={classes.alumniChips}>
<Tooltip
title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
aria-label='add'
>
<a
rel='noopener noreferrer'
href='https://barhop-wyncode.herokuapp.com/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
</Tooltip>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/Bar_Hop_React_App'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<BarHopModal />
</Box>
</Container>
</Grid>
<br />
<Divider style={{ width: "100%" }} />
<br />
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginTop: 20, marginBottom: 20 }}
>
<Img
placeholder={OddjobsPlace}
src={Oddjobs}
alt='oddjobs'
cache={false}
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography
variant='h5'
variant='h5'
style={{ marginBottom: 10 }}
>
Odd Jobs
</Typography>
<Typography variant='body2'>
A platform that pairs consumers with reliable contractors.
Technologies used: ReactJS, Ruby on Rails, PostgreSQL, Calendly
Integration and Google Maps API.
</Typography>
<br />
<Box className={classes.alumniChips}>
<Tooltip
title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
aria-label='add'
>
<a
rel='noopener noreferrer'
href='https://oddjobs-react.herokuapp.com/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
</Tooltip>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/Oddjobs_React_App'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<OddjobsModal />
</Box>
</Container>
</Grid>
<br />
<Divider style={{ width: "100%" }} />
<br />
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginTop: 20 }}
>
<Img
placeholder={JobTrackerPlace}
src={JobTracker}
cache={false}
alt='JobTracker'
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography variant='h5' style={{ marginBottom: 10 }}>
JobTracker
</Typography>
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to
track job applications, store resume's, and monitor follow ups.
Technologies used: ReactJS, NodeJS, Google Cloud Functions, and
Google Firestore.
</Typography>
<br />
<Box className={classes.alumniChips}>
<a
rel='noopener noreferrer'
href='https://jobtracker.netlify.app/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/JobTracker_Client'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<JobTrackerModal />
</Box>
</Container>
</Grid>
</Grid>
Sorry for the long post!! Thanks!
All you should need to do is change sm={6} to md={6} (see https://material-ui.com/customization/breakpoints/#breakpoints). sm is 600px and up, md is 960px and up. Then your items will be full-width (12 columns) from 0px (xs) up till 960px (md).