2016-01-22 13:55:18 +01:00
|
|
|
---
|
|
|
|
title: Button
|
|
|
|
order: 14
|
|
|
|
layout: page
|
|
|
|
---
|
|
|
|
|
|
|
|
[[components.button]]
|
2017-02-21 13:46:46 +01:00
|
|
|
= Button
|
2016-01-22 13:55:18 +01:00
|
|
|
|
|
|
|
ifdef::web[]
|
|
|
|
[.sampler]
|
|
|
|
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/button"]
|
|
|
|
endif::web[]
|
|
|
|
|
|
|
|
The [classname]#Button# component is normally used for initiating some action,
|
|
|
|
such as finalizing input in forms. When the user clicks a button, a
|
2016-07-19 13:57:05 +02:00
|
|
|
[classname]#Button.ClickEvent# is fired, which can be handled by adding a __click listener__
|
|
|
|
using either the [methodname]#onClick()# or the [methodname]#addClickListener()# method.
|
2016-01-22 13:55:18 +01:00
|
|
|
|
2016-07-22 15:57:02 +02:00
|
|
|
[[figure.component.button.basic]]
|
|
|
|
.A [classname]#Button#
|
|
|
|
image::img/button-example1.png[width=35%, scaledwidth=60%]
|
2016-01-22 13:55:18 +01:00
|
|
|
|
2016-07-22 15:57:02 +02:00
|
|
|
You can handle button clicks most easily with an anonymous class or a lambda expression, as follows:
|
2016-01-22 13:55:18 +01:00
|
|
|
|
|
|
|
[source, java]
|
|
|
|
----
|
|
|
|
Button button = new Button("Do not press this button");
|
|
|
|
|
2016-07-19 13:57:05 +02:00
|
|
|
button.addClickListener(clickEvent ->
|
2016-05-20 13:44:42 +02:00
|
|
|
Notification.show("Do not press this button again"));
|
2016-01-22 13:55:18 +01:00
|
|
|
----
|
|
|
|
|
2016-05-20 13:44:42 +02:00
|
|
|
The listener can also be given in the constructor, which is often perhaps simpler.
|
|
|
|
|
2016-01-22 13:55:18 +01:00
|
|
|
|
|
|
|
== CSS Style Rules
|
|
|
|
|
|
|
|
|
|
|
|
[source, css]
|
|
|
|
----
|
|
|
|
.v-button { }
|
|
|
|
.v-button-wrap { }
|
|
|
|
.v-button-caption { }
|
|
|
|
----
|
|
|
|
|
|
|
|
A button has an overall [literal]#++v-button++# style. The caption has
|
|
|
|
[literal]#++v-button-caption++# style. There is also an intermediate wrap
|
|
|
|
element, which may help in styling in some cases.
|
|
|
|
|
2016-07-24 23:00:36 +02:00
|
|
|
The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.valostyles>>.
|
2016-07-22 15:57:02 +02:00
|
|
|
The styles are defined in the [classname]#ValoTheme# class.
|
|
|
|
|
2016-07-24 23:00:36 +02:00
|
|
|
[[figure.component.button.valostyles]]
|
2016-07-22 15:57:02 +02:00
|
|
|
.Button in different styles of the Valo theme
|
|
|
|
image::img/button-valo-styles.png[width=70%, scaledwidth=100%]
|