Personalice sus interfaces Qodly con CSS

En Qodly Studio, cada widget puede estilizarse directamente utilizando sus propiedades. Sin embargo, para mantener un aspecto coherente en toda la aplicación y aplicar fácilmente estilos globales (como el color de la fuente, el tamaño del texto o el aspecto de las selecciones), CSS es su mejor aliado.

En este artículo, exploraremos los fundamentos del uso de CSS en Qodly Studio, con ejemplos de la aplicación Performance Review.

Aplicación Performance Review

¿Qué es CSS?

CSS (Cascading Style Sheets) es un lenguaje de estilo para controlar la apariencia visual de los elementos HTML en una página web. Se utilizan para definir colores, fuentes, márgenes, animaciones y mucho más, para crear interfaces coherentes, estéticamente agradables y adaptables.

En este blog, sólo le mostraremos cómo utilizar y crear una clase CSS en Qodly Studio, así como algunos ejemplos sencillos. Si quiere aprender a escribir CSS, existen numerosas fuentes de documentación, cursos de formación y vídeos sobre el tema.

Cómo utilizar una clase CSS en Qodly

Crear una clase CSS

Qodly le permite añadir clases CSS directamente a su proyecto. Aquí cómo hacerlo:

• Vaya al menú Estilo en Qodly Studio.
• Cree una clase CSS.
• Especifique si es local o compartida.
• Escriba la definición CSS.

 

Tipos de CSS en Qodly

Qodly ofrece tres tipos de CSS para una máxima flexibilidad:

• Local: aplicado sólo a un componente o página específica.
• Basado en temas: compartido a través de múltiples componentes para mantener la coherencia dentro de una sección de su aplicación.
• Compartido: disponible globalmente en todo el proyecto.

 

Estas opciones le ofrecen una gran flexibilidad a la hora de estructurar y gestionar sus estilos.

Aplicar una clase CSS

Una vez que haya creado su CSS, puede aplicar una clase a diferentes widgets en unos pocos pasos:

• Seleccione el widget en Qodly Studio.
• Vaya a la pestaña Propiedades.
• Busque la opción Clase CSS e introduzca el nombre de la clase definida en su archivo CSS.

Casos reales

Tomemos como ejemplo la página de inicio de sesión de la aplicación Performance Review.

Ejemplo 1: Estilizar un botón de conexión

Queremos dar estilo al botón de conexión con

• Texto blanco
• Fondo rojo
• Esquinas redondeadas
• Efecto Hover con un rojo más oscuro

 

Creamos una clase «button-full».

Introducimos la siguiente descripción CSS:

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration : 0.4s ;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #FFFFFF;
}

En Qodly Studio, aplique este estilo utilizando la clase «button-full» en sus botones.

Ejemplo 2: Botones adaptables para los modos claro y oscuro

Con las consultas de medios, puede crear estilos adaptativos que se ajustan automáticamente en función del tema claro u oscuro del usuario.

Para el modo oscuro, queremos un rojo más oscuro con un efecto hover más claro. Esto se consigue fácilmente usando el selector @media (prefers-color-scheme : dark):

self {
  border-radius: 4px;
  border: 1px solid #dd3c4c;
  background-color: #dd3c4c;
  color: #FFFFFF;
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid #c32232;
  background-color: #c32232;
  color: #ffffff;
}

@media (prefers-color-scheme : dark) {
  self{
    border-radius: 4px
    border: 1px solid #c32232;
    background-color: #c32232;
    color: #ffffff;
    transition-duration: 0.4s;
  }
	
  self:hover {
    border: 1px solid #dd3c4c;
    background-color: #dd3c4c;
    color: #ffffff;
    }
}

El resultado en imágenes:

Ejemplo 3: Uso de variables CSS

Las variables CSS permiten definir constantes reutilizables, lo que facilita y dinamiza la gestión de estilos.

Por ejemplo, puede centralizar la gestión de los colores y aplicarlos dinámicamente en función del modo claro u oscuro.

Paso 1: Definir una hoja de estilos compartida

Cree una hoja de estilo compartida y defina todas sus constantes:

:root {
   --main-bg-color: #FFFFFF;
   --main-fg-color: #000000;
   --accent-color1: #dd3c4c;
   --accent-color2: #c32232;

  @media (prefers-color-scheme : dark) {
    --main-bg-color: #121212;
    --main-fg-color: #E0E0E0;
    --accent-color1: #c32232;
    --accent-color2: #dd3c4c;
  }
}

Paso 2: Aplicar la variable a la clase button-full.

Para utilizar una variable en una clase CSS, basta con utilizar la función var():

self {
  border-radius: 4px;
  border: 1px solid var(--accent-color1);
  background-color: var(--accent-color1);
  color: var(--text-color1);
  transition-duration: 0.4s;
}

self:hover {
  border: 1px solid var(--accent-color2);
  background-color: var(--accent-color2);
  color: var(--text-color1);
}

Ahora, cada vez que actualice las variables de color, todos los elementos con estilo se actualizarán automáticamente, asegurando un tema consistente en toda la aplicación.

Ejemplo 4: Estilización de componentes con capacidad de respuesta

El siguiente ejemplo muestra cómo crear un diseño responsivo que se ajusta en función del ancho de la pantalla.

El panel de inicio de sesión consta de tres cajas de estilo:

• Una caja para el título de la aplicación.
• Una caja para los campos de conexión y contraseña.
• Un contenedor que envuelve ambas cajas.

 

El contenedor utiliza display: flex; y flex-wrap: wrap; para garantizar la capacidad de respuesta. Si las cajas son demasiado anchas, se apilan verticalmente en lugar de estar una al lado de la otra.

Entonces, para las otras dos cajas, el ancho se modifica entre el 50% y el 100% en función del tamaño de la pantalla. Por razones estéticas, también se modifica el borde.

Aquí está el ejemplo CSS de la caja posicionada a la izquierda o arriba, dependiendo de la pantalla:

self {
    border-radius: 10px 0 0 10px;
    width : 50%;
    height : 100%;
}

@media screen and (max-width: 800px) {
    self {
      border-radius: 10px 10px 0 0;
      width : 100%;
      height : fit-content;
    }
}

El resultado en imágenes:

Un consejo rápido para empezar

Si no estás seguro de cómo estructurar su CSS, Qodly le ofrece una función muy útil. Puede definir estilos a través de las propiedades de los widgets y exportarlos como CSS.

Esto le permite ver el aspecto de una regla CSS y crear y modificar fácilmente sus propias clases CSS.

Ir más lejos

Esperamos que estos ejemplos hayan demostrado el poder y flexibilidad de CSS en Qodly Studio. Para seguir explorando, consulte estos recursos adicionales:

• Personalización del estilo de los botones
• Personalizando el estilo de casillas de selección
• Personalizando el estilo tablas de datos
• Personalizando los estilos de matriz
• Personalización de los estilos de caja de selección
• Personalización de estilos de radio
• Personalización de los estilos entrada de datos

 

Con CSS, puede transformar sus aplicaciones Qodly en experiencias visuales únicas y profesionales, simplificando al mismo tiempo la gestión de sus estilos. ¡Empiece y comparta sus creaciones o haga sus preguntas en el Foro!