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.
Related
Anyone please can help? have been looking for solution all over with no luck:(
want to create a popupMenu that opens Dialog page, but should close menu item on click.
<IconButton {...bindTrigger(popupState)}>
<i className="fa-solid fa-ellipsis-vertical"></i>
</IconButton>
<Menu {...bindMenu(popupState)}>
<EditEventModal />
<DeleteEventConfirmation />
</Menu>
not closing
I'm using Semantic UI to design a button component having animation. How can I change custom font color inside button?
Below is my code for the button:
https://codesandbox.io/s/interesting-yonath-7qvwl?file=/index.js
you can use inline styling
<div>
<Button color="google plus" animated="toggle">
<Button.Content style={{color: '#f1f2f3'}} visible href="#" secondary>
<Icon name="google plus" /> hi
</Button.Content>
<Button.Content style={{color: '#f1f2f3'}} hidden href="#">
Connect <Icon name="google plus" />
</Button.Content>
</Button>
</div>
i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
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>
I'm using a Sider component with a Menu inside which has some Submenus on it.
When my component is static, meaning not plugged to redux, just a plain component, the Menu /> and its children work as expected.
But, in my case im trying to make my menu dynamic, so in reality my component is connected to the store using Redux and to generate all the links im using mapStateToProps and then 'connect'.
When i'm using my component with Redux, for some reason the menu doesnt work as expected. The problem boils down to ANTD not removing a class, ant-menu-inline-collapsed which basically makes my the menu not show any text even when it is expanded.
To compare current behaviours vs expected, I found the ONE difference generated on the code which is basically creating the problem
Current
Closed sider:
<div class="ant-layout-sider ant-layout-sider-collapsed" style="...">
<div class="ant-layout-sider-children">
<ul class="ant-menu ant-menu-dark ant-menu-inline-collapsed ant-menu-root ant-menu-vertical" role="menu" ...>
Opened:
<div class="ant-layout ant-layout-has-sider"><div class="ant-layout-sider" style="...">
<div class="ant-layout-sider-children">
<ul class="ant-menu ant-menu-dark **ant-menu-inline-collapsed** ant-menu-root ant-menu-vertical" role="menu">
The problem here is that the the sider is opened, the menu UL is keeping the ant-menu-inline-collapsed class. In reality it should switch it to ant-menu-inline.
I cant understand why this is happening. As soon as i remove the redux logic from my component, the Menu behaviour works fine and the class in question is removed.
The moment i put the redux logic back in, for some reason ANTD doesnt remove said class.
I'm lost as to how to proceed.
Menu configuration is the standard and it should not be affected at all as far as i know.
This is my menu code, in case you want to have a quick look:
<Menu
onClick={this.handleClick}
theme="dark"
mode="inline"
defaultSelectedKeys={['1']}
selectedKeys={[this.state.current]}>
<Menu.Item key={ROUTE_DASHBOARD}>
<Tooltip placement="right">
<Link to={ROUTE_DASHBOARD}>
<Icon type="calendar" />
<span className="nav-text">Home</span>
</Link>
</Tooltip>
</Menu.Item>
<SubMenu
key='sub2'
disabled={!budgetView}
title={<span><Icon type="mail" /><span>Top Down</span></span>}>
<Menu.Item key="3">
<Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/exec`}>
<Icon type="calendar" />
<span className="nav-text">Exec Recap</span>
</Link>
</Menu.Item>
<Menu.Item key="4">
<Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/total`}>
<Icon type="calendar" />
<span className="nav-text">Total</span>
</Link>
</Menu.Item>
<Menu.Item key="5">
<Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/women`}>
<Icon type="calendar" />
<span className="nav-text">Women</span>
</Link>
</Menu.Item>
<Menu.Item key="6">
<Link to={`${ROUTE_BUDGET}/SS/budget/${budgetId}/version/${versionName}/${versionId}/men`}>
<Icon type="calendar" />
<span className="nav-text">Men</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub7"
title={<span><Icon type="team" /><span>Middle Out</span></span>}>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
title={<span><Icon type="file" /><span>Bottom Up</span></span>}
>
<Menu.Item key="3">Buttom Up 1</Menu.Item>
<Menu.Item key="4">Buttom Up 2</Menu.Item>
<Menu.Item key="5">Buttom Up 3</Menu.Item>
</SubMenu>
<SubMenu
key="sub4"
title={<span><Icon type="area-chart" /><span>Reporting</span></span>}>
<Menu.Item key="3">Reporting-1</Menu.Item>
<Menu.Item key="4">Reporting-2</Menu.Item>
<Menu.Item key="5">Reporting-3</Menu.Item>
</SubMenu>
</Menu>