diff options
Diffstat (limited to 'documentation/components/components-button.asciidoc')
| -rw-r--r-- | documentation/components/components-button.asciidoc | 31 |
1 files changed, 17 insertions, 14 deletions
diff --git a/documentation/components/components-button.asciidoc b/documentation/components/components-button.asciidoc index fdd6cf594f..65b991404b 100644 --- a/documentation/components/components-button.asciidoc +++ b/documentation/components/components-button.asciidoc @@ -18,8 +18,11 @@ such as finalizing input in forms. When the user clicks a button, a [classname]#Button.ClickEvent# is fired, which can be handled by adding a __click listener__ using either the [methodname]#onClick()# or the [methodname]#addClickListener()# method. -You can handle button clicks with an anonymous class as follows: +[[figure.component.button.basic]] +.A [classname]#Button# +image::img/button-example1.png[width=35%, scaledwidth=60%] +You can handle button clicks most easily with an anonymous class or a lambda expression, as follows: [source, java] ---- @@ -32,17 +35,14 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#component.button.basic The listener can also be given in the constructor, which is often perhaps simpler. -The button component can be styled in many ways, as illustrated in <<figure.component.button.basic>>. - -[[figure.component.button.basic]] -.Button in Different Styles of Valo Theme -image::img/button-example1.png[width=70%, scaledwidth=100%] - -If you handle several buttons in the same listener, you can differentiate between -them by comparing the [classname]#Button# object reference returned by the [methodname]#getButton()# -method of [classname]#Button.ClickEvent# to a kept reference. For a detailed description -of these patterns together with some examples, please see +//// +If you handle several buttons in the same listener, you can differentiate +between them either by comparing the [classname]#Button# object reference +returned by the [methodname]#getButton()# method of +[classname]#Button.ClickEvent# to a kept reference. For a detailed description +of these patterns together with some examples, please see <<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events and Listeners">>. +//// == CSS Style Rules @@ -58,6 +58,9 @@ 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. -Some built-in themes contain a small style, which you can enable by adding -[parameter]#Reindeer.BUTTON_SMALL#, etc. The [classname]#BaseTheme# also has a -[parameter]#BUTTON_LINK# style, which makes the button look like a hyperlink. +The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.basic>>. +The styles are defined in the [classname]#ValoTheme# class. + +[[figure.component.button.basic]] +.Button in different styles of the Valo theme +image::img/button-valo-styles.png[width=70%, scaledwidth=100%] |