Fundación - Table 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 |
$table-background Aplica el color de fondo de la tabla. |
Color | $ blanco |
2 |
$table-color-scale Especifica la escala para oscurecer las filas y el borde de la tabla rayada. |
Número | 5% |
3 |
$table-border Define el estilo del borde de la tabla. |
Lista | Escala inteligente sólida de 1 px ($ fondo de tabla, $ escala de color de tabla) |
4 |
$table-padding Proporciona acolchado de la mesa. |
Número | rem-calc (8 10 10) |
5 |
$table-hover-scale Especifica la escala para oscurecer las filas de la tabla rayada al pasar el mouse. |
Número | 2% |
6 |
$table-row-hover Aplica el color para filas estándar al pasar el mouse. |
Lista | oscurecer ($ table-background, $ table-hover-scale) |
7 | $table-row-stripe-hover Aplica el color para filas con rayas al pasar el mouse. |
Lista | oscurecer ($ fondo de tabla, $ escala de color de tabla + $ escala de desplazamiento de tabla) |
8 |
$table-striped-background Proporciona el color de fondo para las filas a rayas. |
Color | escala inteligente ($ fondo de tabla, $ escala de color de tabla) |
9 |
$table-stripe Muestra la raya en las filas de la tabla. Si una fila es par, las filas pares tendrán un color de fondo y si una fila es impar, las filas impares tendrán un color de fondo. Si la fila está vacía o cualquier otro valor, las filas de la tabla no tendrán rayas. |
Palabra clave | incluso |
10 |
$table-head-background Especifica el color del fondo del encabezado. |
Color | escala inteligente ($ fondo de tabla, $ escala de color de tabla / 2) |
11 | $table-foot-background Especifica el color del fondo del pie de página. |
Color | escala inteligente ($ fondo de tabla, $ escala de color de tabla) |
12 | $table-head-font-color Define el color de fuente de un encabezado. |
Color | $ body-font-color |
13 | $show-header-for-stacked Muestra el valor predeterminado para el encabezado cuando se utilizan tablas apiladas. |
Booleano | falso |
Mixins
Puede usar los mixins para construir la estructura de clases CSS para sus componentes como se describe a continuación:
mesa
Agrega estilos para tablas y los estilos se pueden incluir usando la siguiente combinación:
@include table($stripe);
Utiliza el parámetro tal como se define en la siguiente tabla:
No Señor. | Descripción de parámetros | Tipo | Valor por defecto |
---|---|---|---|
1 | $stripe Muestra la raya en las filas de la tabla usando un valor par, impar o ninguno. Incluso es el valor predeterminado. |
Palabra clave | $ table-stripe |
desplazamiento de tabla
Desplaza la tabla horizontalmente usando la siguiente combinación:
@include table-scroll;
mesa flotante
Se desplaza sobre las filas de la tabla utilizando la siguiente combinación:
@include table-hover;
pila de mesa
Agrega estilos para la mesa apilada.
@include table-stack($header);
Utiliza el parámetro tal como se define en la siguiente tabla:
No Señor. | Descripción de parámetros | Tipo | Valor por defecto |
---|---|---|---|
1 | $header Muestra el encabezado cuando la tabla está apilada. |
Booleano | $ show-header-for-stacked |