In this first example of horizontal menu, I want to change "Navigation Three - Submenu" to open onClick instead onHover and want to add toggle icon (up and down arrow) next to it as well.
In this case, you need to implement your own menu using Tabs component.
Here is the idea of how it's done, you need to add animations on revealing the menu and switching the up/down arrows.
<Tabs onTabClick={() => setShowMenu(prev => !prev)}>
<Tabs.TabPane
tab={
<>
<Icon type="setting" />
Navigation Three - Submenu
<Icon type={showMenu ? "up" : "down"} style={{ marginLeft: "10px" }} />
</>
}
/>
</Tabs>;
{
showMenu && (
<Menu>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</Menu>
);
}
Demo:
Related
<Drawer
width={"80%"}
placement="right"
closable={true}
title={assetName[1]}
onClose={self.onClose}
visible={self.state.visible}
>
<Spin spinning={self.state.detailLoading}>
<Tabs defaultActiveKey="1" type="card" onChange={self.callback} >
<TabPane
tab={
<span>
{trans('dataTracking.productivity')}
</span>
}
key="1"
>
<Productivity
detailKey={self.state.detailKey}
/>
</TabPane>
<TabPane
tab={
<span>
{trans('dataTracking.working')}
</span>
}
key="2"
>
<Working
detailKey={self.state.detailKey}
detailLoading={self.state.detailLoading}
/>
</TabPane>
</Tabs>
</Spin>
</Drawer>
)}
**I'm using tables in Ant design tabs. But when changing the tabs, the previous table appears instead of the table I opened.There are different tables in the transitions between tabs. But when I want to go back to the table I opened at first, the data of the previous table comes. **
createdByModal is basically a chakra modal and I'm using tooltip in it.Whenever i hover on the icons the tooltip shows me on the top of the screen instead of on top of the icon.In the photo you can see the ignore element is showing on the top left corner
const CreatedByModal = () => {
return (
<Stack
spacing={"4"}
margin={"0px !important"}
alignItems={"center"}
px={{ base: "2", lg: "6" }}
pt={"2"}
>
<HStack justifyContent={"space-between"}>
<Tooltip
bg={"white"}
textAlign={"center"}
color={"black"}
placement="top"
label="Tip"
aria-label="A tooltip"
>
<AiFillWallet size={"1.2rem"} color={"#b1bad3"} />
</Tooltip>
<Tooltip
bg={"white"}
textAlign={"center"}
color={"black"}
placement="top"
label="Ignore"
aria-label="A tooltip"
>
<AiFillEyeInvisible size={"1.2rem"} color={"#b1bad3"} />
</Tooltip>
</HStack>
</Stack>
);
};
Have you wrapped your components that want the tooltip with forwardRef?
https://chakra-ui.com/docs/components/tooltip#usage
Or wrap your icon component in a span
https://chakra-ui.com/docs/components/tooltip#with-an-icon
Related to this question How to add a button within a dropdown menu?
Working Codesandbox
I have a Semantic UI React Dropdown and I want to place a little, clickable, delete icon on each row of the dropdown, similar to this photo.
How can I do that?
you can do like this
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
<Dropdown.Item>
<Icon name='attention' className='right floated' />
Important
</Dropdown.Item>
<Dropdown.Item>
<Icon name='comment' className='right floated' />
Announcement
</Dropdown.Item>
<Dropdown.Item>
<Icon name='conversation' className='right floated' />
Discussion
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
if you have some dynamic data then simple map it
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
{
options.map(item => <Dropdown.Item>
<Icon name={item.icon} className='right floated' />
{item.name}
</Dropdown.Item>)
}
</Dropdown.Menu>
</Dropdown>
I'm playing around with ant-design and trying to structure a simple menu, and everything works as expected:
<Menu mode="inline">
<Menu.Item key="/">
<Icon type="dashboard" theme="outlined" />
Dashboard
</Menu.Item>
<Menu.Item key="/transactions">
<Icon type="bars" theme="outlined" />
Transactions
</Menu.Item>
<Menu.Item key="/groups">
<Icon type="team" theme="outlined" />
Groups
</Menu.Item>
<Menu.Item key="/account">
<Icon type="idcard" theme="outlined" />
Account
</Menu.Item>
</Menu>
(https://codesandbox.io/s/wqn37ojmv7)
Now, I wanted to DRY up this code a bit, by making a separate wrapped MenuItem component:
const MenuItem = ({route, icon, children}) => (
<Menu.Item key={route}>
<Icon type={icon} theme="outlined" />
{children}
</Menu.Item>
);
// ...
<Menu mode="inline">
<MenuItem route="/" icon="dashboard">Dashboard</MenuItem>
<MenuItem route="/transactions" icon="bars">Transactions</MenuItem>
<MenuItem route="/groups" icon="team">Groups</MenuItem>
<MenuItem route="/account" icon="idcard">Account</MenuItem>
</Menu>
However, substituting my shiny new component will pretty much break everything - somehow I seem to lose some props that were magically passed to the Menu.Items before (like a clsPrefix or a onItemHover-callback): https://codesandbox.io/s/ojyqy0oqq6
What is going on here? How are these props passed behind the scenes and how can I wrap Menu.Item correctly without losing all of this magic?
You could pass the rest of the passed props
const MenuItem = ({route, icon, children, ...props}) => (
<Menu.Item key={route} {...props}>
<Icon type={icon} theme="outlined" />
{children}
</Menu.Item> );
I do not want my drawer to scroll right and left, but cannot get it to go away. In the Menu and MenuItems I've tried setting max-width/width to 100%, and box-sizing to border-box. Also overflow: hidden on the Drawer itself. Any ideas? I believe it the MenuItem's padding that causes the scroll to appear.
<Drawer
docked={false}
onRequestChange={(drawerOpen) => this.setState({ drawerOpen })}
open={this.state.drawerOpen}>
<Menu>
<MenuItem
containerElement={<Link to="/" />}
primaryText="Home"
/>
</Menu>
<BottomMenu>
<MenuItem
containerElement={<Link to="/asd" />}
primaryText="asd"
/>
</BottomMenu>
</Drawer>
I fixed it by turning off autoWidth on my Menu elements
<Menu
autoWidth={false}
>
ref: http://www.material-ui.com/#/components/menu