Construcciones de estilo para formularios adaptables
- Temas:
- Adaptive Forms
Creado para:
- User
Requisitos previos
Conocimiento de CSS y del marco de trabajo LESS.
Qué se puede personalizar
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
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
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
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
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
Un contenedor es el componente de nivel superior. Otros paneles y campos se encuentran debajo del componente contenedor.
guideContainerNode
container-bgColor
container-padding
container-margin
container-fontColor
Estilo del campo
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).
guideFieldNode
field-padding
field-error-font-color
field-error-font-size
Estilo de la etiqueta
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.
guideFieldLabel
label-font-color
label-font-size
label-line-height
label-font-weight
label-margin
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
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.
guideFieldWidget
widgets-bg-color
widgets-border-color
widgets-border-thickness
widgets-border-radius
widgets-border-type
widget-border-focus-type
widgets-border
widgets-font-color
widgets-font-size
widgets-line-height
widgets-padding
widgets-focus-border-color
widgets-mandatory-border-color
widgets-mandatory-bg-color
widgets-disabled-bg-color
widgets-disabled-font-color
widgets-disabled-border-color
widget-height
checkbutton-height
listboxwidget-height
Restricciones en el estilo de los widgets
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
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:
widgets-help-long-bg-color
widgets-help-long-border-color
widgets-help-long-border-indicator-color
widgets-help-short-bg-color
widgets-help-short-color
widgets-help-short-tooltip-bg-color
widgets-help-short-tooltip-color
Términos y condiciones
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.
tnc-unvisited
tnc-visited
Botón
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>
iconButton-icon
iconButton-label
button-border-size
button-border-type
button-padding
button-font-size
button-background-color
button-font-color
button-border-color
button-large-padding
button-large-font-size
button-small-padding
button-small-font-size
button-info-background-color
button-info-font-color
button-info-border-color
button-warning-background-color
button-warning-font-color
button-warning-border-color
button-alert-background-color
button-alert-font-color
button-alert-border-color
Signo de interrogación
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.
guideHelpQuestionMark
questionmark-font-color
questionmark-hover-font-color
Tabla
Puede cambiar la temática de color para el encabezado y las filas del cuerpo de una tabla mediante las siguientes variables.
table-header-bg-color
#333
.table-odd-row-bg-color
rgb(255, 255, 255)
.table-even-row-bg-color
#eee
.Archivo adjunto
El widget Archivo adjunto de los formularios adaptables permite cargar archivos. También puede personalizar el widget mediante las variables.
fileItemPadding
fileItemBackground
fileItemBorderColor
fileItemColor
filePreviewIconColor
fileItemCommentHeight
Estilos del navegador
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.
Accordion
tabs on the left
tabs on the top
Wizard
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.
nested_true
nested_false
La clase guideNavIcon proporciona un icono predeterminado para los navegadores de pestañas (izquierda y superior) y del asistente.
guideNavIcon
navigator-bg-color
tabs-bg-color
tabs-font-color
tabs-hover-bg-color
tabs-hover-font-color
tabs-active-bg-color
tabs-active-font-color
tabs-completed-bg-color
tabs-completed-font-color
tabs-stepped-bg-color
tabs-stepped-font-color
tabs-border-color
tabs-font-size
tabs-padding
tabs-margin
tabs-vertical-margin
tabs-border-thickness
tabs-min-height
heirarichal-indent
wizard-navigator-bg-color
wizard-tabs-bg-color
wizard-tabs-font-color
wizard-tabs-active-bg-color
wizard-tabs-active-font-color
wizard-tabs-completed-bg-color
wizard-tabs-completed-font-color
wizard-tabs-stepped-bg-color
wizard-tabs-stepped-font-color
wizard-tabs-border-color
wizard-tabs-font-size
wizard-tabs-padding
wizard-tabs-border-thickness
wizard-nav-bullet-border
wizard-progress-bg-color
wizard-progress-color
accordion-tabs-padding
Estilo del panel
Un panel incluye una barra de herramientas opcional y su contenido.
guidePanelNode
panel-background-color
panel-font-size
panel-font-color
panel-padding
panel-description-font-size
panel-description-padding
panel-help-bg-color
panel-help-border-indicator-color
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
Barra de encabezado
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.
guide-header-bar
headerbar-background-color
headerbar-font-color
headerbar-padding
Indicador de desplazamiento
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.
mobileScrollIndicator
scrollIndicatorBottom
scrollIndicatorRight
scrollIndicatorWidth
scrollIndicatorHeight
Variables móviles fijas específicas del diseño de la barra de herramientas
Las variables de la siguiente tabla influyen en el diseño de la barra de herramientas fija móvil.
mobileToolbar
mobileToolbarBottom
mobileToolbarTop
mobileToolbarLeft
mobileToolbarRight
mobileButtonIconTopMargin
mobileButtonIconWidth
mobileButtonIconHeight
mobilefixedtoolbarbgcolor