Componente CSS adaptable solo & pestañas

Vista prévia

Descripción

Sin embargo, otras pestañas CSS puras que se convertirán automáticamente en una interfaz de acordeón vertical en dispositivos móviles. Basado en Flexbox CSS y Hacks de radio/etiqueta.

Funcionamiento

Cree fichas y paneles de tabulación de la siguiente manera. En este caso, vamos a usar entradas de radio para alternar entre pestañas y su contenido.

<div class="tabs">


<input type="radio" name="tabs" id="tabone" checked="checked">

<label for="tabone">Tab One</label>

<div class="tab">


<h1>Tab One</h1>

</div>



<input type="radio" name="tabs" id="tabtwo">

<label for="tabtwo">Tab Two</label>

<div class="tab">


<h1>Tab Two</h1>

</div>



<input type="radio" name="tabs" id="tabthree">

<label for="tabthree">Tab Three</label>

<div class="tab">


<h1>Tab Three</h1>

</div>


</div>

Estilo de las pestañas en el CSS.

.tabs {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;
}

.tabs label {

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

display: block;

padding: 1rem 2rem;

margin-right: 0.2rem;

cursor: pointer;

background: #90CAF9;

font-weight: bold;

-webkit-transition: background ease 0.2s;

transition: background ease 0.2s;
}

.tabs .tab {

-webkit-box-ordinal-group: 100;

-webkit-order: 99;

-ms-flex-order: 99;

order: 99;

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-grow: 1;

width: 100%;

display: none;

padding: 1rem;

background: #fafafa;
}

.tabs input[type="radio"] {

position: absolute;

opacity: 0;
}

.tabs input[type="radio"]:checked + label { background: #fafafa; }

.tabs input[type="radio"]:checked + label + .tab { display: block; }

Convierta las pestañas en un acordeón cuando el tamaño de la pantalla sea menor que un punto de interrupción específico.

@media (max-width: 45em) {

.tabs .tab,
.tabs label {

-webkit-box-ordinal-group: NaN;

-webkit-order: initial;

-ms-flex-order: initial;

order: initial;
}

.tabs label {

width: 100%;

margin-right: 0;

margin-top: 0.2rem;
}
}