Fundación - Tabs Sass Reference
Variables
Puede cambiar los estilos de los componentes utilizando las siguientes variables SASS que se enumeran en la tabla.
| No Señor. | Nombre y descripción | Tipo | Valor por defecto |
|---|---|---|---|
| 1 |
$tab-margin Establece el margen de la barra de pestañas. |
Número | 0 |
| 2 |
$tab-background Muestra el color de fondo de una barra de pestañas. |
Color | $ blanco |
| 3 |
$tab-background-active Muestra el color de fondo activo de una barra de pestañas. |
Color | $ gris claro |
| 4 |
$tab-border Especifica el color del borde de una pestaña. |
Color | $ gris claro |
| 5 |
$tab-item-color Muestra el color del texto de los elementos del menú. |
Color | primer plano ($ tab-background, $ primary-color) |
| 6 |
$tab-item-background-hover Muestra el color de fondo de los elementos al pasar el mouse. |
$ blanco | |
| 7 |
$tab-item-padding Define el relleno de un elemento de pestaña. |
Número | 1.25rem 1.5rem |
| 8 |
$tab-expand-max Incluye el número máximo de clases expand-n en el CSS. |
Número | 6 |
| 9 |
$tab-content-background Muestra el color de fondo del contenido de la pestaña. |
Color | $ blanco |
| 10 |
$tab-content-border Muestra el color del borde del contenido de la pestaña. |
Color | $ gris claro |
| 11 |
$tab-content-color Proporciona el color del texto del contenido de la pestaña. |
Color | primer plano ($ tab-background, $ primary-color) |
| 12 |
$tab-content-padding Define el relleno para el contenido de la pestaña. |
Número o lista | 1rem |
Mixins
Puede usar los mixins para construir la estructura de clases CSS para sus componentes modales de revelación.
contenedor de pestañas
Puede incluir estilos para un contenedor de pestañas utilizando la siguiente combinación:
@include tabs-container;pestañas-contenedor-vertical
Muestra las pestañas en forma vertical utilizando la siguiente combinación:
@include tabs-container-vertical;título de pestañas
Aplica los estilos para los enlaces de las pestañas utilizando la siguiente combinación:
@include tabs-title;contenido de pestañas
Aplica los estilos para los paneles de contenido de las pestañas utilizando la siguiente combinación:
@include tabs-content;pestañas-contenido-vertical
Especifica la pestaña, el contenido debe mostrarse, de manera vertical, utilizando la siguiente combinación:
@include tabs-content-vertical;panel de pestañas
Puede incluir estilos para un panel de contenido de pestañas utilizando la siguiente combinación:
@include tabs-panel;