Search in sources :

Example 1 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class DemoView method addCard.

private Card addCard(String tabName, String tabUrl, String heading, Component... components) {
    Div tab = tabComponents.computeIfAbsent(tabUrl, url -> {
        navBar.addLink(tabName, getTabUrl(tabUrl));
        return new Div();
    });
    if (heading != null && !heading.isEmpty()) {
        tab.add(new H3(heading));
    }
    Card card = new Card();
    if (components != null && components.length > 0) {
        card.add(components);
    }
    List<SourceCodeExample> list = sourceCodeExamples.get(heading);
    if (list != null) {
        list.stream().map(this::createSourceContent).forEach(card::add);
    }
    tab.add(card);
    return card;
}
Also used : Div(com.vaadin.flow.component.html.Div) H3(com.vaadin.flow.component.html.H3)

Example 2 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class AttachExistingElementView method onShow.

@Override
protected void onShow() {
    setId("root-div");
    NativeButton attachLabel = new NativeButton("Attach label", event -> getElement().getStateProvider().attachExistingElement(getElement().getNode(), "label", null, this::handleLabel));
    attachLabel.setId("attach-label");
    add(attachLabel);
    NativeButton attachHeader = new NativeButton("Attach Header", event -> getElement().getStateProvider().attachExistingElement(getElement().getNode(), "h1", null, this::handleHeader));
    attachHeader.setId("attach-header");
    add(attachHeader);
    Div div = new Div();
    div.setId("element-with-shadow");
    ShadowRoot shadowRoot = div.getElement().attachShadow();
    NativeButton attachLabelInShadow = new NativeButton("Attach label in shadow", event -> shadowRoot.getStateProvider().attachExistingElement(shadowRoot.getNode(), "label", null, this::handleLabelInShadow));
    attachLabelInShadow.setId("attach-label-inshadow");
    add(attachLabelInShadow);
    NativeButton attachNonExistingElement = new NativeButton("Attach non-existing element", event -> getElement().getStateProvider().attachExistingElement(getElement().getNode(), "image", null, new NonExistingElementCallback()));
    attachNonExistingElement.setId("non-existing-element");
    add(attachNonExistingElement);
    add(div);
    getPage().executeJavaScript("$0.appendChild(document.createElement('label'));", shadowRoot);
    getPage().executeJavaScript("$0.appendChild(document.createElement('span')); $0.appendChild(document.createElement('label'));" + "$0.appendChild(document.createElement('h1'));", getElement());
}
Also used : Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) ShadowRoot(com.vaadin.flow.dom.ShadowRoot)

Example 3 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class BasicComponentView method onShow.

@Override
protected void onShow() {
    getElement().getStyle().set("margin", "1em");
    getElement().setAttribute("id", "root");
    Text text = new Text(TEXT);
    Input input = new Input();
    input.setPlaceholder("Synchronized on change event");
    NativeButton button = new NativeButton(BUTTON_TEXT, e -> {
        Div greeting = new Div();
        greeting.addClassName("thankYou");
        String buttonText = e.getSource().getElement().getText();
        greeting.setText("Thank you for clicking \"" + buttonText + "\" at (" + e.getClientX() + "," + e.getClientY() + ")! The field value is " + input.getValue());
        greeting.addClickListener(e2 -> remove(greeting));
        add(greeting);
    });
    Div helloWorld = new Div();
    helloWorld.setText(DIV_TEXT);
    helloWorld.addClassName("hello");
    helloWorld.setId("hello-world");
    helloWorld.addClickListener(e -> {
        helloWorld.setText("Stop touching me!");
        helloWorld.getElement().getClassList().clear();
    });
    Style s = helloWorld.getElement().getStyle();
    s.set("color", "red");
    s.set("fontWeight", "bold");
    add(text, helloWorld, button, input);
}
Also used : Div(com.vaadin.flow.component.html.Div) NativeButton(com.vaadin.flow.component.html.NativeButton) Input(com.vaadin.flow.component.html.Input) Style(com.vaadin.flow.dom.Style) Text(com.vaadin.flow.component.Text)

Example 4 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class CompositeNestedView method initContent.

@Override
protected Div initContent() {
    Div div = new Div();
    nameField = new NameField();
    nameField.setId(NAME_FIELD_ID);
    Div name = new Div();
    name.setText("Name on server: " + nameField.getName());
    name.setId(NAME_ID);
    nameField.addNameChangeListener(e -> {
        name.setText("Name on server: " + nameField.getName());
    });
    div.add(name, nameField);
    return div;
}
Also used : Div(com.vaadin.flow.component.html.Div) NameField(com.vaadin.flow.uitest.ui.CompositeView.NameField)

Example 5 with Div

use of com.vaadin.flow.component.html.Div in project flow by vaadin.

the class CustomElementMappingView method addKey.

private void addKey(String key) {
    Div titleView = new Div();
    titleView.setText(key);
    titleView.getElement().setAttribute("custom", true);
    add(titleView);
}
Also used : Div(com.vaadin.flow.component.html.Div)

Aggregations

Div (com.vaadin.flow.component.html.Div)30 NativeButton (com.vaadin.flow.component.html.NativeButton)7 Text (com.vaadin.flow.component.Text)6 Element (com.vaadin.flow.dom.Element)4 HasComponents (com.vaadin.flow.component.HasComponents)3 EventHandler (com.vaadin.flow.component.polymertemplate.EventHandler)3 Input (com.vaadin.flow.component.html.Input)2 ShadowRoot (com.vaadin.flow.dom.ShadowRoot)2 HasText (com.vaadin.flow.component.HasText)1 H3 (com.vaadin.flow.component.html.H3)1 Hr (com.vaadin.flow.component.html.Hr)1 Label (com.vaadin.flow.component.html.Label)1 Span (com.vaadin.flow.component.html.Span)1 Style (com.vaadin.flow.dom.Style)1 NameField (com.vaadin.flow.uitest.ui.CompositeView.NameField)1