Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principales para crear un nuevo Forms adaptable o adición de Forms adaptable a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de Forms adaptable, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Forms adaptable mediante componentes de base.
Versión | Vínculo del artículo |
---|---|
AEM 6.5 | Haga clic aquí. |
AEM as a Cloud Service | Este artículo |
Puede definir el aspecto y el estilo generales de un formulario adaptable especificando los estilos mediante el Editor de temáticas. 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.
Para añadir estilos en línea a un componente:
Abra el formulario en el Editor de formularios y cambie el modo al modo Estilo. Para cambiar el modo al modo Estilo, en la barra de herramientas de la página, pulse > Estilo.
Seleccione un componente de la página y pulse el botón Editar . 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.
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.
Haga clic en una de las pestañas de la barra lateral para especificar las propiedades CSS. Puede especificar propiedades como las siguientes:
Del mismo modo, puede aplicar estilos a otras partes de un componente, como Widget, Pie de ilustración y Ayuda.
Pulse Listo para confirmar los cambios o Cancelar para descartarlos.
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 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 > width |
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. |
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.
Las propiedades del estilo varían en función del componente que selecciona.
También puede copiar y pegar un estilo de un componente a otro en un formulario adaptable. En el modo Estilo, pulse el componente y pulse el icono Copiar .
Pulse el otro componente del mismo tipo y pulse el icono Pegar para pegar el estilo copiado. También puede pulsar el icono Borrar estilo
para borrar el estilo aplicado.
Puede definir estilos para los diferentes estados de un tipo de componente. Los diferentes estados incluyen: Enfoque, Desactivado, Mantener el puntero, Error, Correcto y Obligatorio.
Para definir el estilo de un estado de un componente:
En el modo Estilo, pulse el componente y pulse el icono Editar .
Seleccione el estado del componente mediante la lista desplegable Estado.
Defina el estilo para el estado seleccionado del componente y pulse para guardar las propiedades.
También puede simular los estados de éxito y error. Pulse el icono Expandir para ver las opciones Simular éxito y Simular error.