Construcciones de estilo para formularios adaptables styling-constructs-for-adaptive-forms
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.
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).
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.
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.
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:
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.
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>
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.
Tabla table
Puede cambiar la temática de color para el encabezado y las filas del cuerpo de una tabla mediante las siguientes variables.
Archivo adjunto file-attachment
El widget Archivo adjunto de los formularios adaptables permite cargar archivos. También puede personalizar el widget mediante las variables.
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.
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.
La clase guideNavIcon proporciona un icono predeterminado para los navegadores de pestañas (izquierda y superior) y del asistente.
Estilo del panel panel-styling
Un panel incluye una barra de herramientas opcional y su contenido.
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.
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.
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.