I have an app where I want to click a button and up pops a modal information page, with text and diagrams. Each information page will have react/js since the content is dynamic. I have about 30 different information pages that I want to create and 30 different buttons to trigger each page.
What is the best way of doing this? Do I create 30 different files with the html for each modal popup and do it that way?
I am using Material UI. Not sure which modal option I should be using. They have Dialog, Drawer, Menu or Popover. Or perhaps another method is better.
I figure this must be a common requirement so hopefully I can find the best practice.
Related
I am using the material-ui next branch and using the following example as reference for building a dialog.
https://material-ui-next.com/demos/dialogs/
https://codesandbox.io/s/7rq8nl11x
I wanted to know the best way to let the user enter a new contact as per material guidelines ie how to handle the UI for click of add contact button present in the bottom of the dialog. Would it be to hide this dialog and show a new dialog instead which shows a form letting the user enter a new contact.
I'm mostly looking for suggestions on design.
There's a lot of good information on the material design guidelines and best practices for managing components in React.
With that said, a good solution for your situation is to handle all the account management within the one modal. Here's an idea for a structure that's very similar to what Google does:
DialogContainer as the parent component to handle logic and contain the next two components.
AccountList to render each user as well as the 'add account' button.
AccountCreation component that renders the input to add another account.
I have an AngualarJS app that has an index page and some partial pages, displayed in ui-view. The app is using ui-routing. I have a button on the header (located on the index page) and on click of that button I want a small pop up open - a page displaying some data from the database, based on currently logged in user. I am trying to decide between opening a windows with window.open and sizing it to about 400x400 but that seems very un-elegant plus I see some issues with opening it. Another option I am entertaining is bootstrap ui modal but that would involve including bootstrap in my project on top of all the angular and routing includes.
Not sure if there is a better way to go, would appreciate any leads.
If you don't want to include bootstrap in your project You may use this one
--> http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/
I cannot find an example on how to make a ionic card clickable. The behaviour I want to implement is to be able to click on each card my app has (and has lots of them) and get a modal view open with more detailed information referring to the card contents.
I would prefer some kind of semi-transparent modal with a close button than a full screen one, but I cannot find a satisfactory method to do so also.
Can you please, post me some code to get some insight on how to do this?.
Thanks in advance,
Jose
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)
I am trying to write a WPF application. The general outline of the application is as follows: There is a main window(Note that the main window is a full screen application) and there are several pages(Possibly 25) and I want to navigate from one page to another with a button click event on each page. What will be the best way to achieve this?
I have tried creating a Frame on the MainWindow and then use the frame to display pages, but my problem is that I can not navigate from one page to another from a button click on the pages. I am new to this and I would appreciate any help.
You could of at least tried a Google mate, this information is abundant, but because you thought typing a paragraph here was easier, I shall save you the trouble.... http://paulstovell.com/blog/wpf-navigation