Segunda parte del tutorial de la librería TuiCss, En esta parte veremos los componentes de Utilidad y veremos algún ejemplo.
Estructura del tutorial
- Elementos de estructura
- Componentes de Utilidad [actual]
- Componentes generales (por hacer)
- Elementos de formulario (por hacer)
- Clases utilidad (por hacer)
- Ejemplos (por hacer)
Índice
Componentes de utilidad
Background
Border
Shadow
Scrollbar
Temas
Colores
Componentes de utilidad
En este tutorial veremos como alterar los elementos para añadir o eliminar características como color, fondo o sombras.
Background
Quizás una de las más importantes, añade un fondo de puntos simulando un monitor de tubo, suelen recomendar añadir la case al html para cambiar toda la página.
Tenemos catorce fondos diferentes divididos en dos bloques según el fondo de la matriz de puntos:
| Puntos | Fondo |
|---|---|
| tui-bg-blue-black | tui-bg-blue-white |
| tui-bg-green-black | tui-bg-green-white |
| tui-bg-cyan-black | tui-bg-cyan-white |
| tui-bg-red-black | tui-bg-red-white |
| tui-bg-purple-black | tui-bg-purple-white |
| tui-bg-yellow-black | tui-bg-yellow-white |
| tui-bg-orange-black | tui-bg-orange-white |
<!-- Estructura -->
<!-- Html -->
<html class="tui-bg-blue-black"></html>
<!-- Screen -->
<section class="tui-screen-800-600 tui-bg-blue-black">
...
</section>
Border
Recomendado para el componente fieldset y controlamos el tipo de borde de este componente, tenemos 4 tipos de borde:
| Tipos | |
|---|---|
| .tui-border-double | .tui-border-solid |
| .tui-border-dotted | .tui-border-dashed |
Shadow
Con esta clase podemos controlar la sombra de los componentes window, panel y button. Cambiando posición, tamaño o directamente eliminar la sombra.
Posición
.tui-shadow-left
.tui-shadow-left-1
.tui-shadow-left-2
.tui-shadow-left-3
.tui-shadow-left-4
.tui-shadow-left-5
Tamaño
.tui-shadow
.tui-shadow-1
.tui-shadow-2
.tui-shadow-3
.tui-shadow-4
.tui-shadow-5
Eliminación
.tui-no-shadow
Scrollbar
Con las palabras de la wiki oficial
This is just applied for Google Chrome browser unfortunately.
Podemos cambiar el estilo de la barra de scroll pero sólo en Google Chrome, tenemos disponibles los siete colores de la librería:
.tui-scroll-cyan
.tui-scroll-green
.tui-scroll-red
.tui-scroll-purple
.tui-scroll-yellow
.tui-scroll-white
.tui-scroll-orange
Temas
Por defecto tenemos una serie de configuraciones para todo lo que hemos visto anterior mente, llamadas temas, tenemos seis temas disponibles:
.primary
.secondary
.success
.danger
.warning
.info
Colores
Si con esto no tienes suficiente TuiCSS nos brinda una serie de nueve colores en dos variantes; en la variante de 255 colores y la variante de 168, basadas en las aplicaciones de MS-DOS.
los colores disponibles son:
.black-[variante]
.blue-[variante]
.green-[variante]
.cyan-[variante]
.red-[variante]
.purple-[variante]
.yellow-[variante]
.white-[variante]
.orange-[variante]
Tan solo tienes que sustituir [variante] por la variante de 255 o 168 colores y puedes aplicar estos colores en todas las propiedades con el sufijo de color.
<div class="tui-panel black-255">
</div>
Podemos ponerlos en las siguientes clases:
<color>
<color>-text
<color>-border
<color>-hover
<color>-text-hover
<color>-border-hover
Top comments (0)