I'm using ant design accordian for colapse and expand panel , In that instead of up and down arrow I want + and - icon to be display. How can I achieve that
I'm using this one
https://ant.design/components/collapse/
Please help me on this
Thanks
You can use expandIcon prop
https://codepen.io/pen/?&editors=001&prefill_data_id=ab218015-02c4-4c67-9230-2aa590cf5ff3
<Collapse
{...others}
expandIcon={({ isActive }) => isActive ? <IconYouWant /> : <IconYouWant />}
>
{children}
</Collapse>
Related
Does anybody know how to add onhover effect to react grid gallery?
I have figured out that onhover event needs to be added to the parent element of Gallery.
However, dont know where to go from there.
I need image to increase in size a bit when u hover over it.
<Box sx={maingrid}>
<Box onMouseOver={handleHover}>
<Gallery
images={images}
margin={1}
maxRows ={{xs:4,lg:2, xl:2}}
rowHeight={300}
onClick={handleClick}
enableImageSelection={false}
/>
{!!currentImage && (
<Lightbox
mainSrc={currentImage.original}
imageTitle={currentImage.caption}
mainSrcoriginal={currentImage.src}
nextSrc={nextImage.original}
nextSrcoriginal={nextImage.src}
prevSrc={prevImage.original}
prevSrcoriginal={prevImage.src}
onCloseRequest={handleClose}
onMovePrevRequest={handleMovePrev}
onMoveNextRequest={handleMoveNext}
/>
)}
so what do i need pass in handleHover finc? thanks!
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 need to do two things:
Need to increase default icon arrow size
Need to change icon to a different one when the panel is expanded.
I managed to do that this way:
<Collapse
expandIconPosition='right'
className='collapse-container'
// this works fine
expandIcon={({isActive}) => isActive
? <img src={closeCollapseIcon} />
: <img src={openCollapseIcon} />}
>
<Panel header='Question...' key='3'>
<p className='help-panel-text'>Some text</p>
</Panel>
</Collapse>
My question is:
Is there a way to do the same but in a more elegant way? My solution seems to be too straightforward.
You dont need to render two img tags, you can achieve the same thing with one tag. A more appropriate way would be using the Icon component provided by ant design
expandIcon={({ isActive }) => (
<Icon
component={isActive ? closeCollapseIcon : openCollapseIcon}
width="2em"
height="2em"
/>
)}
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 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