Modals are really common in any user interface. It can be used for alerts, to render additional information or provide a way to enter data. In this tutorial, we will learn about the Gutenberg Component Modal and see what options does it provides to us.
If you’re interested in reading the source code of this component, head to the repository.
A great thing about this component is that you can call it anywhere in your application, but the Modal will still load in the parent node of the DOM, so it won’t be affected by any CSS rules such as overflow:hidden and such.
This is done because this component uses the function createPortal(). You can read about this in the React documentation.
The Gutenberg component Modal is built using:
IsolatedEventContainer – prevents certain events from propagating outside of the container; accepts ModalFrame,
ModalFrame – accepts ModalHeader and all children elements,
ModalHeader – shows the modal header with a close button.
Modal Properties
There are several properties which you can pass to the Modal component:
title – used in modal header,
onRequestClose – a function that is called when the modal should be closed,
Source: https://managewp.org/articles/18406/gutenberg-components-modal
source https://williechiu40.wordpress.com/2019/02/28/gutenberg-components-modal/
No comments:
Post a Comment