Aplicar estilos dentro de la línea a los componentes de un formulario adaptable inline-styling-of-adaptive-form-components

Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principalespara crear un nuevo formulario adaptableo añadir formularios adaptables a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de formularios adaptables, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Formularios adaptables con componentes de base.

Versión
Vínculo del artículo
AEM as a Cloud Service
Haga clic aquí
AEM 6.5
Este artículo

Puede definir el aspecto y el estilo generales de un formulario adaptable especificando los estilos mediante el 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 reemplazan el estilo proporcionado en el tema.

Aplicar propiedades CSS en línea apply-inline-css-properties

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

  1. Abra el formulario en el Editor de formularios y cambie el modo al modo Estilo. Para cambiar el modo al modo de estilo, en la barra de herramientas de la página, seleccione  canvas-drop-down  > Estilo.

  2. Seleccione un componente de la página y seleccione el botón Editar  edit-button . Las propiedades del estilo se abren en la barra lateral.

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

    También puede seleccionar un componente en la barra lateral. En el modo Estilo, puede ver los componentes que aparecen en Objetos de formulario. Sin embargo, la lista Objetos de formulario de la barra lateral muestra componentes como los campos y los paneles. Los campos y los paneles son componentes genéricos que pueden contener otros componentes como, por ejemplo, cuadros de texto y botones de opción.

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

  3. Haga clic en una de las pestañas de la barra lateral para especificar las propiedades CSS. Puede especificar propiedades como las siguientes:

    • Dimensiones y posición (Mostrar configuración, relleno, altura, anchura, margen, posición, índice Z, flotante, borrar, desbordamiento)
    • Texto (Familia de fuentes, grosor, color, tamaño, altura de línea y alineación)
    • Fondo (Imagen y degradado, color de fondo)
    • Borde (Anchura, estilo, color, radio)
    • Efectos (Sombra, Opacidad)
    • Avanzadas (Permite escribir CSS personalizado para el componente)
  4. Del mismo modo, puede aplicar estilos a otras partes de un componente, como Widget, Pie de ilustración y Ayuda.

  5. Seleccione  Listo para confirmar los cambios o Cancelar  para descartarlos.

Ejemplo: estilos en línea de un componente de campo example-inline-styles-for-a-field-component

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 un 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 después de aplicar las siguientes propiedades CSS, como se muestra en la imagen.

Selector
Propiedad CSS
Valor
Efecto
Campo
border

Border width =2px

Border style=Solid

Border color=#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 del valor.

Etiqueta
Dimensiones y posición > anchura
100px
Fija la anchura en 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 centrar la ayuda.

Estilo de cuadro de texto después de aplicar un 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 estilos a otros componentes, como paneles, botones de envío y botones de opción.

NOTE
Las propiedades del estilo varían en función del componente que selecciona.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2