I'm creating a react-native app using native-base library, and i'm using native-base list component for the side menu but i have a problem, i can't figure out how to make a submenu in my side menu, i need to be able to open a submenu with animation when a menu item is clicked.
The list is coded as follows:
<List>
<ListItem>
<Text>Menu 1</Text>
</ListItem>
<ListItem>
<Text>Menu 3</Text>
</ListItem>
<ListItem>
<Text>Menu 2</Text>
</ListItem>
</List>
But i want to add a submenu to it, for example if i click on Menu 1 a submenu with sub1 sub2 fade in.
Here's an example in a video of the result i want:
http://res.cloudinary.com/atf19/video/upload/v1500308199/AwesomeScreenshot-2017-07-17T16-14-52-723Z_wymybj.webm
I tried using another list inside my actual list but it just mess up the design, i looked for react native plugin that manage this kind of problem but i didn't find any.
PS: please be advice that the list items are created dynamically from a server.
The possible workaround:
You could have ListItems at the same level created dynamically.
So if you click Menu1. You fetch the data and when ready:
<List>
<ListItem>
<Text>Menu 1</Text>
</ListItem>
<ListItem>
<Text>ITEM 1</Text>
</ListItem>
<ListItem>
<Text>ITEM 2</Text>
</ListItem>
...
<ListItem>
<Text>Menu 3</Text>
</ListItem>
<ListItem>
<Text>Menu 2</Text>
</ListItem>
</List>
And of course have a different style for each of this "child" items. In order to simulate the expected result.
I have done it with HTML components not RN yet. But the idea is the same.
Related
I'm following along with the MUI docs on how to override disabled in a child component. The problem I'm having is that I have a FontAwesomeIcon as my icon for my Tab. I want to display a tooltip with on hover, but clearly I'm doing something wrong here.
The code looks something like this:
<TabList
<Tab
disabled
icon={
<Tooltip title="I'm a tooltip">
<span>
<FontAwesomeIcon icon{regular{"check"}} />
</span>
</Tooltip>
}
</Tab>
</TabList>
The tooltip isn't showing up on hover for me because it's disabled by the tab, but putting a span in there doesn't seem to fix anything. I also tried a hacky version of this solution, but couldn't get it to work. Any help would be appreciate it.
By default, a disabled tab will not trigger user interaction. This can be disabled using styling on the Tab itself:
export default function MuiHoverTab() {
return (
<>
<Tabs>
<Tab
disabled
icon={
<Tooltip title="I'm a tooltip">
<span>Disabled but broken</span>
</Tooltip>
}
/>
<Tab
style={{ pointerEvents: "auto" }}
disabled
icon={
<Tooltip title="I'm a tooltip">
<span>Fixed using styling</span>
</Tooltip>
}
/>
</Tabs>
</>
);
}
Here's a sandbox to see it in action: https://codesandbox.io/s/mui-hover-tab-tooltip-52p3dt?file=/src/App.js
I am currently facing some problem about sidebar navigation. Every time I click the menu below the scrollbar went go to top again. I want it to steady like when I click the bottom menu it will stays its current view. Kindly check file below. Hope you can help me. or suggest another ways to redirect pages from sidebar Thanks.
{nav.nav &&
nav.nav.map((sub, subIndex) => (
<ListItem
key={subIndex}
button
component={NavLink}
to={sub.link}
end={true}
>
<ListItemIcon sx={{ minWidth: "40px" }}>
{sub.icon}
</ListItemIcon>
<ListItemText
primary={sub.name}
primaryTypographyProps={{
variant: "body2",
}}
/>
</ListItem>
))}
video gif
I'm new to the world of React. I'm doing a simple react project with Ant Design. I have a dropdown menu in my project and I have items of this menu. I want to display photos on the screen dynamically when I click on the items.For example, When I click option 1, I want a photo to appear on the screen. When I click option 2, I want a different photo to appear on the screen etc... Alert pops up when i click on it now. But how can i display the photo. Please give me opinion. How can I do?
This is my code.
import React from "react";
import { Menu, Dropdown, Button, message } from "antd";
import "./SingleDropdown.css"
function SingleDropdown() {
function handleMenuClick(e) {
message.info("Image showed");
console.log("click", e);
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">
Option 1
</Menu.Item>
<Menu.Item key="2">
Option 2
</Menu.Item>
<Menu.Item key="3">
Option 3
</Menu.Item>
</Menu>
);
return (
<div className="singledropdown">
<Dropdown overlay={menu}>
<Button className="button-color">
Dropdown
</Button>
</Dropdown>
</div>
);
}
export default SingleDropdown;
Your antd is able to do that.
Refer the link here
Futuremore, you may try to take a look at the API below, I think that helps :D
On the other hand, you may try onClick function in React, since I worked with react-bootstrap it worked, and I think antd is able to handle that too.
What I am trying to do is something like this:
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" onClick={this.showPic1}>
Option 1
</Menu.Item>
<Menu.Item key="2" onClick={this.showPic2}>
Option 2
</Menu.Item>
<Menu.Item key="3" onClick={this.showPic3}>
Option 3
</Menu.Item>
</Menu>
);
*Show you some example how it works
onClick is a React function, this is the link You may brief around and see how that works :D
I am having a requirement where I need to create overlay with disabled background using React-Native's ActivityIndicator, the functionality is working fine but I am finding it hard to create overlay that too at the centre of the screen because of my code structure
Code
<ScrollView alwaysBounceHorizontal={false} horizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
<View>
<Test1 listData={testData1} />
<Spacing />
<Test2 listData={testData2} />
</View >}
</ScrollView>
Test1 and Test2 are two independent list components
I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.
What I am doing:
I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:
<List>
<ListItem button component="a" href={infoUrl}>
<ListItemAvatar>
<Avatar src={itemIcon} />
</ListItemAvatar>
<ListItemText
primary={this.props.project.name_with_namespace}
secondary={this.props.project.description}
/>
<ListItemSecondaryAction>
<Tooltip id="button-report" title="Report">
<IconButton area-label="Report" href={reportUrl}>
<AssessmentIcon />
</IconButton>
</Tooltip>
<Tooltip id="button-codeRepo" title="Code Repository">
<IconButton area-label="Code Repository" href={repoUrl}>
<CodeIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
</List>
Problem:
The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".
The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.
If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.
Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.
Just add parent div and try to apply tooltip on that; it worked for me:
<Tooltip title="delete" placement="start-top">
<div>
<AiOutlineDelete style={{ fontSize: '30px', alignSelf: 'center' }}/>
</div>
</Tooltip>
Put the Tooltip around the Icon, not the Button:
<IconButton area-label="Report" href={reportUrl}>
<Tooltip id="button-report" title="Report">
<AssessmentIcon />
</Tooltip>
</IconButton>