documentation/components/components-button.asciidoc


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

---
title: Button
order: 14
layout: page
---

[[components.button]]
= Button

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
[classname]#Button.ClickEvent# is fired, which can be handled by adding a __click listener__
using either the [methodname]#onClick()# or the [methodname]#addClickListener()# method.

[[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]
----
Button button = new Button("Do not press this button");

button.addClickListener(clickEvent ->
    Notification.show("Do not press this button again"));
----

The listener can also be given in the constructor, which is often perhaps simpler.


== 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.

The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.valostyles>>.
The styles are defined in the [classname]#ValoTheme# class.

[[figure.component.button.valostyles]]
.Button in different styles of the Valo theme
image::img/button-valo-styles.png[width=70%, scaledwidth=100%]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php

declare(strict_types=1);

/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
namespace OCA\Files_Sharing\Controller;

use OCA\Files_Sharing\AppInfo\Application;
use OCP\AppFramework\Controller;
use OCP\AppFramework\Http\Attribute\NoAdminRequired;
use OCP\AppFramework\Http\JSONResponse;
use OCP\IConfig;
use OCP\IRequest;

class SettingsController extends Controller {

	public function __construct(
		IRequest $request,
		private IConfig $config,
		private string $userId,
	) {
		parent::__construct(Application::APP_ID, $request);
	}

	#[NoAdminRequired]
	public function setDefaultAccept(bool $accept): JSONResponse {
		$this->config->setUserValue($this->userId, Application::APP_ID, 'default_accept', $accept ? 'yes' : 'no');
		return new JSONResponse();
	}

	#[NoAdminRequired]
	public function setUserShareFolder(string $shareFolder): JSONResponse {
		$this->config->setUserValue($this->userId, Application::APP_ID, 'share_folder', $shareFolder);
		return new JSONResponse();
	}

	#[NoAdminRequired]
	public function resetUserShareFolder(): JSONResponse {
		$this->config->deleteUserValue($this->userId, Application::APP_ID, 'share_folder');
		return new JSONResponse();
	}
}