Pestañas
Organizan el contenido en diferentes pantallas, conjuntos de datos y otras interacciones.
La funcionalidad de las pestañas en la interfaz de usuario permite organizar y presentar
diferentes secciones o vistas de contenido en una misma ventana o espacio.
Considera estos puntos cuando necesites incluir pestañas:
- Navegación: Las pestañas ofrecen una forma intuitiva de navegar entre diferentes secciones o vistas dentro de una aplicación o sitio web. Los usuarios pueden hacer clic en una pestaña para cambiar rápidamente de una sección a otra sin necesidad de cargar una nueva página o ventana.
- Organización: Las pestañas ayudan a organizar el contenido en categorías o temas relacionados. Cada pestaña representa una sección específica y el contenido relacionado se muestra dentro de esa pestaña. Esto facilita a los usuarios encontrar y acceder al contenido que desean, especialmente cuando hay una gran cantidad de información para mostrar ya que se disgrega en parte.
- Espacio: El uso de pestañas evita la necesidad de abrir múltiples ventanas o páginas para acceder a diferentes secciones de una aplicación. Esto ahorra espacio en la pantalla y reduce la confusión al mantener todo el contenido dentro de una misma área de visualización.
- Multitarea: Las pestañas permiten a los usuarios realizar múltiples tareas al mismo tiempo dentro de una misma aplicación. Pueden abrir varias pestañas y alternar rápidamente entre ellas para realizar diferentes acciones o consultar diferentes secciones, lo que mejora la productividad y la eficiencia.
- Personalización: Dependiendo del diseño de la interfaz, las pestañas pueden adaptarse para mostrar diferentes tipos de contenido o funcionalidades.
- Posición: Las pestañas mantienen el estado y la ubicación del usuario mientras navegan entre diferentes secciones. Esto es especialmente útil para mantener la coherencia y la continuidad en la experiencia del usuario.
Pestaña de texto
- Etiqueta
- Etiqueta
- Etiqueta
HTML
<div class="pestana-group">
<ul class="pestana-lista" id="pestana3">
<li>
Etiqueta <img src="iconos/registro_notas_lineal.svg" alt="" width="32"
height="32">
</li>
<li>
Etiqueta
<img src="iconos/ficha_estudiante_lineal.svg" alt="" width="32"
height="32">
</li>
<li>
Etiqueta
<img src="iconos/asistencia_alumno_lineal.svg" alt="" width="32"
height="32">
</li>
</ul>
</div>
CSS
.pestana-group {
position: relative;
}
.pestana-lista {
list-style-type: none;
display: flex;
margin: unset;
padding: unset;
outline: unset;
}
.pestana-lista li {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 7px 30px;
gap: 10px;
height: 50px;
min-width: 135px;
border-bottom: 1px solid #024588;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #024588;
cursor: pointer;
}
.pestana-lista li:hover {
background: #EBF2F9;
border-bottom: 2px solid #024588;
border-radius: 10px 10px 0px 0px;
}
.pestana-lista li:active {
background: #D7E5F4;
border: 2px solid #024588;
border-radius: 10px 10px 0px 0px;
}
.pestana-lista .activo {
background: #D7E5F4 !important;
border-bottom: 3px solid #024588 !important;
border-radius: 10px 10px 0px 0px !important;
}
JS
const elementos3 = document.querySelectorAll("#pestana3 li");
// Agregar un event listener a cada elemento
elementos3.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos3.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("activo");
});
elemento.classList.toggle("activo");
});
});
Pestaña de ícono
HTML
<div class="pestana-group">
<ul class="pestana-lista" id="pestana3">
<li>
Etiqueta <img src="iconos/registro_notas_lineal.svg" alt="" width="32"
height="32">
</li>
<li>
Etiqueta
<img src="iconos/ficha_estudiante_lineal.svg" alt="" width="32"
height="32">
</li>
<li>
Etiqueta
<img src="iconos/asistencia_alumno_lineal.svg" alt="" width="32"
height="32">
</li>
</ul>
</div>
CSS
.pestana-group {
position: relative;
}
.pestana-lista {
list-style-type: none;
display: flex;
margin: unset;
padding: unset;
outline: unset;
}
.pestana-lista li {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 7px 30px;
gap: 10px;
height: 50px;
min-width: 135px;
border-bottom: 1px solid #024588;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #024588;
cursor: pointer;
}
.pestana-lista li:hover {
background: #EBF2F9;
border-bottom: 2px solid #024588;
border-radius: 10px 10px 0px 0px;
}
.pestana-lista li:active {
background: #D7E5F4;
border: 2px solid #024588;
border-radius: 10px 10px 0px 0px;
}
.pestana-lista .activo {
background: #D7E5F4 !important;
border-bottom: 3px solid #024588 !important;
border-radius: 10px 10px 0px 0px !important;
}
JS
const elementos3 = document.querySelectorAll("#pestana3 li");
// Agregar un event listener a cada elemento
elementos3.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos3.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("activo");
});
elemento.classList.toggle("activo");
});
});
Pestaña de texto mas ícono
-
Etiqueta
-
Etiqueta
-
Etiqueta
HTML
<div class="pestana-group">
<ul class="pestana-lista" id="pestana3">
<li>
Etiqueta <img src="iconos/registro_notas_lineal.svg" alt="" width="32"
height="32">
</li>
<li>
Etiqueta
<img src="iconos/ficha_estudiante_lineal.svg" alt="" width="32"
height="32">
</li>
<li>
Etiqueta
<img src="iconos/asistencia_alumno_lineal.svg" alt="" width="32"
height="32">
</li>
</ul>
</div>
CSS
.pestana-group {
position: relative;
}
.pestana-lista {
list-style-type: none;
display: flex;
margin: unset;
padding: unset;
outline: unset;
}
.pestana-lista li {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 7px 30px;
gap: 10px;
height: 50px;
min-width: 135px;
border-bottom: 1px solid #024588;
mix-blend-mode: normal;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
text-align: center;
color: #024588;
cursor: pointer;
}
.pestana-lista li:hover {
background: #EBF2F9;
border-bottom: 2px solid #024588;
border-radius: 10px 10px 0px 0px;
}
.pestana-lista li:active {
background: #D7E5F4;
border: 2px solid #024588;
border-radius: 10px 10px 0px 0px;
}
.pestana-lista .activo {
background: #D7E5F4 !important;
border-bottom: 3px solid #024588 !important;
border-radius: 10px 10px 0px 0px !important;
}
JS
const elementos3 = document.querySelectorAll("#pestana3 li");
// Agregar un event listener a cada elemento
elementos3.forEach((elemento) => {
elemento.addEventListener("click", function () {
elementos3.forEach((boton) => {
if (boton != elemento)
boton.classList.remove("activo");
});
elemento.classList.toggle("activo");
});
});
