I'm developing a React web app using the Material-UI framework. I've now come to a point where I want to render something on top of the AppBar, but from a different file.
My app is structured like this:
Main.js - contains the AppBar and react-router
Various views or "pages" which are loaded by react-router as children of Main.js
Various components that are rendered by these pages.
You can see what I'm trying to achieve below.
If it helps, here is the code for the AppBar, note; I have also tried with "static" position.
<AppBar position="fixed">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleClick}>
<MenuIcon/>
</IconButton>
<Typography variant="h4" className={classes.title}>
<Link href="/" variant="h4" color="inherit">Site Name</Link>
</Typography>
</Toolbar>
<div>
<Menu
id="Menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}>
<MenuItem onClick={handleClose}>
// SOME MENU ITEM
</MenuItem>
</Menu>
</div>
</AppBar>
And the page where I am trying to render the widget. For now I am just using a Typography component as a placeholder. My understanding is that I need to set the Z index of the div that this widget is wrapped in to elevate it, however, I assume that it is only relative to other components within this view, and not also the AppBar as that is coming from elsewhere?
<div>
<div
style={{
height: 20,
backgroundColor: "yellow",
position: "relative",
zIndex: 10
}}>
<Typography component="h3" variant="h3">Widget Placeholder</Typography>
</div>
<Toolbar></Toolbar> // Empty toolbar is used to push all the other content down below the AppBar when it's position is set to fixed
// other content from this page
</div>
Code sandbox: https://codesandbox.io/s/goofy-feather-cf1kd?file=/src/App.js
Thanks :)
Related
So I have the following problem: I have made a Material-UI DataGrid in React JS which I would like to use inside a Material-UI DialogContent. Everything in the table works correctly when put in a Dialog - ordering, renderCells, checkboxSelection, etc. except for using the default filtering. Here is a bare bones example which recreates the bug: https://codesandbox.io/s/relaxed-stallman-sev7x?file=/src/demo.js
Clicking on the column name/options then clicking on "filter" brings out the bug, which is that you can't type in the filter field. Does anyone know a solution to this?
Thanks in advance and sorry if question is phrased badly or a duplicate, first post here on SO
Add disableEnforceFocus to the Dialog component.
<Dialog disableEnforceFocus fullWidth maxWidth="xl" open={true} onClose={this.onClose}>
<DialogTitle>Test Dialog Grid</DialogTitle>
<DialogContent>t>
<div style={{ backgroundColor: "white" }}>
<DataGrid columns={columns} rows={rows} autoHeight />;
</div>
</DialogContent>
</Dialog>
<div style={{ backgroundColor: "white" }}>
<DataGrid columns={columns} rows={rows} autoHeight />;
</div>
</div>
Following the example at https://material-ui.com/guides/composition/#button, i define in my main page a button:
<BrowserRouter>
<Box m={2}>
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
component={SubmitTime}>
Enter hours
</Button>
</Box>
</BrowserRouter>
Documentation states:
Routing libraries
The integration with third-party routing libraries is achieved with the component prop. The behavior is identical to the description of the prop above. Here are a few demos with react-router-dom. It covers the Button, Link, and List components, you should be able to apply the same strategy with all the components.
Now, based on the above, my understanding would be that the above would render a button that, when clicked, would get me to the SubmitTime component. Instead, I get the component itself rendered:
Being new to React and react-router-dom, i think i am doing something wrong, but can't understand what?? Any clue appreciated.
I tried adding 'to' to the component, like so, with same results:
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
component={SubmitTime} to="/timesheet">
Enter hours
</Button>
component is supposed to be the style of the button. Here you can see an example of using the button as a link: https://material-ui.com/components/buttons/#cursor-not-allowed. Also try reading the api: https://material-ui.com/api/button/#props
If you want your button to function as a link, add the href="/timesheet" attribute to it. Else push the route to the history:
const history = useHistory();
...
<Button
size="large" variant="contained"
color="primary" endIcon={<TimerIcon />}
fullWidth={true}
onClick={() => history.push("/timesheet")}
>
Enter hours
</Button>
I have a functional REACT component, code is as follows
const MobileListing = (props) => {
function handleClick() {
console.log('in cardClick');
}
return (
<div>
<Row>
<Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Row>
</div>
);
}
export default MobileListing;
I want to make the entire card clickable. I read through a post on stack overflow Making whole card clickable in Reactstrap which talks about using an anchor tag, but that doesn't work for me.
Can someone help me understand what I am doing wrong?
A card looks like this on my site and I want to make the whole card clickable.
You can use the onClick either on the top-level div element for this, or, in case there would be more cards inside the Row you can wrap each with a div and give it the onClick, property.
such like:
<div>
<Row>
<div onClick={handleClick}>
<Card style={{ width: '18rem', cursor : 'pointer' }} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
</Row>
</div>
It is better to wrap it around with an anchor tag because clickable things should be links if they go to places, and should be buttons if they do things.
Using click handlers with other things just make things inaccessible.
I am trying to build a music tour website using React material-ui.
I woul like the website to look like this one: https://www.oddfantastic.com/
I am new to React and after looking to libraries such as bootstrap and material-ui and decided to stick to material-ui. Right now I'm stuck on the first page with the sliding images. I tried different ways to obtain the result of the first page of the above website but no luck until now.
I started using grid and cards, and now I am trying grid list. Here is my code:
import Slide from '#material-ui/core/Slide';
import React, { Component } from 'react'
import { Grid, Card, CardContent, CardMedia, Typography } from '#material-ui/core';
import GridList from '#material-ui/core/GridList';
import GridListTile from '#material-ui/core/GridListTile';
import { Carousel, CarouselSlide } from 'material-ui-carousel'
export default class App extends Component {
pictures = [
{imagel: './images/radio7-2-1.png', imager: './images/radio7-2-2.png', title: 'r7-2'},
{imagel: './images/radio7-3-1.png', imager: './images/radio7-3-2.png', title: 'r7-3'},
{imagel: './images/masterphil-1.png', imager: './images/masterphil-2.png', title: 'mp'},
{imagel: './images/vito-1.png', imager: './images/vito-2.png', title: 'vito'},
];
render () {
return (
// <Grid container justify="center" spacing={0}>
/* {[0, 1].map(value => (
<Grid key={value} item> */
<Carousel>
{this.pictures.map(({ imagel, imager, title }) => (
<CarouselSlide key={title}>
<GridList cellHeight={160} cols={2}>
<GridListTile key={title} style={{ height: 'auto' }}>
<img src={imagel} alt={title} />
</GridListTile>
</GridList>
{/* <Card width="100%" key={title}>
<CardMedia
image={imagel}
title={title}
style={{
height: 0,
width: '50%',
paddingTop: '75%',
}}
/>
<CardMedia
image={imager}
title={title}
style={{
height: 0,
width: '50%',
paddingTop: '75%',
}}
/>
<CardContent>
<Typography>{title}</Typography>
</CardContent>
</Card> */}
</CarouselSlide>
))}
</Carousel>
/* </Grid>
))}
</Grid> */
)
}
}
Here is the obtained result:
It looks like all the images appear at the same time.
Since my knowledge is really really limited, I am wondering if I chose the right library. Especially that I couldn't find a material-ui component allowing to achieve what I want.
Any advice or direction would be great.
Thanks
The MUI official doc consists of an example of using Carousel Effect.
The example can be found here
The demo uses react-swipeable-views to create a carousel.
I think you are looking for this package which is an extendible Carousel UI component using Material-UI. Happy Coding!
Material UI doesn’t have a native Carousel component btw and I find Material UI customization very challenging for beginners. After trying many carousel libraries recently, I found the ant design has the best ready-to-use carousel. The library is developed and maintained by Alibaba group, so you can rely on it better than some small libraries.
if someone still stacked in this, just use this:
npm install react-material-ui-carousel --save
you should install also:
npm install #mui/material
npm install #mui/icons-material
npm install #mui/styles
import Carousel from 'react-material-ui-carousel';
<Carousel>
{
this.props.item.images.map( (image, i) => <img key={i} src={image} /> )
}
</Carousel>
I have this material-ui list:
<List dense>
{this.state.issues.map((item, i) => {
return <Link target="_blank" to={item.issue_url} key={i}>
<ListItem button>
<ListItemText primary={item.issue_state}/>
<ListItemSecondaryAction>
<IconButton>
<ArrowForward/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Link>
})
}
</List>
issue_state is obtained from MongoDB. Can I add another column to my list showing another field from the database? I tried:
<ListItemText primary={item.issue_state}/>
<ListItemText primary={item.issue_title}/>
This displays what I want but the issue_title test is centered. I'd like it left aligned. Can this be done?
ListItemText component renders with the following CSS style that allows it to be flexible to grow and shrink according as the width and height of its content.
flex: 1 1 auto;
Its ancestor ListItem component renders as an inline-flex.
AFAICT, the results you're looking to achieve can't be done without overriding these styles. Not to worry, there are other ways to go that uses available APIs exposed in the component.
Never mind that the name for the component seems to be misleading that its usage is specific for rendering text in the list item.
A closer look in the ListItemText component API documentation shows that the primary property is of the node type.
That implies that the ListItemText can be used to render string, function, and React.Element in a manner similar to the snippet below.
<ListItemText primary={<div>Foo<br/>Bar<br/>Baz</div>} />
There is also the secondary property that renders the elements with textual emphasis.
<ListItemText primary="Foo" secondary={<div>Bar<br/>Baz</div>} />
If you need more control over the children of the ListItemText, the API allows for the flexibility to write it this way
<ListItemText>
<Typography variant="subheading">Foo</Typography>
<Typography variant="body1" color="textSecondary">Bar</Typography>
<Typography variant="body1" color="textSecondary">Baz</Typography>
</ListItemText>