All language subtitles for 11. Dialogs Overview

Now that we are able to validate the inputs that our user is providing to the text fields on the Contact

Us page will now want to go ahead and display a prompt to the user to make sure that they confirm that

that information is correct before it goes and gets sent off to me to show this little confirmation

window.

We're going to be using the material UI dialog component let's head over to the material UI documentation

page and we'll take a look at all of the options that it provides for us for setting up these dialogs.

I'm here at material dash UI dot com and I'm under components feedback and dialogues.

And it repeats the a dialogue is a type of modal they asks the user to make a decision.

And in this case we want to ask them to confirm that the information that they have provided is correct

if we scroll down we'll see an example of a simple dialog.

And so once you press this button it will open up and this right here is a dialog so you can see how

the back of the screen went gray.

It is opaque and that forces the focus onto the dialog itself.

Making me understand that I have to make a choice before I can return back to what I was doing.

You'll see it actually says here the mechanics of this is choosing an option will automatically permit

the option and close the menu.

So if I go ahead and select one of these accounts closes it or if I have this open and I click anywhere

outside of the dialog that goes ahead and closes it out as well.

The main things to know about the dialogue component are the props open which toggles whether or not

the dialog is visible similar to our draw that we'd set up in the header and also similar to the draw.

We have it on close function and that will make sure that we're toggling the visibility of that open

state value well scroll down and here they give an example of an alert and this can be a dialogue with

a little bit more functionality or content so you can see when I go ahead and open this up.

We have here a title along with our text giving us a description of what's going on.

And then we have two buttons to either accept or cancel the current operation if we go ahead and show

the source for this.

You can see that they are actually using a dialog dialog actions dialog content dialog content text

and dialogue title components.

And this is all putting together the very nicely styled dialogue that we see here following the material

design specification the material UI is based on AI.

However I do a lot of custom stuff and kind of stray away from this.

And so we won't be using all of these different components in what I'm doing but they are good to be

aware of.

If you want to create these very nice clean looking standard dialogues but we can scroll down and see

if they have the outer dialogue component wrapping all of the inner dialogue components similar to the

structure we're used to.

And on the dialogue component it has the open state the on close function and then inside we have the

dialogue title a dialogue content and wrapped inside of that is the dialogue content text adjacent to

our dialogue content we have the actions and that is where the buttons for r agree and disagree are

coming from.

These are the dialogue actions all right.

So close out of that.

We'll keep coming down.

And here it shows how you can use different transitions.

So this example uses these slide transitions that show the source first and you can see they're actually

using a transition component provided to us by material UI that we will get into later actually.

And then they are passing in that component to the transition component prop on the dialogue.

So it's a little bit of a more advanced setup that will probably cover a little bit later but you can

see when I click on this that slides up from the bottom different than previously where it just kind

of appears from the middle.

Now this example here I was just clicking is actually closer to something that we'll be doing because

this has a form field built right into it a text input and it just shows the capability they will be

taking advantage of when we put the confirmation for our form in a dialogue.

So this shows here how we can customize the dialogue especially using the overrides but we're going

to be fully customizing the dialogue so we won't really need to go into that.

Still is pretty standard here but then below it shows us how we can use full screen dialogues and that

almost creates an interesting kind of mobile user interface feel and could potentially be used for different

settings or something like that within a mobile app.

But then here it also shows how we can have a dialogue with a max width.

So if we change the max width here it's not doing anything until we turn on the full width value and

that tells it to take up about full width so here for extra small small medium large and extra large.

But if we turn off that full width then it will only take up the bare minimum space available to it.

But with the full with you can then set the max width to make sure it doesn't take up too much space

so we can close out of that.

And this shows how you can actually use a media query with the breakpoint system to determine whether

or not these screens should be full or not.

So here it's going to be not full screen but if we were to go ahead and if I shrink this page down and

scroll back down to our responsive full screen and let's go and shrink this down to a nice small nice

small screen size and now I go and I open this up you see that.

Now that takes up the entire screen has completely different look and feel for our mobile devices.

So that could look good in a lot of situations.

I'll go ahead actually maximise this again and if we scroll underneath here this is an example of how

you can make sure that a user has to select an option.

So here even if I'm selecting an option it doesn't automatically clear out the dialog until I explicitly

pick one and then select OK to mark that I am finished.

So they call this a confirmation dialog because you have to confirm by pressing OK that you're finished

working and then they give an example using a third party library to create a Dragonball dialog.

So that looks pretty cool.

Looks pretty nice.

And then they show lastly how to set the scroll so we can open this up and let's see if we come down

here.

The scroll is set to the scroll value and the default is paper but they have a function and that function

is set up to handle either of these scroll values but the scroll value itself is either being set to

either paper or body.

So you can see if you use a scroll prop equal to paper on your dialogue then that scrolls the paper

component and keeps all of your content within the dialog where if you have the scroll of body it actually

makes the dialog itself scroll the entire length of the content instead of fitting the content inside

of it.

So that should give you a good example.

The two different scrolling options that you have with the dialogue but our content won't be long enough

to worry about that.

So it's just something to be aware of.

All we really need to worry about for the dialogues that we're going to be using is just like this simple

one is we're going to have an open value in an on closed function.

And then once our dialogue is up on the screen all we'll be doing is putting in the content necessary

to confirm the message and allow the user to change any of the inputs.

If they do need changing.

So let's go ahead and we'll start setting this up in the next video.