¿Cómo mostrar una notificación en Amp HTML?
amp-user-notification
Utilizar amp-user-notification para mostrar una notificación descartable para el usuario. Utilice esta opción para implementar un cuadro de diálogo para notificar a los usuarios acerca de las cookies.
1 Código
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script>
2 Disposición
Inserte el script amp-user-notification justo abajo de la apertura <head>
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
Ademas, tiene que integrar el script amp-analytics justo abajo del <head>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
3 Recuerde insertar también un CSS, la clase css por defecto pondrá el elemento amp-user-notification en la esquina inferior izquierda de su sitio web.
Inserte el siguiente estilo CSS, justo antes del </head>
<style amp-custom>
footer {
margin-bottom: 50px;
}
amp-user-notification {
padding: 8px;
background: beige;
}
</style>
4 El uso de almacenamiento local
Cuando el usuario está de acuerdo con la política de cookies, el estado se guarda en el almacenamiento local.
Inserte el siguiente código, donde usted quiera que se muestre la notificación
<amp-user-notification layout=nodisplay id="amp-user-notification1"> This is an amp-user-notification. It uses local storage to store the dismissed state. <button on="tap:amp-user-notification1.dismiss">I accept</button> </amp-user-notification>
A continuación la estructura completa del código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-mostrar-una-notificacion-en-amp.html">
<style amp-custom>
footer {
margin-bottom: 50px;
}
amp-user-notification {
padding: 8px;
background: beige;
}
</style>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<amp-user-notification layout=nodisplay
id="amp-user-notification1">
This is an amp-user-notification. It uses local storage to store the dismissed state.
<button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>
</body>
</html>
Comentarios
Disqus comments:
Facebook comments: