Construcciones de estilo para formularios adaptables styling-constructs-for-adaptive-forms

CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

Requisitos previos prerequisites

Conocimiento de CSS y del marco de trabajo LESS.

Qué se puede personalizar what-can-be-customized

El artículo enumera las clases de css disponibles públicamente de los formularios adaptables. Puede aprovechar estas clases para aplicar estilo a varios componentes de un formulario adaptable. El estilo de los componentes de creación, como los cuadros de diálogo y las barras de estado que muestran advertencias, excede el ámbito de este artículo. Utilice estas construcciones de estilo para crear estilos (con CSS o Less) solo cuando no pueda aplicar estilo a los componentes con el editor de temáticas.

Personalizar estilos en formularios adaptables customizing-styles-in-adaptive-forms

El marco de trabajo LESS simplifica el caso de uso para personalizar estilos en formularios adaptables. El marco de trabajo permite definir estilos mediante un conjunto de variables y funciones (mezclas). El marco de trabajo LESS ayuda a reducir el tamaño del código agrupado y aumenta su reutilización.

Puede personalizar los estilos del formulario adaptable de las siguientes maneras:

  • Cambiar la temática
  • Cambiar el estilo del componente

Cambiar la temática changing-theme

Puede cambiar la temática de un formulario adaptable para asegurarse de que su aspecto sea coherente con las páginas web en las que está incrustada.

Los cambios en el aspecto general del formulario adaptable que utiliza propiedades CSS suelen formar parte de los cambios de temática. Los cambios importantes en el aspecto del formulario adaptable, como los cambios en el diseño y la ubicación de los componentes, no se consideran cambios de temática.

El siguiente conjunto de propiedades CSS define la temática de una página web en función del bootstrap:

  • Color de fondo
  • Borde (tipo, color, grosor)
  • Color de fuente
  • Espacio
  • Margen
  • Tamaño de fuente
  • Altura de la línea

Actualmente, las variables LESS se definen solo para estas propiedades de los distintos elementos de un formulario adaptable.

Cambiar el estilo de los componentes changing-component-style

Puede realizar cambios en el aspecto, el diseño, el posicionamiento y la visibilidad de los elementos. Para realizar esta tarea, cree o actualice los archivos .css personalizados para incluir las construcciones de estilo que se enumeran en este artículo.

Para aplicar un estilo a un formulario adaptable, ábralo para editarlo, abra las propiedades del contenedor del formulario adaptable y especifique la ruta del archivo CSS personalizado en la pestaña básica. Las construcciones de estilo predeterminadas del formulario adaptable se anulan con las construcciones enumeradas en el archivo .css personalizado.

Componentes components

Los componentes mencionados en este artículo tienen sus clases CSS predefinidas. Puede editar las variables para modificar los estilos en las clases CSS. Como alternativa, puede reescribir toda la clase. En esta sección se describen las clases dentro de los componentes y los estilos que se pueden modificar mediante variables.

Estilo del contenedor container-styling

Un contenedor es el componente de nivel superior. Otros paneles y campos se encuentran debajo del componente contenedor.

Clase de CSS
guideContainerNode
Descripción de las variables
Descripción de las variables
container-bgColor
Color de fondo del contenedor
container-padding
Relleno del contenedor
container-margin
Margen del contenedor
container-fontColor
Color de fuente del contenedor

Estilo del campo field-styling

Los formularios adaptables incluyen varios tipos de campos. Cada campo tiene un nombre de clase único, que es el nombre del campo. El campo también tiene un nombre de clase común guideFieldNode.

Los campos incluyen etiquetas, widgets, descripción de la ayuda (tanto descripciones largas como cortas) e iconos de ayuda de los campos (signo de interrogación).

Clase de CSS
guideFieldNode
Variables
Descripción
field-padding
Relleno para el campo
field-error-font-color
Color de fuente del mensaje de error del campo
field-error-font-size
Tamaño de fuente del mensaje de error del campo

Estilo de la etiqueta label-styling

La etiqueta del elemento HTML usado para el campo incluye las clases izquierda o arriba dependiendo de si la etiqueta está en la parte superior o izquierda.

Clase de CSS
guideFieldLabel
Variables
Descripción
label-font-color
Color de fuente de la etiqueta del campo
label-font-size
Tamaño de fuente de la etiqueta del campo
label-line-height
Propiedad de altura de la línea CSS de la etiqueta del campo
label-font-weight
Propiedad del grosor de la fuente CSS de la etiqueta del campo
label-margin
Margen de la etiqueta del campo

Las reglas CSS para la etiqueta se aplican mediante la etiqueta guideFieldLabel. Si es autor, anule esta regla para que los cambios personalizados sean visibles.

Estilo de los widgets widgets-styling

Según su tipo, los widgets también incluyen clases. Normalmente, los widgets incluyen la clase guideFieldWidget. Los widgets que se envían con el HTML utilizan normalmente la entrada y la selección del elemento HTML estándar. El estilo se realiza según corresponda. No se puede aplicar estilo a un widget personalizado al cambiar las variables.

Clase de CSS
guideFieldWidget
Variables
Descripción
widgets-bg-color
Color de fondo de los widgets (no funciona para la casilla de verificación y el botón de radio)
widgets-border-color
Color del borde de los widgets
widgets-border-thickness
Tamaño del borde de los widgets
widgets-border-radius
Radio del borde de los widgets
widgets-border-type
Tipo del borde de los widgets
widget-border-focus-type
Tipo de enfoque del borde de los widgets
widgets-border
Estilo del borde consolidado de los widgets
widgets-font-color
Color del texto dentro del widget
widgets-font-size
Tamaño del texto dentro del widget
widgets-line-height
Propiedad CSS lineheight del widget
widgets-padding
Propiedad de relleno CSS del widget
widgets-focus-border-color
Color del borde cuando el widget está enfocado
widgets-mandatory-border-color
Color del borde del widget para los campos obligatorios
widgets-mandatory-bg-color
Color de fondo del widget para los campos obligatorios
widgets-disabled-bg-color
Color de fondo del widget cuando el campo está deshabilitado.
widgets-disabled-font-color
Color de la fuente del widget cuando el campo está deshabilitado.
widgets-disabled-border-color
Color del borde del widget cuando el campo está deshabilitado.
widget-height
Altura del widget (no funciona para la casilla de verificación y el botón de radio)
checkbutton-height
Altura de la casilla de verificación y del botón de radio.
listboxwidget-height
Altura máxima de un menú desplegable de selección múltiple

Restricciones en el estilo de los widgets limitations-in-widget-styling

El estilo de los campos enfocados, obligatorios y deshabilitados está restringido mediante variables. Sin embargo, puede cambiarlo si anula los estilos. La restricción mediante variables se proporciona principalmente para mantener bajo control el número de variables. La restricción se puede relajar si el aspecto de un campo cambia drásticamente porque está en cualquiera de los estados mencionados anteriormente.

Descripción de la ayuda help-description

Un autor puede especificar el contenido de la Ayuda en los campos mediante los componentes de descripción breve y larga. Ambos componentes tienen una clase común .guideHelpDescription y otra clase .long/ .short, según el tipo de descripción. El contenido de la Ayuda se adjunta en un elemento de párrafo para anular el estilo de la descripción. La descripción de la Ayuda (tanto larga como corta) se modifica mediante variables que comienzan por widgetshelp, como se indica en la siguiente tabla:

Variables
Descripción
widgets-help-long-bg-color
Color de fondo de la ayuda larga de los widgets
widgets-help-long-border-color
Color del borde de la ayuda larga de los widgets
widgets-help-long-border-indicator-color
Color del borde del indicador izquierdo de la ayuda larga de los widgets
widgets-help-short-bg-color
Color de fondo de la ayuda breve de los widgets
widgets-help-short-color
Color de la fuente de la ayuda breve de los widgets
widgets-help-short-tooltip-bg-color
Color de fondo de la ayuda de información breve del objeto de los widgets
widgets-help-short-tooltip-color
Color de la fuente de la Ayuda de la herramienta corta de los widgets

Términos y condiciones terms-and-conditions

El widget de Términos y condiciones (TnC ``) permite especificar términos y condiciones. Puede personalizar el widget mediante las variables que se describen en la siguiente tabla.

Variables
Descripción
tnc-unvisited
Color de la fuente del vínculo tnc no visitado.
tnc-visited
Color de la fuente del vínculo tnc visitado.

Botón button

Los botones también son widgets. Sin embargo, su estilo es ligeramente diferente del de los widgets. En formularios adaptables, cualquiera de las siguientes opciones constituye un botón:

  • input[type = text]
  • botón
  • elemento con clase .button

código HTML para el botón:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

Clase de CSS
Descripción
iconButton-icon
Proporciona iconos para el botón
iconButton-label
Etiqueta/pie de ilustración del botón Estilos
Variables
Descripción
button-border-size
Tamaño del borde de los botones
button-border-type
Tipo de borde
button-padding
Propiedad de relleno CSS para el botón
button-font-size
Tamaño de la fuente del botón
button-background-color
Color de fondo del botón
button-font-color
Color de la fuente del botón
button-border-color
Color del borde del botón
button-large-padding
Relleno para los botones grandes (botones con clase .buttonlarge)
button-large-font-size
Tamaño de la fuente de los botones grandes
button-small-padding
Relleno para los botones pequeños (botones con clase .buttonsmall)
button-small-font-size
Tamaño de la fuente de los botones pequeños
button-info-background-color
Color de fondo de los botones informativos (botones con clase .buttoninformative)
button-info-font-color
Color de la fuente de los botones informativos
button-info-border-color
Color del borde de los botones informativos
button-warning-background-color
Color de fondo de los botones con estilo de advertencia (botones con clase .buttonwarning)
button-warning-font-color
Color de la fuente de los botones con estilo de advertencia
button-warning-border-color
Color del borde de los botones con estilo de advertencia
button-alert-background-color
Color de fondo de los botones de alerta (botones con clase .buttonalert)
button-alert-font-color
Color de la fuente de los botones de alerta
button-alert-border-color
Color del borde de los botones de alerta

Signo de interrogación question-mark

Para los widgets, se muestra un signo de interrogación cuando un autor agrega una descripción larga al contenido de la Ayuda. Se utiliza el icono predeterminado proporcionado en bootstrap. Para utilizar un icono personalizado, puede personalizar los iconos de bootstrap.

Clase de CSS
guideHelpQuestionMark
Variables
Descripción
questionmark-font-color
Color del icono
questionmark-hover-font-color
Color del icono cuando se pasa el ratón sobre él

Tabla table

Puede cambiar la temática de color para el encabezado y las filas del cuerpo de una tabla mediante las siguientes variables.

Variables
Descripción
table-header-bg-color
Color de fondo de la fila de encabezado. El valor predeterminado es #333.
table-odd-row-bg-color
Color de fondo para las filas impares del cuerpo. El valor predeterminado es rgb(255, 255, 255).
table-even-row-bg-color
Color de fondo de las filas pares del cuerpo. El valor predeterminado es #eee.

Archivo adjunto file-attachment

El widget Archivo adjunto de los formularios adaptables permite cargar archivos. También puede personalizar el widget mediante las variables.

Variables
Descripción
fileItemPadding
Relleno para los archivos que se muestran en el widget
fileItemBackground
Color de fondo del elemento de archivo
fileItemBorderColor
Color del borde superior
fileItemColor
Color de la fuente del elemento de archivo
filePreviewIconColor
Color del icono Vista previa (icono de Bootstrap) en el widget
fileItemCommentHeight
Altura del comentario del elemento de archivo

Estilos del navegador navigator-styles

Existen cuatro tipos de pestañas del navegador. Estas incluyen pestañas a la izquierda, arriba, en el asistente y de acordeón. Cada explorado tiene una clase diferente.

Navegador
Clase de CSS
Accordion
.acordion-navigators
tabs on the left
.tab-navigators-vertical
tabs on the top
.tab-navigators
Wizard
.wizard-navigators

El siguiente es el código de HTML para el elemento del navegador de pestañas (similar a las pestañas de arranque):

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

Puede cambiar el estilo del navegador mediante reglas CSS que seleccionen los elementos mediante el uso de selectores descendentes. Por ejemplo, para agregar un estilo de decoración del texto a la etiqueta de anclaje, haga lo siguiente:

Navegador de pestañas en la parte superior:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

Además, hay clases para aplicar estilo a los navegadores de pestañas (tanto izquierda como superior) en función de si tienen navegadores anidados/secundarios/subnavegadores.

Clase de CSS
Descripción
nested_true
Navegadores de pestañas (izquierda y arriba) que tienen navegadores anidados/secundarios/subnavegadores
nested_false
Exploradores de pestañas (izquierda y superior) que no tienen navegadores anidados/secundarios/subnavegadores

La clase guideNavIcon proporciona un icono predeterminado para los navegadores de pestañas (izquierda y superior) y del asistente.

Clase de CSS
guideNavIcon
NOTE
Puede cambiar el icono de un navegador concreto al proporcionar una clase CSS en el panel de creación, como por ejemplo <CLASS_NAME>. Agregue un <CLASS_NAME>_nav para el icono del navegador.
Variables
Descripción
Navegadores de pestañas
navigator-bg-color
Color de fondo para todo el navegador de pestañas
tabs-bg-color
Color de fondo de las pestañas
tabs-font-color
Color de la fuente de las pestañas
tabs-hover-bg-color
Color de fondo de las pestañas al pasar el ratón por encima
tabs-hover-font-color
Color de la fuente de las pestañas al pasar el ratón por encima
tabs-active-bg-color
Color de fondo cuando el panel está enfocado (activo)
tabs-active-font-color
Color de la fuente cuando el panel está enfocado
tabs-completed-bg-color
Color de fondo cuando la expresión de finalización del panel devuelve “true”
tabs-completed-font-color
Color de la fuente cuando la expresión de finalización del panel devuelve “true”
tabs-stepped-bg-color
Color de fondo cuando el panel ha estado enfocado una vez, pero la expresión de finalización devuelve el valor “false”
tabs-stepped-font-color
Color de la fuente cuando el panel ha estado seleccionado una vez, pero la expresión de finalización devuelve el valor “false”
tabs-border-color
Color del borde de la pestaña
tabs-font-size
Tamaño de la fuente de la pestaña
tabs-padding
Relleno de la pestaña
tabs-margin
Margen de la pestaña
tabs-vertical-margin
Margen de las pestañas verticales
tabs-border-thickness
Tamaño del borde de las pestañas
tabs-min-height
Altura mínima de las pestañas
heirarichal-indent
Sangría de las pestañas anidadas
Navegadores del asistente
wizard-navigator-bg-color
Color de fondo de todo el navegador del asistente
wizard-tabs-bg-color
Color de fondo del asistente
wizard-tabs-font-color
Color de la fuente del asistente
wizard-tabs-active-bg-color
Color de fondo cuando el panel está enfocado (activo)
wizard-tabs-active-font-color
Color de la fuente cuando el panel está enfocado (centrado)
wizard-tabs-completed-bg-color
Color de fondo cuando la expresión de finalización del panel devuelve “true”
wizard-tabs-completed-font-color
Color de la fuente cuando la expresión de finalización del panel devuelve “true”
wizard-tabs-stepped-bg-color
Color de fondo cuando el panel ha estado enfocado una vez, pero la expresión de finalización devuelve el valor “false”
wizard-tabs-stepped-font-color
Color de la fuente cuando el panel se ha centrado una vez, pero la expresión de finalización devuelve “false”
wizard-tabs-border-color
Color del asistente
wizard-tabs-font-size
Tamaño de la fuente del asistente
wizard-tabs-padding
Relleno del asistente
wizard-tabs-border-thickness
Tamaño del borde del asistente
wizard-nav-bullet-border
Color del borde de la viñeta del navegador del asistente (prefiriendo el pie de ilustración/etiqueta)
wizard-progress-bg-color
Color de fondo de la barra de progreso del navegador del asistente
wizard-progress-color
Color de relleno para la barra de progreso
navegadores de acordeón
accordion-tabs-padding
Relleno para el acordeón

Estilo del panel panel-styling

Un panel incluye una barra de herramientas opcional y su contenido.

Clase de CSS
guidePanelNode
Variables
Descripción
panel-background-color
Color de fondo del panel
panel-font-size
Tamaño de la fuente del texto del panel
panel-font-color
Color de la fuente del texto del panel
panel-padding
Relleno dentro del panel
panel-description-font-size
Tamaño de la fuente de la descripción del panel
panel-description-padding
Relleno de la descripción del panel
panel-help-bg-color
Color de fondo de la ayuda del panel
panel-help-border-indicator-color
Color del borde indicador de la ayuda del panel

El nodo del panel se divide en navegadores y contenido. No ``hay ningún componente de estilo independiente para el contenido. Las variables descritas se aplican tanto en el navegador como en el contenido.

*El panel superior (RootPanel) no tiene esta clase.

Estilo móvil mobile-styling

Barra de encabezado header-bar

Estas variables influyen en la barra de encabezado que es visible en un dispositivo móvil o en dispositivos de pantalla pequeña que contienen título de panel y los navegadores siguiente y atrás.

Clase de CSS
guide-header-bar
Variables
Descripción
headerbar-background-color
Color de fondo de la barra de encabezado
headerbar-font-color
Color de la fuente del texto dentro de la barra de encabezado
headerbar-padding
Relleno de la barra de encabezado

Indicador de desplazamiento scroll-indicator

Estas variables influyen en el indicador de desplazamiento, que es una flecha naranja que aparece en un dispositivo móvil o en dispositivos de pantalla pequeña. Un indicador de desplazamiento indica que hay contenido más allá de la parte visible de la pantalla. Puede desplazarse hacia abajo para verlo. Cuando llega al final del contenido, la flecha desaparece.

Clase de CSS
mobileScrollIndicator
Variables
Descripción
scrollIndicatorBottom
Posición fija del indicador de desplazamiento desde la parte inferior
scrollIndicatorRight
Posición fija del indicador de desplazamiento desde la derecha
scrollIndicatorWidth
Anchura del indicador de desplazamiento
scrollIndicatorHeight
Altura del indicador de desplazamiento

Variables móviles fijas específicas del diseño de la barra de herramientas mobile-fixed-toolbar-layout-specific-variables

Las variables de la siguiente tabla influyen en el diseño de la barra de herramientas fija móvil.

Clase de CSS
mobileToolbar
Variables
Descripción
mobileToolbarBottom
Posición fija de la barra de herramientas, en el dispositivo móvil, desde la parte inferior
mobileToolbarTop
Posición fija de la barra de herramientas, en el dispositivo móvil, desde la parte superior
mobileToolbarLeft
Posición fija de la barra de herramientas, en el dispositivo móvil, desde la izquierda
mobileToolbarRight
Posición fija de la barra de herramientas, en el dispositivo móvil, desde la derecha
mobileButtonIconTopMargin
Posición fija del icono de botones de la barra de herramientas, desde la parte superior
mobileButtonIconWidth
Anchura del icono de botones de la barra de herramientas en el dispositivo móvil
mobileButtonIconHeight
Altura del icono de botones de la barra de herramientas en el dispositivo móvil
mobilefixedtoolbarbgcolor
Color de fondo de la barra de herramientas en dispositivos móviles
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da