## Feature Examples ### Structure - description:

FullScreenModalLayout is built from three components:

  • FullScreenModalLayout.Header
  • FullScreenModalLayout.Content
  • FullScreenModalLayout.Footer
    • - example: ```jsx () => { const [isOpen, setIsOpen] = React.useState(false); const closeModal = () => setIsOpen(false); return ( 1 Node slot } endNode={ 2 Node slot } > Modal title goes here Subtitle goes here Modal content starts here Close modal Modal content ends here Footer is sticky ); }; ``` ### Animation - description:

    Control FullScreenModalLayout animation styles using Modal transition property:

    zoomIn (default) - the modal appears from the middle of the screen

  • moveVertical - the modal slides in from the bottom
  • moveHorizontal - the modal slides in from the right side of the screen
    • - example: ```jsx () => { const ModalWithButton = ({ isOpen: isOpenProp = false, buttonLabel, transition, children, }: { isOpen?: boolean; buttonLabel: string; transition: 'moveHorizontal' | 'moveVertical'; children: ({ isOpen, close, }: { isOpen: boolean; close: () => void; }) => React.ReactNode; }) => { const [isOpen, setIsOpen] = React.useState(isOpenProp); const close = React.useCallback(() => setIsOpen(false), []); return ( <> {children({ isOpen, close })} ); }; return ( {({ close }) => ( } endNode={ Save } > Modal Title This is the main content area with padding. Footer )} {({ close }) => ( } endNode={ Save } > Modal Title This is the main content area with padding. Footer )} ); }; ``` ## Common Use Case Examples ### Long forms - description:

    It is recommended to use FullScreenModalLayout.Footer for modals that are longer. This way the main actions are always visible to users

    - example: ```jsx () => { const [isOpen, setIsOpen] = React.useState(false); const openModal = () => setIsOpen(true); const closeModal = () => setIsOpen(false); return ( {/* HEADER */} } endNode={ Save } > New dish {/* CONTENT */} $} /> No salt Vegan Vegetarian Gluten free Organic Spicy Visible on site In stock {/* FOOTER */} ); }; ``` ### Push screens - description:

    You can use FullScreenModalLayout as push screens

    - example: ```jsx () => { const [isOpen, setIsOpen] = React.useState(false); const [newsletter, setNewsletter] = React.useState(true); const open = () => setIsOpen(true); const close = () => setIsOpen(false); return ( {/* Header */} } > Upgrade to accept payments {/* Content */} {/* Intro text */} Unlock secure online payments and help your business grow with a Business Basic plan. {/* Benefits list */} What you get: • Accept credit and debit card payments • Automated invoice and tax handling • Faster payouts to your bank {/* Optional settings */} setNewsletter(!newsletter)} /> Enabling notifications helps you stay updated on payouts and payment changes. {/* Footer */} ); }; ``` ### Multiple actions - description:

    - example: ```jsx () => { const [shown, setShown] = React.useState(false); const openModal = () => setShown(true); const closeModal = () => setShown(false); return ( From name: User 1 Reply-to email: user1@mail.com Confirm Email {/* Full Screen Modal */} {/* HEADER */} } endNode={ Change Details } > Confirm your email address {/* CONTENT */} To make changes to your sender details, please confirm your email address.
    A confirmation code was sent to user1@mail.com.     Didn’t get the code? Send again     {/* FOOTER */}     ); }; ```