Examples with Style com.vaadin.flow.dom.Style used on opensource projects

Example 11 with Style

use of com.vaadin.flow.dom.Style in project flow by vaadin.

the class ElementTest method semicolonInStyle.

@Test(expected = IllegalArgumentException.class)
public void semicolonInStyle() {
    Element e = ElementFactory.createDiv();
    Style s = e.getStyle();
    s.set("border", "1 px solid black;");
}

Example 12 with Style

use of com.vaadin.flow.dom.Style in project flow by vaadin.

the class ElementTest method dashSeparatedHasStyle.

@Test
public void dashSeparatedHasStyle() {
    Element element = ElementFactory.createDiv();
    Style style = element.getStyle();
    style.set("borderColor", "blue");
    style.set("border-foo", "bar");
    Assert.assertTrue(style.has("border-color"));
    Assert.assertTrue(style.has("border-foo"));
}

Example 13 with Style

use of com.vaadin.flow.dom.Style in project flow by vaadin.

the class BasicElementView method onShow.

@Override
protected void onShow() {
    Element mainElement = getElement();
    mainElement.getStyle().set("margin", "1em");
    Element button = ElementFactory.createButton("Click me");
    Element input = ElementFactory.createInput().setAttribute("placeholder", "Synchronized on change event").synchronizeProperty("value", "change");
    button.addEventListener("click", e -> {
        JsonObject eventData = e.getEventData();
        String buttonText = eventData.getString("element.textContent");
        int clientX = (int) eventData.getNumber("event.clientX");
        int clientY = (int) eventData.getNumber("event.clientY");
        Element greeting = ElementFactory.createDiv("Thank you for clicking \"" + buttonText + "\" at (" + clientX + "," + clientY + ")! The field value is " + input.getProperty("value"));
        greeting.setAttribute("class", "thankYou");
        greeting.addEventListener("click", e2 -> greeting.removeFromParent());
        mainElement.appendChild(greeting);
    }, "element.textContent", "event.clientX", "event.clientY");
    Element helloWorldElement = ElementFactory.createDiv("Hello world");
    Set<String> spanClasses = helloWorldElement.getClassList();
    helloWorldElement.setProperty("id", "hello-world");
    spanClasses.add("hello");
    helloWorldEventRemover = helloWorldElement.addEventListener("click", e -> {
        if (helloWorldElement.getText().equals("Hello world")) {
            helloWorldElement.setText("Stop touching me!");
        } else {
            // We never get to this code as long as the event
            // removal actually works
            helloWorldElement.setText(helloWorldElement.getText() + " This might be your last warning!");
        }
        spanClasses.clear();
        helloWorldEventRemover.remove();
    });
    Style s = helloWorldElement.getStyle();
    s.set("color", "red");
    s.set("fontWeight", "bold");
    Element elementContainer = ElementFactory.createDiv();
    Element toRemove = ElementFactory.createDiv("To Remove").setAttribute("id", "to-remove");
    elementContainer.appendChild(toRemove);
    elementContainer.setAttribute("id", "addremovecontainer");
    Element addRemoveButton = ElementFactory.createButton("Add and remove element");
    addRemoveButton.setAttribute("id", "addremovebutton");
    addRemoveButton.addEventListener("click", e -> {
        // very basic usecase: append and then immediately remove
        Element div = ElementFactory.createDiv("foobar");
        elementContainer.appendChild(div);
        elementContainer.removeChild(div);
        elementContainer.removeChild(toRemove);
        elementContainer.appendChild(toRemove);
        // Now let's have two "add" operation and then two "remove"
        // operation so that removal has an addition right before which
        // targets different element
        Element div2 = ElementFactory.createDiv("foobar");
        elementContainer.appendChild(div);
        elementContainer.appendChild(div2);
        Element ok = ElementFactory.createDiv("OK");
        ok.setAttribute("id", "ok");
        elementContainer.appendChild(ok);
        elementContainer.removeChild(div);
        elementContainer.removeChild(div2);
    });
    mainElement.appendChild(helloWorldElement, button, input, addRemoveButton, elementContainer);
}

Example 14 with Style

use of com.vaadin.flow.dom.Style in project flow by vaadin.

the class ElementTest method validStyleWithSemicolon.

@Test
public void validStyleWithSemicolon() {
    Element element = ElementFactory.createDiv();
    String validStyle = "background: url('foo;bar')";
    Style style = element.getStyle();
    style.set("background", validStyle);
    Assert.assertEquals(validStyle, style.get("background"));
}

Example 15 with Style

use of com.vaadin.flow.dom.Style in project flow by vaadin.

the class ElementTest method dashSeparatedRemoveStyle.

@Test
public void dashSeparatedRemoveStyle() {
    Element element = ElementFactory.createDiv();
    Style style = element.getStyle();
    style.set("borderColor", "blue");
    style.set("border-foo", "bar");
    style.remove("border-color");
    style.remove("border-foo");
    Assert.assertFalse(style.has("border-color"));
    Assert.assertFalse(style.has("border-foo"));
}