want to create a portfolio/projects page where user click on thumbnail it goes full screen and other page comes in
i guess i can achieve this using pose-flip
https://codesandbox.io/s/fourth-react-pose-example-qj92p problem is how i can do it with multiple elements on page
this is the sample site
i'm new to react, when i click the thumbnail how to remove all others ( fade ), we can do it simply in jquery not selector
Related
Steps to Reproduce
This is the test URL. - https://codesandbox.io/s/wispy-pond-kj8ofh?file=/src/App.js
1.) Click on Products link from Navbar.
2.) And then wait for around 200 milliseconds for the data to be loaded. And then once refresh the page from refresh
The entire page becomes white / blank and then the entire data is visible when the refresh button is clicked. At least the Navbar should be visible. loader is used on "Products" component and not on Navbar but still Navbar is not visible until product data arrives.
I don't want to use the "defer". I will be using a loading bar later so that data is shown once the data is available.
How to solve this issue of screen blank when refreshed?
The Navbar component should be visible immediately and the Products component data should load in it's time.
I am looking for a split view in react js , i am using chakra ui for my layouts and i am not able to achive it .
Left Pane is Menu which has a fixed height (no scrolling needed)
Right Pane is the page which gets loaded every-time user selects an option in left menu.
Right pane should be scrollable.
You should give a try on the Choc-UI Layouts for achieving this:
https://choc-ui.com/docs/application-shells/sidebar-layouts
Or here too:
https://chakra-templates.dev/navigation/sidebar
On the links you will get previews of components that have a side bar on left side getting th full height of the viewport, also a sidebar and a container for your app content or other components.
This section is independent of the sidebar and navbar showed on the previews. You can access the code with the show code option on each previo (top-right location)
Try removing the navbar and modifying the width of sidebar, and you will get a split version of the layouts as you are reaching for.
I know there is a hook for that https://reactnavigation.org/docs/use-scroll-to-top/ . But at the beginning of my project, i created my own bottom tab component instead of using createBottomTabNavigator(). So i have a code like that <BottomNavigator selected={'Explore'} /> at the bottom of five screen. I want to scroll to top when active tab tapped. I can understand that if active tab is tapped but i get that information in BottomNavigator component. So i have no idea how to retrieve that information back to current screen and scroll to top.
I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs
In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.