I'm using the latest versions of react and semantic-ui-react
I have this Iconelement set up from semantic implementing navigation to an external link (github)
<Menu.Item
position="right"
to="https://github.com"
as={Link}
>
<Icon name="github" size="big" />
</Menu.Item>
When I click the icon in my UI, it's trying to append the github url to the url of my UI. So I'm at localhost:blah/someUrl it's requesting localhost:blah/someUrl/https://github.com
Is this an issue with routing or misuse of the <Icon> props?
It's rather a misuse of router link: If you want to link to external pages, don't use routers <Link> component.
It will work the following way:
<Menu.Item
href="https://github.com"
position="right"
target="_blank"
>
<Icon name="github" size="big" />
</Menu.Item>
Related
I'm using a standard Material UI button that looks fine if I refresh the page that I am on. However, if I get to the page through a link from another page (I'm using react-router-dom) then the styling from the button is missing.
import {Link} from "react-router-dom";
<Link
color="inherit"
style={{textDecoration: 'none'}}
to={link}>
<Button variant="contained" color="primary">
test
</Button>
</Link>
I have a sidebar component in my admin panel which has multiple links. Some of these links are in the dropdown menu. Now I want to add an active class based on an active link or if the active link is in the dropdown menu then to the dropdown toggle. Below is my code for a sidebar. Btw I am using antd framework for ui.
<Sider
width={260}
className={styles.sider}
collapsible
trigger={null}
collapsed={drawer}
breakpoint={"md"}
collapsedWidth={0}
>
<Menu mode="inline">
<Menu.Item
icon={<IoGrid />}
key="1"
onClick={(e) => {
toggleKey(e);
gotoPage("/");
}}
className={selectedKey == 1 ? styles.active_item : ""}
>
Dashboard
</Menu.Item>
<SubMenu
title="Settings"
key="2"
icon={<IoSettingsOutline />}
className={selectedKey == 2 ? styles.active_item : ""}
>
<Menu.Item
icon={<IoPersonAddOutline />}
key="2.1"
onClick={(e) => {
toggleKey(e);
gotoPage("/settings/profile");
}}
>
Profile
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
Btw the selectedKey and toggleKey function comes from top level component and gotoPage is just router.push functionality.
Thanks.
As per this answer you should use useRouter hook to get current path.
For your use case instead of equality check you should probably use startsWith or maybe some other check. So it would look like this
Let's say you have
Settings -> /settings
Profile -> /settings/profile
Notifications /settings/notifications
You check if current path starts /settings and you assume that Settings group is active and you simply expand Settings submenu and add active class to Settings group.
If you are currently on /settings/notification this would mean that you can identify following:
active group
active dropdown
active sublink
I think it is better to have custom LinkGroup component that would check for its 'activeness' and would add specific styling and show/hide its submenu.
I'm trying to create a left sidebar only for desktop (min width 1200px), in other case (tablet, mobile), needs to hide the sidebar. I'm using Sidebar Pushable from Semantic UI React.
I tried this demo to this but doesn't works:
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation='push'
icon='labeled'
inverted
vertical
visible={window.innerWidth >= 1200 ? true : false}
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item as='a'>
<Sidebar.Pusher>
<Segment basic>
//CONTENT
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
Someone else had the same problem? Many Thanks!
Armando
the issue is not with render load times. The issue is that react does not re-render a component unless the state of that component changes. Since you had tied the visible prop with window.innerWidth directly, for that component the state was not changing and hence was not re-rendering. Checkthis link with working code sandbox
https://codesandbox.io/s/semantic-ui-example-xqhjl?file=/example.js
I am working on a Server-Side-Rendering React Project, built with Next-JS and Material-UI.
and i want to apply To Material Ui button -> the Link with Dynamic routes
how can i do this? i would apply React Router Link,but it is different...
my problem is that it has another properties required such as "as" property.
what worked for me (inspired from this comment in Github):
<Link
href={'/static/[dynamic]'}
as={'/static/' + someJsString}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
for version v10+:
<Link
href={`/static/${someJsString}`}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
Edit
Starting next.js v10+ you don't need to specify as with Automatic `href` Resolution so the above code can be written as:
<Link
href={'/static/' + someJsString}
passHref>
<Button
component="a">
// other component ...
</Button>
</Link>
I've stacked with some strange issue. When I create a menu block with a button inside of it, I'm expecting to get a "Regular" button, but getting, kind of, Menu Item View.
Instead of
<Menu inverted>
<Menu.Menu>
<Menu.Item header>
<Image className="logo" src={logoImg} avatar />
</Menu.Item>
</Menu.Menu>
<Menu.Menu position={'right'}>
<Menu.Item>
<Button positive>Sign up</Button>
</Menu.Item>
</Menu.Menu>
</Menu>
What could be wrong?
Your code working fine. Here is the working codepen. Issue may be some other custom styles will override your component Button styles.