Directory

PaperToggleButton

Wrapper for Polymer element paper-toggle-button

View larger

Close

The polymer element is a 'switch' (or 'toggle button') with functionality similar to a Vaadin Checkbox, but with a look and feel of a toggle button. See https://www.webcomponents.org/element/@polymer/paper-toggle-button/elements/paper-toggle-button for more information.

Sample code

@HtmlImport("shared-styles.html")
@Route("")
public class DemoView extends VerticalLayout {

    public DemoView() {
        add(new H3("Basic demo:"));
        PaperToggleButton b1 = new PaperToggleButton();
        add(b1);

        add(new H3("With label:"));
        PaperToggleButton b2 = new PaperToggleButton("Some label");
        add(b2);

        add(new H3("Set to on:"));
        PaperToggleButton b3 = new PaperToggleButton("This is on", true);
        add(b3);

        add(new H3("Disabled:"));
        PaperToggleButton b4 = new PaperToggleButton("Disabled");
        b4.setEnabled(false);
        add(b4);

        add(new H3("With value change listener:"));
        Label l = new Label("switch is off");
        PaperToggleButton b5 = new PaperToggleButton("Click me", ev -> l.setText("switch is "+(ev.getValue()? "on" : "off")));
        add(b5, l);

        add(new H3("Styled:"));
        PaperToggleButton b6 = new PaperToggleButton("Green and teal", false);
        b6.getStyle().set("--paper-toggle-button-checked-bar-color", "var(--paper-green-500)");
        b6.getStyle().set("--paper-toggle-button-checked-button-color", "var(--paper-green-500)");
        b6.getStyle().set("--paper-toggle-button-checked-ink-color", "var(--paper-green-500)");
        b6.getStyle().set("--paper-toggle-button-unchecked-bar-color", "var(--paper-teal-500)");
        b6.getStyle().set("--paper-toggle-button-unchecked-button-color", "var(--paper-teal-500)");
        b6.getStyle().set("--paper-toggle-button-unchecked-ink-color", "var(--paper-teal-500)");

        PaperToggleButton b7 = new PaperToggleButton("Pink and indigo", true);
        b7.getStyle().set("--paper-toggle-button-checked-bar-color", "var(--paper-pink-500)");
        b7.getStyle().set("--paper-toggle-button-checked-button-color", "var(--paper-pink-500)");
        b7.getStyle().set("--paper-toggle-button-checked-ink-color", "var(--paper-pink-500)");
        b7.getStyle().set("--paper-toggle-button-unchecked-bar-color", "var(--paper-indigo-500)");
        b7.getStyle().set("--paper-toggle-button-unchecked-button-color", "var(--paper-indigo-500)");
        b7.getStyle().set("--paper-toggle-button-unchecked-ink-color", "var(--paper-indigo-500)");
        add(b6, b7);
    }

}

Links

• web component

Compatibility