Una barra lateral es una característica muy común en las páginas web que es muy simple pero un poco larga de codificar en HTML CSS. En AMP HTML, usamos el componente amp-sidebar para agregar una barra lateral a una página. Una barra lateral brinda acceso a metacontenidos. Se puede revelar con un clic de botón.
Script requerido: importar el componente amp-sidebar en el encabezado.
HTML
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"> </script>
Atributos:
- lado: especifica en qué lado de la página debe aparecer la barra lateral desde la izquierda o la derecha. Se deja su valor por defecto.
- diseño: especifica el diseño de la barra lateral, siempre establecido en nodisplay.
- barra de herramientas: este atributo se usa en la <nav toolbar=””> secundaria y acepta una consulta de medios para mostrarla en la barra lateral.
- data-close-button-aria-label: Especie si una etiqueta aria para los botones.
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-sidebar</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!--Import the `amp-sidebar` component.-->
<script async custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
</script>
<script async custom-element="amp-fit-text"
src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-sidebar/index.html">
<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>
<style amp-custom>
.btn {
margin-top: 50px;
margin-left: 50px
}
</style>
</head>
<body>
<amp-sidebar id="sidebar"
class="sample-sidebar"
layout="nodisplay" side="right">
<h3>Sidebar</h3>
<button on="tap:sidebar.close"
class="btn">Close sidebar
</button>
<button on="tap:sidebar.toggle"
class="btn">Toggle sidebar
</button>
</amp-sidebar>
<button on="tap:sidebar.toggle"
class="btn">Toggle sidebar
</button>
<button on="tap:sidebar.open"
class="btn">Open sidebar
</button>
</body>
</html>
Producción:
pagina principal
barra lateral
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA