¿Cómo crear Tabs con AMP?

Aprenda a insertar Tabs con el formato AMP. Learn how to create tabs with AMP. ¿Tabs for amp is it possible?

Tabs

Las Tabs son perfectas para aplicaciones web de una sola página, o para páginas web capaces de mostrar diferentes temas

Vamos a utilizar el siguiente componente:

amp-selector

How To Create Tabs with AMP

Create Toggleable Tabs

Paso 1) Agregar los componentes

Ejemplo

<script async src='https://cdn.ampproject.org/v0.js'/>
<script async custom-element='amp-selector' src='https://cdn.ampproject.org/v0/amp-selector-0.1.js'/>

Paso 2 Vamos a insertar un CSS para acoplar este ejemplo, inserte el CSS justo antes de </head>

Ejemplo

<style amp-custom>
section {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.amp-tabs-design .ampTabContainer {
    display: flex;
    flex-wrap: wrap;
}
.amp-tabs-design amp-selector {
    padding: 1rem;
    margin: 1rem;
}
.amp-tabs-design amp-selector [option][selected] {
    outline: none;
}
amp-selector [option][selected] {
    cursor: auto;
    outline: 1px solid rgba(0,0,0,0.7);
}
.amp-tabs-design .tab-button {
    list-style: none;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
}
amp-selector [option] {
    cursor: pointer;
}
.amp-tabs-design .tab-button[selected] .amp-tab-head {
    background-color: #000;
    color: #fff;
}
.amp-tabs-design .amp-tab-head {
    padding: 15px;
    margin: 0.3rem;
    border-radius: 0.5rem;
    border: solid 1px #000;
    transition: all 0.3s;
    color: #003;
}
.amp-tabs-title {
    font-family: &#39;Source Sans Pro&#39;,sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}

.align-center {
    text-align: center;
}

.amp-tabs-design .tab-button[selected] + .tab-content {
    display: block;
}
.amp-tabs-design .tab-content {
    display: none;
    width: 100%;
    order: 1;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    margin-top: 1rem;
}

.box-txt-2 {
    padding: 1rem;
    padding-left: 3rem;
    margin-bottom: 1rem;
}
.box-txt-2 h2 {
    line-height: 1.2em;
    padding-bottom: 10px;
    color: #000;
    margin: 0;
    font-weight: 500;
    font-family: &#39;Montserrat&#39;,sans-serif;
    font-size: 1.4rem;
}
.box-txt-2 p {
    color: #313131;
    margin: 0;
    font-family: &#39;Roboto&#39;,sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    padding: 10px 0;
}
.fondo-background-color{
     background: #bdc3c7;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.amp-polygon {
    -webkit-clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);
    clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);
    padding: 85px 10px;
    overflow: hidden;
}
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}

/*! CSS Grid | http://ayudadeblogger.com */
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}
.center-col{float:none;margin-left:auto;margin-right:auto}

</style>

Paso 3) Agregar el siguiente código después de la apertura <body>

Ejemplo

<section class="amp-polygon fondo-background-color amp-tabs-design">
<div class="container">

<div class="align-center box-txt-2 col col-8 center-col">
<h2>Las mejores características en este proyecto</h2>
<p>Contrario a la creencia popular, Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza de literatura latina clásica del año 45 aC, lo que hace más de 2000 años.
</p>
</div>

<amp-selector role="tablist" layout="container" class="ampTabContainer">
                 

 <div role="tab" class="tab-button" selected="" option="a">
  <h3 class="align-center amp-tabs-title amp-tab-head">
         AMP design
    </h3>
 </div>
<div role="tabpanel" class="tab-content">
  <div class="container">
<div class="col col-6">
<div class="box-container-w">
<div class="box-txt-2">
<h2>AMP design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="box-txt-2">
<h2>Clean design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>

<div class="box-txt-2">
    <h2>Mobile friendly</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
   </div>
  </div>
</div>
<div class="col col-6">
<amp-img alt="" height="1080" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpees6VMeNh0QvSOtV4kIoKTo7y4gZyqkyW51KGbZGB84NqTyLGigPh4Lj9h2P3d8BIb-lrvcsL5sDGlaVwFOCgfTAahRkMs_u4uvwA_JtAT9k0fimrsXx0sybi6cl-sYXz8DBQyiztc4/s1600/amp-html-cover-slider.png" width="1235"></amp-img>
                  </div>
            </div>                   
</div>



<div role="tab" class="tab-button" option="b">
<h3 class="align-center amp-tabs-title amp-tab-head">
   Clean design
  </h3>
 </div>
<div role="tabpanel" class="tab-content">
                     
<div class="container">
<div class="col col-6">
<amp-img alt="" height="670" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__0wHxirl6S_n4UrTyhvTmrhCkGcyDl_pHmODEHrYgCE650xnJkSl0PJAaTswL9FFGQ_qCdhH9_xqIc6nX-hfYYhHa3IcMoCy8PB2jsn27BxHNjhaRAUUHwR8PTOoHN6jF_rBaVd7cBrb/s700/amp-modern-video-premium-blogger-template.png" width="600"></amp-img>
        </div>


<div class="col col-6">
<div class="box-container-w">
<div class="box-txt-2">
<h2>AMP design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="box-txt-2">
<h2>Clean design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>

<div class="box-txt-2">
<h2>Mobile friendly</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
   </div>
   </div>

</div>
  </div>

<div role="tab" class="tab-button align-center" option="c">
<h3 class="align-center amp-tabs-title amp-tab-head">
   Mobile friendly
 </h3>
  </div>
<div role="tabpanel" class="tab-content">

<div class="container">
<div class="col col-6">
<div class="box-container-w">
<div class="box-txt-2">
<h2>AMP design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="box-txt-2">
<h2>Clean design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>

<div class="box-txt-2">
<h2>Mobile friendly</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
</div>
<div class="col col-6">
<amp-img alt="" height="1200" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dsUsLEH1SNLK9qROOcEvN0sHmS4k6I5SEvOKft2oGk95xPIRMJ2JI_T0XLySlRriEKb28_A6l2t_1EKykrI40snFxpgElH2RaIK7x5T03QCelvot9sc8X-pqTQV6fXDG_RLl7UVzV_c/s1600/amp-fenix-blogger-template-amp-html.png" width="1600"></amp-img>
              </div>
            </div>
                     
</div>
   
</amp-selector>
</div>
</section>

Paso 4) Cambie las URLs de imágenes, también las palabras del ejemplo

Paso 5) Demostración
A continuación la estructura completa del ejemplo

Ejemplo

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element='amp-selector' src='https://cdn.ampproject.org/v0/amp-selector-0.1.js'/>
<link rel="canonical" href="https://www.amphtmlenespanol.com/">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<style amp-custom>
section {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.amp-tabs-design .ampTabContainer {
    display: flex;
    flex-wrap: wrap;
}
.amp-tabs-design amp-selector {
    padding: 1rem;
    margin: 1rem;
}
.amp-tabs-design amp-selector [option][selected] {
    outline: none;
}
amp-selector [option][selected] {
    cursor: auto;
    outline: 1px solid rgba(0,0,0,0.7);
}
.amp-tabs-design .tab-button {
    list-style: none;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
}
amp-selector [option] {
    cursor: pointer;
}
.amp-tabs-design .tab-button[selected] .amp-tab-head {
    background-color: #000;
    color: #fff;
}
.amp-tabs-design .amp-tab-head {
    padding: 15px;
    margin: 0.3rem;
    border-radius: 0.5rem;
    border: solid 1px #000;
    transition: all 0.3s;
    color: #003;
}
.amp-tabs-title {
    font-family: &#39;Source Sans Pro&#39;,sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}

.align-center {
    text-align: center;
}

.amp-tabs-design .tab-button[selected] + .tab-content {
    display: block;
}
.amp-tabs-design .tab-content {
    display: none;
    width: 100%;
    order: 1;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    margin-top: 1rem;
}

.box-txt-2 {
    padding: 1rem;
    padding-left: 3rem;
    margin-bottom: 1rem;
}
.box-txt-2 h2 {
    line-height: 1.2em;
    padding-bottom: 10px;
    color: #000;
    margin: 0;
    font-weight: 500;
    font-family: &#39;Montserrat&#39;,sans-serif;
    font-size: 1.4rem;
}
.box-txt-2 p {
    color: #313131;
    margin: 0;
    font-family: &#39;Roboto&#39;,sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    padding: 10px 0;
}
.fondo-background-color{
     background: #bdc3c7;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.amp-polygon {
    -webkit-clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);
    clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);
    padding: 85px 10px;
    overflow: hidden;
}
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}

/*! CSS Grid | http://ayudadeblogger.com */
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}

.center-col{float:none;margin-left:auto;margin-right:auto}
</style>

<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>

<section class="amp-polygon fondo-background-color amp-tabs-design">
<div class="container">

<div class="align-center box-txt-2 col col-8 center-col">
<h2>Las mejores características en este proyecto</h2>
<p>Contrario a la creencia popular, Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza de literatura latina clásica del año 45 aC, lo que hace más de 2000 años.
</p>
</div>

<amp-selector role="tablist" layout="container" class="ampTabContainer">
               

 <div role="tab" class="tab-button" selected="" option="a">
  <h3 class="align-center amp-tabs-title amp-tab-head">
         AMP design
    </h3>
 </div>
<div role="tabpanel" class="tab-content">
  <div class="container">
<div class="col col-6">
<div class="box-container-w">
<div class="box-txt-2">
<h2>AMP design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="box-txt-2">
<h2>Clean design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>

<div class="box-txt-2">
    <h2>Mobile friendly</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
   </div>
  </div>
</div>
<div class="col col-6">
<amp-img alt="" height="1080" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpees6VMeNh0QvSOtV4kIoKTo7y4gZyqkyW51KGbZGB84NqTyLGigPh4Lj9h2P3d8BIb-lrvcsL5sDGlaVwFOCgfTAahRkMs_u4uvwA_JtAT9k0fimrsXx0sybi6cl-sYXz8DBQyiztc4/s1600/amp-html-cover-slider.png" width="1235"></amp-img>
                  </div>
            </div>                 
</div>



<div role="tab" class="tab-button" option="b">
<h3 class="align-center amp-tabs-title amp-tab-head">
   Clean design
  </h3>
 </div>
<div role="tabpanel" class="tab-content">
                   
<div class="container">
<div class="col col-6">
<amp-img alt="" height="670" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__0wHxirl6S_n4UrTyhvTmrhCkGcyDl_pHmODEHrYgCE650xnJkSl0PJAaTswL9FFGQ_qCdhH9_xqIc6nX-hfYYhHa3IcMoCy8PB2jsn27BxHNjhaRAUUHwR8PTOoHN6jF_rBaVd7cBrb/s700/amp-modern-video-premium-blogger-template.png" width="600"></amp-img>
        </div>


<div class="col col-6">
<div class="box-container-w">
<div class="box-txt-2">
<h2>AMP design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="box-txt-2">
<h2>Clean design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>

<div class="box-txt-2">
<h2>Mobile friendly</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
   </div>
   </div>

</div>
  </div>

<div role="tab" class="tab-button align-center" option="c">
<h3 class="align-center amp-tabs-title amp-tab-head">
   Mobile friendly
 </h3>
  </div>
<div role="tabpanel" class="tab-content">

<div class="container">
<div class="col col-6">
<div class="box-container-w">
<div class="box-txt-2">
<h2>AMP design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="box-txt-2">
<h2>Clean design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>

<div class="box-txt-2">
<h2>Mobile friendly</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
</div>
<div class="col col-6">
<amp-img alt="" height="1200" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dsUsLEH1SNLK9qROOcEvN0sHmS4k6I5SEvOKft2oGk95xPIRMJ2JI_T0XLySlRriEKb28_A6l2t_1EKykrI40snFxpgElH2RaIK7x5T03QCelvot9sc8X-pqTQV6fXDG_RLl7UVzV_c/s1600/amp-fenix-blogger-template-amp-html.png" width="1600"></amp-img>
              </div>
            </div>
                   
</div>
 
</amp-selector>
</div>
</section>

</body>
</html>


Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: