I'm into PWA development, and I'd like to use React components to build my UI, but not React-native components (otherwise why write PWAs...).
So I am looking for an equivalent to the top-tab-navigator component found here:
https://reactnavigation.org/docs/material-top-tab-navigator/
but without any React-Native dependency!
Changing pages by swiping would be great, even without a visual effect.
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
Any help will be very appreciated.
Thank you!
So far, I found React components to put tabs on displays inside pages, but nothing with navigator characteristics (full screen views, event on page change, ...).
Related
I am using react swiper from 'swiper/react' for multiple components on my website and it works fine for every component it is used for except for one page. I have a top nav bar that is used as a promotional text banner and it swipes using autoplay every 5 seconds. This navbar exists on every page of my website, it works fine on every page except for one. The problem I'm having trouble shooting is because the swiper works fine on localhost, but once pushed to production, the swiper on this page is barely shown. You can see in the image below, that 2 characters in the swiper are present, and you can see in this image that the swiper is working as expected on every other page.
NOTE: On refresh, the full text is present for about a second before it is skewed and hidden.
The wrapper component styles are positioned to sticky, has a set height, a larger z-index than its background, display is flex. The swiper modules include Navigation and autoplay, loop is set to true, slidesPerView = 1.
What could be causing it to work locally but not work when deployed to a server? Any ideas as to why this functionality is present?
If you need more information please don't hesitate to let me know. Thanks for any advice in advance.
This looks like a CSS issue to me. What do you use for styling? Also, what's different between your localhost styles and the production styles? Note the differences and try to figure out what's missing, if you're not willing to share your code. I've seen cases (especially when using Tailwind) of missing styles in production because a certain plugin removes part of the styles that it thinks that are not used. Those cases are solved by whitelisting certain classes, but I can't tell for sure because I don't know your tech stack.
For react application I have to build sidebar menu and appropriate content on right side with dynamic content through navigation. This part is completed and now there are more menus in sidebar in existing application which are developed in different language and that should also be seen exactly like same sidebar and redirect to appropriate pages.
Block 1 will have only my react's application and block 2 can be page from react app or another app according to the navigation from sidemenu.
How can I achieve this?
I'm interested in creating a content nav bar, similar to this one
This screenshot is taken from Material UI's site, but I haven't been able to find a component inside the library that resembles it. Is there one? Is there a way repurpose either a Drawer of an App Bar to replicate it?
Thanks
If it’s always visible on the page that is just a normal div really.
Set it up in your component (or wherever your routes are defined) so it is on every page
I have an issue with render from the server. On the first load of the page, the layout goes for a toss. However it is corrected on subsequent renders via navigating the pages. Surprisingly the weired layout also appears on a browser refresh. I have tested it with both Chrome and Microsoft Edge but same problem.
The app was created using standard boilerplate 'create-next-app' and then I just added a few of my pages. See screenshots below
one with the weird screen
and other showing correct render
This actually an issue with CSS injection with SSR for material-ui. Check examples here
Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?