Botón

Pruébalo en vivo

Prueba el botón con controles en vivo en el catálogo de componentes: el componente real de AWE y el XML que lo produce.

Un botón es un elemento de control gráfico que proporciona al usuario una forma simple de lanzar un evento, como realizar una consulta, o interactuar con cuadros de diálogo, como confirmar una acción.

Al hacer clic en un botón de AWE se lanza la lista de acciones definidas (acciones de botón) que son llamadas secuencialmente.

---

Cuando el tamaño de la pantalla es demasiado pequeño (dispositivos móviles) los botones definidos en el source buttons de la pantalla son movidos al borde inferior:

Esqueleto de XML

<button id="[button-identifier]" button-type="[button-type]" label="[button-label]" icon="[button-icon]" 
        style="[button-style]" size="[button-size]">
  <button-action... />
  <dependency... />
</button>

Estructura del botón

Elemento	Uso	Varias instancias	Descripción
button	Obligatorio	No	Elemento principal del botón. Define los atributos del botón
button-action	Opcional	Si	Lista de acciones que se lanzan al pulsar el botón
dependency	Opcional	Si	Lista de dependencias definidas en el botón

Atributos del botón

Atributo	Uso	Tipo	Descripción	Valores
id	Opcional	String	Identificador del botón. Con fines de referencia
label	Opcional	String	Texto del botón	Nota: Puedes usar literales i18n
style	Opcional	String	Clases CSS del botón. Las clases btn-* dan el aspecto del botón y no-label lo deja solo con el icono. Ver estilos del botón
icon	Opcional	String	Identificador de icono	Nota: Puedes consultar todos los conjuntos de iconos en la pantalla icons
button-type	Opcional	String	Comportamiento por defecto del botón	button (por defecto), submit o reset. Ver tipos de botones
size	Opcional	String	Tamaño del criterio	sm (por defecto), md o lg.
value	Opcional	String	Establece un valor para el botón (puede ser utilizado como variable en el servidor)
help-text	Opcional	String	Texto para mostrar en el botón como ayuda	Nota: Puedes usar literales i18n
help-image	Opcional	String	URL de imagen para mostrar en el botón como ayuda	Nota: Puedes usar literales i18n
permission	Opcional	String	Permisos que necesita el usuario para ver el botón. Sustituye a lo que se deduce de los targets de sus acciones. Consulta elementos de pantalla	Identificadores de permiso separados por espacios, todos requeridos. Ej. users.create
show-loading	Opcional	Booleano	Estado de ocupado del botón. Si la acción que lanzó sigue en curso pasado un momento (unos 400 ms), el botón muestra un spinner en lugar de su icono (antes de su texto si no tiene) y sigue deshabilitado hasta que la acción termina. Las acciones rápidas no muestran nada	true (por defecto) o false

Estilos del botón

El atributo style recibe clases CSS. Algunas cambian el aspecto del botón en los dos motores cliente (AngularJS y React), con el sistema de diseño de AWE 5:

Estilo	Aspecto
(ninguno)	Botón con borde (un botón submit es el principal relleno, un botón reset el secundario)
btn-primary	Botón principal relleno: la acción principal de la pantalla, la tarjeta o el diálogo. Uno por zona
btn-default	Botón secundario relleno (el botón por defecto de Bootstrap). No es lo mismo que un botón sin estilo, que tiene borde y se redefine con los tokens --awe-button-default-*
btn-danger	Botón de peligro relleno (acciones destructivas)
btn-success	Botón de éxito relleno
btn-warning	Botón de aviso relleno
btn-dark	Botón de contraste relleno
btn-ghost	Botón fantasma: sin fondo ni borde hasta que el puntero pasa por encima, texto atenuado. Para acciones de barra de herramientas y de fila
btn-tonal	Botón tonal: el tinte suave del color principal, con el texto en el principal. Para una acción que tiene que destacar junto a los botones con borde sin ser la acción principal de la zona
no-label	Botón solo con icono (ver abajo). Se puede combinar con cualquiera de los anteriores

Si un estilo tiene varias clases btn-* se usa la primera. El resto de clases se añaden al botón tal cual.

Botones solo con icono

no-label dibuja solo el icono del botón, como un cuadrado del tamaño del control. La label sigue siendo necesaria: pasa a ser el tooltip del botón y su nombre accesible (aria-label), de modo que los lectores de pantalla la anuncian.

• Si el botón tiene title, el tooltip es el title en lugar de la etiqueta.
• Un botón con help mantiene su ayuda como tooltip (la etiqueta sigue siendo su nombre accesible).

<button label="BUTTON_SCREEN_HELP" icon="question-circle" id="ButHlp" style="btn-ghost no-label">
  <button-action type="dialog" target="HlpOpt" />
</button>

Tipos de botón

Tipo	Descripción	Imagen
button	Botón estándar. No hace nada si no hay acciones de botón adjuntas
submit	Botón de enviar. Se llama cuando un usuario presiona INTRO dentro de un criterio
reset	Botón de reiniciar. Si se hace clic lanza una acción de restablecimiento

Eventos del botón

Evento	Descripción
click	Se lanza cuando un usuario hace clic en el botón

Acciones de botón

Dentro de un botón, puede definir una lista de acciones que se ejecutarán cuando el usuario haga clic en el botón. El orden en que se definen las acciones de los botones es el mismo en el que serán lanzadas.

Consulte la sección de acciones para obtener más detalles.

Ejemplos

Botón estándar con acciones y dependencias (borrar fila en grid)

El botón está desactivado hasta que se seleccione al menos un elemento en el grid.

<button label="BUTTON_DELETE" icon="trash" id="ButDel">
  <button-action type="check-some-selected" target="Grd..."/>
  <button-action type="confirm" target="DelMsg" />
  <button-action type="server"  server-action="maintain" target-action="...Del"/>
  <button-action type="filter"  target="Grd..."/>
  <dependency target-type="disable" initial="true">
    <dependency-element id="Grd..." condition="&lt;" value="1"/>
  </dependency>
</button>

Botón que lanza un evento click

El mismo caso que antes, pero activado con una dependencia (y tal vez con otras condiciones de elementos)

<button label="BUTTON_DELETE" icon="trash" id="ButDel">
  <dependency target-type="disable" initial="true">
    <dependency-element id="Grd..." condition="&lt;" value="1"/>
  </dependency>
  <dependency initial="true">
    <dependency-element id="ButDel" event="click"/>
    <dependency-element .../>
    <dependency-action type="check-some-selected" target="Grd..."/>
    <dependency-action type="confirm" target="DelMsg" />
    <dependency-action type="server"  server-action="maintain" target-action="...Del"/>
    <dependency-action type="filter"  target="Grd..."/>
  </dependency>
</button>