React Storefront
|

AmpModal

import AmpModal from 'react-storefront/amp/AmpModal'

An AMP-compatible modal based on <amp-lightbox>

All props not specifically documented here are spread to the <amp-lightbox> element. More info about amp-lightbox on AMP docs: https://www.ampproject.org/docs/reference/components/amp-lightbox

Usage example:

<button on="tap:modal">Open Modal</button>

<AmpModal id="modal"> <button on="tap:modal.close">Close Modal</button> <div>Modal content ...</div> </AmpModal>

Props

NameTypeDefaultDescription
idstring

The id for the amp-lightbox element. This is REQUIRED attribute.

animateInstring'fade-in'

Defines the style of animation for opening the lightbox. By default, this will be set to fade-in. Valid values are fade-in, fly-in-bottom and fly-in-top.

Note: The fly-in-* animation presets modify the transform property of the amp-lightbox element. Do not rely on transforming the amp-lightbox element directly. If you need to apply a transform, set it on a nested element instead.

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root