Botón
¿Qué hace este widget?
Un botón comunica una acción que tiene lugar al pulsarse en tiempo real.
¿Cuándo se aconseja utilizar este widget?
Con los botones, el usuario navega por la experiencia e interactúa. El widget de
Botón se utiliza para comunicar con claridad al usuario la acción que se efectuará después de pulsarse el botón. Se pueden aplicar estilos a los botones mediante CSS o con los temas configurados de fábrica. Para obtener más información sobre los temas, consulte
Temas.
¿Hay propiedades, servicios, eventos o acciones especiales?
Este widget no tiene propiedades, servicios o eventos únicos.
Para ver una lista de propiedades, servicios y eventos comunes de widgets, consulte
Propiedades, servicios y eventos comunes de widgets.
Widget en acción
A continuación se ofrece un ejemplo del aspecto que puede tener el widget.
|
Pasos mínimos para utilizarlo
|
Aspecto
|
|
1. Arrastre un widget de Botón y suéltelo en el lienzo.
2. Escriba el nombre del botón en el campo Texto. Por ejemplo, Play.
3. Enlace el evento de Pulsar del botón con otro widget; a continuación, seleccione el tipo de enlace que se creará. Por ejemplo, si el evento de Pulsar se enlaza con un modelo y se selecciona Reproducir todo en la ventana Seleccionar destino de enlace, cuando se pulsa el botón en una experiencia, se ejecutan todos los pasos de la secuencia que estén asociados con el modelo.
|
| En este ejemplo, se ha utilizado el tema configurado de fábrica button-balanced para que el botón sea de color verde. |
|
Aplicar estilos al widget con CSS
CSS puede utilizarse para aplicar estilos al widget. A continuación se muestra un ejemplo de una clase de CSS que se puede crear y aplicar:
|
|
Es aconsejable asignar nombres exclusivos a las clases; de este modo, no entrarán en conflicto con otras clases ni con propiedades de OOTB.
|
|
Ejemplo de CSS
|
Aspecto
|
|
.ptc-button {
border-width: 1px;
border-style: outset;
border-color: rgb(46, 50, 49);
border-radius: 25px;
background: rgb(47, 48, 53);
font-size: 16px;
font-family: Century Gothic;
color: white;
}
|
|
Para obtener más información sobre cómo implementar clases de CSS, consulte
Estilos de aplicación.
