Material UI Dialog Component | Material UI 5 Tutorial | Material UI Dialog | React Dialog Box #14

so the next component that we'll be talking about will be the dialog so what is a dialog so a dialog is a pop-up window which informs something to the user so it is a pop-up window which can ask for permission or a confirmation on an action which the user has requested or it can have a multiple tasks related to it like when we close an application we see a pop-up window so that is a dialogue and it has a backed off feature which blurs the background when it's open and this feature can be turned off as well so it is a type of model which can be opened and closed whenever requested so now we can see the properties of a dialog so what properties it have so it has the open property and the own close property so these are the main two properties when the open so whenever the open is true the dialog will be open and whenever the dialog will be closed so we can set up an own close to close it dialog and we have some additional properties like first we have the hide backdrop which will disable the backdrop feature which plus the background and we have the transition feature which will have a transition or an animation onto the dialog so this is all about the dialog in the material ui so now we'll move on to the react dialogue component inside the material ui website that the dialog inform users about a task or it can contain crucial information like required decisions or involves a multiple task and now you can see it is a type of modal window that appears in front of an app content to provide some critical information ask for decision or anything like when you close an application it will show you a pop-up window to confirm or cancel so now we can see about the dialog so now you can see in the android phones now we can see open the simple dialog once every click on that now you can see we have a backup account like in the google drive so these are the dialog so it will open a pop-up and then once you will close outside of that so it will close and then you can see you will have some alerts as well with the dialog so once you will click on the alert dialog now you can see we can have a google location service we can agree or disagree and then we have some transition property that we have discussed now you can see the transition it is coming from the down and it is sliding from the down and now you can see we have we can have some form as well in the dialogues like you can see once i will open a dialog now you can see we have a form as well like a subscribe feature and then we can have some customization in the dialogs as well like if you open a dialog like you can see nike it will be a modal title it will be a close button and it can be a content inside the dialog and then you can see we have some dialog actions as well so these are the dialogs that we can use and now we can see this is some properties of the dialogs as well so if i will not just check the code of this dialog so we can just move on and then we can just move on to the top like now you can see first i will now zoom it for you like now first you can see we have the dialog and then we specify the open prop so whenever the open prop will be true so dialog will be open and now you can see we can have a transition component as well and then we can have a keep mountain property which we will study later and then we have the own close so whenever we click outside of the model the own clause will be called and then we close the model and then you can see then we can have a dialogue title in which we can just click on the dialog like you can see this is the title of the dialog use google's location services and then we can have the content as well of the dialog and then we can have some text on the content of the dialog as well like you can see this is the dialog content and then we can have a dialog actions as well for the buttons like agree of the disagree so this is all about the dialog so we can just get this dialog as well so we can just move on to the visual studio code to test the dialog as well so insert this div now we will add a dialog the dialog has been imported and now we have to set the property like open so the by default property will be opened as true so we will open the dialog by default as well and then we can just add a dialog and inside that we can add a dialog as the title so it will be the dialogue title and then we can have a dialogue title like this is my dialog so we can have this dialogue title and then we can have some dialog content as well so it will dialog content and inside the content we can have the dialog as the text it will dialog content text and then we can have some text as well the text can be the definition of the dialog as well like a dialog is a pop-up window which can ask user something like an information or confirmation so this can be a dialogue text and after the content then we can just set a dialog actions as well for the action buttons so we can have a dialog actions and inside the actions now we can have two buttons so it can be a button to close the dialog like it will be the close like it can be the cancel and then we can have another button so it will be agree so if i will now save if i will now move on to the application once again so we can just move on to the localhost 3000 once again now you can see now we have the dialog like this is my dialog and the dialog is a pop-up window which can ask you something that an information oriented confirmation like you can see we have the cancel and the agree buttons as well but now you can see now the dialog is not closing so for that we need to add this state so to add the state again we need to add the use date and then we can have open prop and the set open the by default value will be false and after that we can just provide the open prop to the open so we will handle with the state and then we can have a own clause prop that we have discussed to close the dialog so whenever we will click outside of the dialog the own clause will be called and in that we will have a callback and the callback will then set the property of the setup one to the false so if i will now save now if i will now just move on to the application once again now you can see the dialog is not there because now the initial state is false so for that we can do one more thing we can have a button over there and the button can have open dialog and then on the on click property of the button we can have the callback function once again to the set open to the true so if i will now save if i now move on to the application once again i'm going to click on the open dialog now you can see the dialog is open and once i will click on the outside the dialog will be closed so this is all about the dialog and then you can just add this thing on to the function as well but i will now add on this and now you can see we have the on close and now once i click on the buttons then you can see nothing will happen because we didn't add anything on to the on click positive buttons so we can just get this callback function from there so we can just get this and then we can just provide on click to the buttons as well and then you can add some all callback functions inside that also so if i will now save if i will now move on to the application once again if i will not just click on the cancel now you can see it is cancelled and once i will click on the agree so now it is agreed so this is all about the dialogues and we have discussed about the height backdrop property also so we can just move on to the dialog and we can just set a height backdrop it will just hide the backdrop of this dialog as well so now you can see the background is now blur so once i will now save if i will move on to the application now you can see the background is now not blur now the z index of both of the background and the dialog is same and once i will click on the cancel now you can see everything is same so we can now remove this height backdrop as well so this is all about the dialogues in the material ui

Channel: Indian Coders

Views: 6,618

Keywords: material ui react tutorial, material ui tutorial, material ui basics, material ui crash course, material ui card, material ui card grid, material ui dialog, material ui dialog react, material ui dialog box, material ui dialog close button, material ui dialog close click outside, material ui dialog vs modal, a material ui dialog example, a material ui dialog tutorial, materialui dialog, mui dialog, react dialog box, react mui dialog, material ui dialog component, react dialog

Id: WNUuzCaheww

Length: 7min 36sec (456 seconds)

Published: Wed May 11 2022