How to display content in a separate smaller window while still being on the main page?
Hello everyone, I am designing a desktop app using Electron and React. I would like to display some content on the user action in a separate smaller window while still being on the main page ( the background is the same). I am not sure about the approach to adapt. Should I HashRouter and Routes to redirect the user to the other page (but then how to keep the intial main background)? Just as an example, I was ispired by this app : https://lk.zont-online.ru/demo#/. If you toggle one of the cards, it will pop up a new window. That's what I want. Thank you very much for any help and advice!
12 Replies
In the example, clicking a card brings up a new window. those are just modals, or dialogue elements I think? They transition in from off screen (with custom css) and require some interaction to close.
Clicking the tabs renders new content in the main screen, but leaves the navigation elements - for that you can use an Outlet component if you already have a react router set up. You can use hashrouter anywhere you can use normal router, it just directs with #hash instead of human readable domains, I think.
MDN Web Docs
: The Dialog element - HTML: HyperText Markup Language | MDN
The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
If you use a component ui library, modal is usually included already. https://mui.com/material-ui/react-modal/
React Modal component - Material UI
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
Thank you very much @missymae#2783 ! I didn' really understand. Are these new windows just modals or new routes? Because for some of them the url actually changes,must be a new route. When the new page is rendered, the content is displayed in a differntely sized window. I wonder how to achieve that..Thank you!
The new window pop ups are modals or drawers (you see the drawer "open" from one side of the screen like an animation, modal is usually center of the screen).
An example of changing the route and probably using an <Outlet/> component is like this - When you click the buttons on top, the thermometer or lighting, the content on the page changes - that uses an <Outlet/> to change the route, it shows new content only in part of the layout, where the Outlet is.
Ok! Got it. Thank you very much @missymae#2783 ! If you ckick a first card on the second row, you see the background is blurred, is that made with <Outlet /> and some css? Thanks!!!
That's usually background blur prop on the modal or dialogue component. It can be done with css, or some components will have that as a prop option already.
A quick question: are modals and routes used together? Or they can be used separately? If you toggle for example an instrument golden key on the right, it will pop ups a new window with settings but the url is the same. Does it mean that a modal can be used by itself without definig a new route? Thank you!!!
Yes, modals are used without routes 🙂
Do you know what exactly is called this prop on modal to blur the background? Or what css property is usually used? Thank you😃
I think https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop and https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for css
MDN Web Docs
::backdrop - CSS: Cascading Style Sheets | MDN
The ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.
MDN Web Docs
backdrop-filter - CSS: Cascading Style Sheets | MDN
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.