Estilo en línea de los componentes del formulario adaptable

Puede definir el aspecto y el estilo generales de un formulario adaptable especificando los estilos utilizando editor de temas. Además, puede aplicar estilos CSS en línea a componentes de formulario adaptable individuales y previsualizar los cambios sobre la marcha. Los estilos en línea anulan el estilo proporcionado en el tema.

Aplicar propiedades CSS en línea

Para añadir estilos en línea a un componente:

  1. Abra el formulario en el editor de formularios y cambie el modo a modo de estilo. Para cambiar el modo al modo de estilo, en la barra de herramientas de la página, pulse lista desplegable de lienzo > Estilo.

  2. Seleccione un componente en la página y pulse el botón de edición editar-botón. Propiedades de estilo abiertas en la barra lateral.

    También puede seleccionar componentes del árbol de jerarquía de formularios en la barra lateral. El árbol de jerarquía de formularios está disponible como Objetos de formulario en la barra lateral.

    En el Estilo puede ver los componentes enumerados en Objetos de formulario. Sin embargo, la lista Objetos de formulario de la barra lateral enumera componentes como campos y paneles. Los campos y los paneles son componentes genéricos que pueden contener componentes como, por ejemplo, cuadros de texto y botones de opción.

    Cuando seleccione un componente de la barra lateral, verá todos los subcomponentes enumerados y las propiedades del componente seleccionado. Puede seleccionar un subcomponente específico y aplicarle un estilo.

  3. Haga clic en una ficha de la barra lateral para especificar las propiedades CSS. Puede especificar propiedades como:

    • Dimension y posición (Mostrar configuración, relleno, altura, anchura, margen, posición, z-index, flotante, borrar, desbordamiento)
    • Texto (Familia de fuentes, peso, color, tamaño, altura de línea y alineación)
    • Contexto (Imagen y degradado, color de fondo)
    • Borde (Anchura, estilo, color, radio)
    • Efectos (Sombra, opacidad)
    • Avanzadas (Permite escribir CSS personalizada para el componente)
  4. Del mismo modo, puede aplicar estilos a otras partes de un componente, como Widget, Pie de ilustracióny Ayuda.

  5. Toque Listo para confirmar los cambios o Cancelar para descartar los cambios.

Ejemplo: estilos en línea para un componente de campo

Las siguientes imágenes muestran un campo de texto antes y después de que se le apliquen estilos en línea.

Componente de cuadro de texto antes de aplicar estilo en línea

Componente de cuadro de texto antes de aplicar propiedades de estilo en línea

Observe el cambio en el estilo del cuadro de texto como se muestra en la siguiente imagen después de aplicar las siguientes propiedades CSS.

Selector

CSS, propiedad

Value

Efecto

Campo

border

Ancho del borde = 2 px

Estilo de borde=Sólido

Color del borde=#1111

Crea un borde ancho negro de 2 píxeles alrededor del campo

Cuadro de texto

background-color

#6495ED

Cambia el color de fondo a CornflowerBlue (#6495ED)

Nota: Puede especificar un nombre de color o su código hexadecimal en el campo de valor.

Etiqueta

Dimension y posición > anchura

100px

Corrige la anchura de 100 píxeles para la etiqueta

Icono de ayuda de campo Texto > Color de fuente #2ECC40 Cambia el color de la cara del icono de ayuda.

Descripción larga

text-align

center

Alinea la descripción larga para que la ayuda se centre

Estilo de cuadro de texto después de aplicar estilo en línea

Componente de cuadro de texto después de aplicar propiedades de estilo en línea

Siguiendo los pasos anteriores, puede seleccionar y aplicar estilo a otros componentes, como paneles, botones de envío y botones de radio.

NOTA

Las propiedades de estilo varían en función del componente que seleccione.

Copiar y pegar estilos

También puede copiar y pegar un estilo de un componente a otro componente en un formulario adaptable. En el Estilo , pulse el componente y pulse el icono Copiar . Copiar.

Pulse el otro componente del mismo tipo y pulse el icono Pegar Copiar para pegar el estilo copiado. También puede pulsar el icono Borrar estilo Copiar para borrar el estilo aplicado.

Definir estilos para diferentes estados de un componente

Puede definir estilos para diferentes estados de un tipo de componente. Los diferentes estados incluyen: Focus, Desactivado, Hover, Error, Correctoy Obligatorio.

Para definir el estilo de un estado de un componente:

  1. En el Estilo , pulse el componente y pulse el icono Editar Editar.

  2. Seleccione el estado del componente mediante el Estado lista desplegable.

    Seleccionar estado

  3. Defina el estilo para el estado seleccionado del componente y pulse Guardar para guardar las propiedades.

También puede simular los estados de éxito y error. Pulse el icono Expandir para ver el Simular éxito y Simular error opciones.

Simular estados

En esta página