600 West

Ampsnackbar 

<amp-animation id="snackbarSlideIn" layout="nodisplay">
    <script type="application/json">
        {
            "animations": [{
                    "duration": 300,
                    "easing": "ease-out",
                    "iterations": "1",
                    "selector": ".Snackbar",
                    "keyframes": [{
                            "transform": "translateY(100%)",
                            "opacity": 0
                        },
                        {
                            "transform": "translateY(0)",
                            "opacity": 1
                        }
                    ]
                },
                {
                    "duration": 300,
                    "delay": "10s",
                    "fill": "forwards",
                    "easing": "ease-in",
                    "iterations": "1",
                    "selector": ".Snackbar",
                    "keyframes": [{
                            "transform": "translateY(0)",
                            "opacity": 1
                        },
                        {
                            "transform": "translateY(100%)",
                            "opacity": 0
                        }
                    ]
                }
            ]
        }
    </script>
</amp-animation>

<div submit-error>
    <template type="amp-mustache">
        <div class="Snackbar AMPSnackbar ">
            {{message}}
        </div>
    </template>
</div>
 
<amp-animation id="snackbarSlideIn" layout="nodisplay">
    <script type="application/json">
        {
            "animations": [{
                "duration": 300,
                "easing": "ease-out",
                "iterations": "1",
                "selector": ".Snackbar",
                "keyframes": [
                    {
                        "transform": "translateY(100%)",
                        "opacity": 0
                    },
                    {
                        "transform": "translateY(0)",
                        "opacity": 1
                    }
                ]
            },
            {
                "duration": 300,
                "delay": "10s",
                "fill": "forwards",
                "easing": "ease-in",
                "iterations": "1",
                "selector": ".Snackbar",
                "keyframes": [
                    {
                        "transform": "translateY(0)",
                        "opacity": 1
                    },
                    {
                        "transform": "translateY(100%)",
                        "opacity": 0
                    }
                ]
            }]
        }
    </script>
</amp-animation>

<div submit-error>
    <template type="amp-mustache">
        <div class="Snackbar AMPSnackbar {{modifier}}">
            \{{message}}
        </div>
    </template>
</div>
 
{
  "modifier": null
}
  • Content: 
    .AMPSnackbar {
    @include ZIndex("Snackbar");
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 34rem;
    margin: 0 auto;
}
  • URL: /components/raw/ampsnackbar/AMPSnackbar.scss
  • Filesystem Path: components/organisms/AMPSnackbar/AMPSnackbar.scss
  • Size: 155 Bytes

AMPSnackbar

AMPSnackbar is a combination of amp-mustache and amp-animation. On an amp-form, you can trigger a Snackbar to appear by setting on="submit-error:snackbarSlideIn.restart". It will render the message field provided by the JSON response from the XMLHttpRequest.

Required Scripts

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

Example

A working example may be found under Templates > AMPDemoForm.

Best Practices

  • It must be the immediate child of an amp-form element.
  • The XHR JSON response must contain a message field.

Accessibility

AMPSnackbar is rendered into a div with role="alert" and an aria-labeledby attribute that reads the message contents to a screenreader user.