I want navigation like https://material-ui.com/getting-started/installation/ and same ul > li > a> sapn structure like material ui website made in his side navigation. and I want the same effect also.
I used a lot of tricks but it restults fail. Please help
here is my code
<Router>
<div>
<List>
{[0, 1, 2, 3].map(value => (
<ListItem key={value} className={classes.listItem}>
<Link button to="/about">
<ListItemText primary={`Line item ${value + 1}`} />
</Link>
</ListItem>
))}
</List>
</div>
</Router>
Related
I am quite new to react-router, I have this problem on a project where when I scroll down a page and then go to another page the other page start from the part where I left in the previous page but don't start from the top, so what might be the problem and its fixes?
Link of the code
Page 1
Then Routing to next page
function handleClick() {
window.scrollTo({ top: 0 });
}
export default function ElevateAppBar(props: Props) {
return (
<React.Fragment>
<CssBaseline />
<ElevationScroll {...props}>
<AppBar>
<Toolbar className="toolbar">
<Link onClick={handleClick} className="link" to="/">
Home
</Link>
<Link onClick={handleClick} className="link">
About
</Link>
<Link onClick={handleClick} to="/contact" className="link">
Contact
</Link>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar />
</React.Fragment>
);
}
I'm new to Framework and i have an issue with me sidebar which is showing Table tab as default but it should not show any tab's page as clicked. By default it should show nothing. When we click on a particular tab then it should show color on the tab of the sidebar. If i give -1 then the color is getting disappeared on the menu tab but the Tab's page remain as it is. Is it possible to give pathname. how to fix by giving id ? . If Yes Can anyone help me in fixing this issue?
Here is the code:
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.toolbar} />
<List>
{["table", "home"].map((item, index) => {
const Icon = itemsConfig[item].icon;
return (
<ListItem
component={Link}
to={itemsConfig[item].link}
selected={selectedIndex === index}
onClick={event => handleListItemClick(event, index)}
button
key={item}
>
<ListItemIcon>
<Icon />
</ListItemIcon>
<ListItemText primary={itemsConfig[item].text} />
</ListItem>
);
})}
</List>
</Drawer>
Here is whole code: "https://codesandbox.io/s/fervent-browser-ecz7z"
Can anyone help me in this ?
Define your state, that holds the selected index in your <Layout /> component. Define function that manipulate that state and pass it to , <Home /> andcomponents along with the newly defined state. Finally call the function after the initial rendering of the component. For the (class component) use:
componentDidMount() {
this.props.setTabIndex(this.props.index);
}
For the <Table /> use:
useEffect(() => {
props.setTabIndex(props.index);
}, []);
The full result is posted here: https://codesandbox.io/s/cold-mountain-hlhk8?
I'm using admin-on-rest in my react application as admin interface.
My problem is the menu, I'm add a DashboardMenuItem to toggle (show/hide) the menu. But I have no idea what the onClick function should look like and I find no example of this in the documentary or somewhere else.
Can anyone help me by giving an example for this?
My Code:
const Menu = ({ hasDashboard, onMenuTap, resources, translate, logout }) => (
<div style={styles.main}>
<WithPermission value='ROLE_SA'>
{hasDashboard && <DashboardMenuItem onClick={onMenuTap} />}
</WithPermission>
{resources
.filter(r => r.list)
.map(resource => (
<MenuItemLink
key={resource.name}
to={`/${resource.name}`}
primaryText={translatedResourceName(resource, translate)}
leftIcon={<resource.icon />}
onClick={onMenuTap}
/>
))}
{/* <MenuItemLink primaryText='Reports' key='reports' to={`/reports`} leftIcon={<UserIcon />} onClick={onMenuTap} /> */}
<WithPermission value='ROLE_SA'>
<SelectField floatingLabelText='Language for Datasets' onChange={LocaleSwitcher}>
<MenuItem value={'de'} primaryText='DE' />
<MenuItem value={'en'} primaryText='EN' />
</SelectField>
</WithPermission>
{logout}
<img src={Logo} style={{maxWidth: '100%', margin: '0 auto'}} />
</div>
)
(I don't have enough reputation to post more than 2 links, therefore I am writitng out the URLS)
In material-ui (w*w.material-ui.com) I can program nested menus and dropdown menus. But I haven`t found an example to open the nested menus in the main menu.
With nested menus and dropdown menus the nested menus open every time as a new window beside or above the main menu. Like this example: Menu with nested menu opened to the right
But I would like to have the nested menus opened in the main menu. Like this example:
Nested menus open in main menu
Can someone please show me an example how to achieve this.
Thanks
You're using the wrong component. Use a List with ListItems that have NestedItems
<List>
<Subheader>Nested List Items</Subheader>
<ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
<ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
<ListItem
primaryText="Inbox"
leftIcon={<ContentInbox />}
initiallyOpen={true}
primaryTogglesNestedList={true}
nestedItems={[
<ListItem
key={1}
primaryText="Starred"
leftIcon={<ActionGrade />}
/>,
<ListItem
key={2}
primaryText="Sent Mail"
leftIcon={<ContentSend />}
disabled={true}
nestedItems={[
<ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
]}
/>,
<ListItem
key={3}
primaryText="Inbox"
leftIcon={<ContentInbox />}
open={this.state.open}
onNestedListToggle={this.handleNestedListToggle}
nestedItems={[
<ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
]}
/>,
]}
/>
</List>
I have a sample code here: ListItem with nested list I want to prevent the link and trigger the nested list. Or I want when I click the rightIconButton only triggers the nested list not the link.
<ListItem
value={3}
primaryText="My Collection"
leftIcon={<Avatar src="http://i.imgur.com/fmvLZGS.png" />}
initiallyOpen={false}
containerElement={<NavLink to="/CollectionPage" />}
nestedItems={[
<ListItem
value={4}
key={1}
primaryText="Wines"/>,
<ListItem
value={5}
key={2}
primaryText="Arts"/>,
<ListItem
value={6}
key={3}
primaryText="Vehicles"/>
]} />
Thank you!