Examples with HTMLElement elemental2.dom.HTMLElement used on opensource projects

Example 21 with HTMLElement

use of elemental2.dom.HTMLElement in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initTextIconButtons.

private void initTextIconButtons() {
    Card card = Card.create("ICON & TEXT BUTTONS", "Make icon & text buttons");
    HTMLElement extension = IconButton.create(Icons.ALL.extension()).setContent("EXTENSION").asElement();
    HTMLElement home = IconButton.createPrimary(Icons.ALL.home()).setContent("HOME").asElement();
    HTMLElement lock = IconButton.createSuccess(Icons.ALL.lock()).setContent("LOCK").asElement();
    HTMLElement scanWifi = IconButton.createInfo(Icons.ALL.perm_scan_wifi()).setContent("SCAN WIFI").asElement();
    HTMLElement takeOff = IconButton.createWarning(Icons.ALL.flight_takeoff()).setContent("TAKE OFF").asElement();
    HTMLElement print = IconButton.createDanger(Icons.ALL.print()).setContent("PRINT").asElement();
    extension.style.margin = CSSProperties.MarginUnionType.of("5px");
    extension.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    home.style.margin = CSSProperties.MarginUnionType.of("5px");
    home.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    lock.style.margin = CSSProperties.MarginUnionType.of("5px");
    lock.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    scanWifi.style.margin = CSSProperties.MarginUnionType.of("5px");
    scanWifi.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    takeOff.style.margin = CSSProperties.MarginUnionType.of("5px");
    takeOff.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    print.style.margin = CSSProperties.MarginUnionType.of("5px");
    print.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(extension);
    card.appendContent(home);
    card.appendContent(lock);
    card.appendContent(scanWifi);
    card.appendContent(takeOff);
    card.appendContent(print);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initTextIconButtons()).asElement());
}

Example 22 with HTMLElement

use of elemental2.dom.HTMLElement in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initBlockButtons.

private void initBlockButtons() {
    Card card = Card.create("BLOCK BUTTONS", "Create block level buttons");
    HTMLElement defaultBlock = Button.createDefault("DEFAULT").setBlock(true).asElement();
    HTMLElement primaryBlock = Button.createPrimary("PRIMARY").setBlock(true).asElement();
    HTMLElement infoBlock = Button.createInfo("INFO").setBlock(true).asElement();
    HTMLElement warningBlock = Button.createWarning("WARNING").setBlock(true).asElement();
    HTMLElement dangerBlock = Button.createDanger("DANGER").setBlock(true).asElement();
    defaultBlock.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultBlock.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    primaryBlock.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryBlock.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    infoBlock.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoBlock.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    warningBlock.style.margin = CSSProperties.MarginUnionType.of("5px");
    warningBlock.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    dangerBlock.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerBlock.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultBlock);
    card.appendContent(primaryBlock);
    card.appendContent(infoBlock);
    card.appendContent(warningBlock);
    card.appendContent(dangerBlock);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initBlockButtons()).asElement());
}

Example 23 with HTMLElement

use of elemental2.dom.HTMLElement in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initDisabledButtons.

private void initDisabledButtons() {
    Card card = Card.create("DISABLED BUTTONS", "Make buttons look unclickable by fading them back with opacity");
    HTMLElement defaultDisabled = Button.createDefault("DEFAULT").disable().asElement();
    HTMLElement primaryDisabled = Button.createPrimary("PRIMARY").disable().asElement();
    HTMLElement infoDisabled = Button.createInfo("INFO").disable().asElement();
    HTMLElement warningDisabled = Button.createWarning("WARNING").disable().asElement();
    HTMLElement dangerDisabled = Button.createDanger("DANGER").disable().asElement();
    defaultDisabled.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultDisabled.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    primaryDisabled.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryDisabled.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    infoDisabled.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoDisabled.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    warningDisabled.style.margin = CSSProperties.MarginUnionType.of("5px");
    warningDisabled.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    dangerDisabled.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerDisabled.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultDisabled);
    card.appendContent(primaryDisabled);
    card.appendContent(infoDisabled);
    card.appendContent(warningDisabled);
    card.appendContent(dangerDisabled);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initDisabledButtons()).asElement());
}

Example 24 with HTMLElement

use of elemental2.dom.HTMLElement in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initJustifyGroup.

private void initJustifyGroup() {
    Card justifiedGroupCard = Card.create("JUSTIFIED BUTTON GROUPS", "Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.");
    DropdownButton dropDown = DropdownButton.createDefault("Drop down").addAction(DropdownAction.create("Action")).separator().addAction(DropdownAction.create("Action2"));
    JustifiedGroup justifiedGroup = JustifiedGroup.create();
    justifiedGroup.addButton(Button.createPrimary("LEFT"));
    justifiedGroup.addButton(Button.createInfo("MIDDLE"));
    justifiedGroup.addButton(Button.createDanger("RIGHT"));
    justifiedGroup.addDropDown(dropDown);
    HTMLElement element1 = justifiedGroup.asElement();
    element1.style.margin = CSSProperties.MarginUnionType.of("5px");
    element1.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    justifiedGroupCard.getBody().appendChild(justifiedGroup.asElement());
    element.appendChild(justifiedGroupCard.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initJustifyGroup()).asElement());
}

Example 25 with HTMLElement

use of elemental2.dom.HTMLElement in project domino-ui-demo by DominoKit.

the class DialogsViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("DIALOGS").asElement());
    Column column = Column.create().onLarge(Column.OnLarge.six).onMedium(Column.OnMedium.six).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    MessageDialog basicMessage = MessageDialog.createMessage("Here's a message!", () -> Notification.create("Dialog closed").show());
    MessageDialog headerAndMessage = MessageDialog.createMessage("Message header", "Here's a message body!", () -> Notification.create("Dialog closed").show());
    MessageDialog successMessage = MessageDialog.createMessage("Success Operation", "Well done! You successfully read this important alert message.", () -> Notification.create("Dialog closed").show()).success();
    MessageDialog errorMessage = MessageDialog.createMessage("Failed operation", "Oh snap! Change a few things up and try submitting again.", () -> Notification.create("Dialog closed").show()).error();
    MessageDialog customColors = MessageDialog.createMessage("Failed operation", "Oh snap! Change a few things up and try submitting again.", () -> Notification.create("Dialog closed").show()).error().setModalColor(Color.RED).setIconColor(Color.WHITE);
    MessageDialog warningMessage = MessageDialog.createMessage("Warning", "Warning! Better check yourself, you're not looking too good.", () -> Notification.create("Dialog closed").show()).warning();
    HTMLElement heart = Icons.ALL.favorite().asElement();
    heart.classList.add(Styles.font_72, Styles.m_b_15, Color.RED.getStyle());
    MessageDialog customHeaderContent = MessageDialog.createMessage("Custom header", "You can customize the header content", () -> Notification.create("Dialog closed").show()).onOpen(() -> Animation.create(heart).duration(400).infinite().transition(Transition.PULSE).animate()).appendHeaderContent(heart);
    HTMLUListElement listGroup = SimpleListGroup.create().appendItem(SimpleListItem.create("Cras justo odio").appendContent(Badge.create("14 new").setBackground(Background.PINK).asElement())).appendItem(SimpleListItem.create("Dapibus ac facilisis in").appendContent(Badge.create("99 unread").setBackground(Background.CYAN).asElement())).appendItem(SimpleListItem.create("Morbi leo risus").appendContent(Badge.create("99+").setBackground(Background.TEAL).asElement())).appendItem(SimpleListItem.create("Porta ac consectetur ac").appendContent(Badge.create("21").setBackground(Background.ORANGE).asElement())).appendItem(SimpleListItem.create("Vestibulum at eros").appendContent(Badge.create("Pending").setBackground(Background.PURPLE).asElement())).asElement();
    listGroup.style.setProperty("text-align", "left");
    MessageDialog customContent = MessageDialog.createMessage("Custom content", "You can customize the dialog content", () -> Notification.create("Dialog closed").show()).appendContent(listGroup);
    this.element.appendChild(Card.create("EXAMPLES").appendContent(Row.create().addColumn(column.copy().addElement(basicMessage.asElement()).addElement(Paragraph.create("A basic message").asElement()).addElement(createDemoButton(basicMessage))).addColumn(column.copy().addElement(headerAndMessage.asElement()).addElement(Paragraph.create("Message with header").asElement()).addElement(createDemoButton(headerAndMessage))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(successMessage.asElement()).addElement(Paragraph.create("Success message").asElement()).addElement(createDemoButton(successMessage))).addColumn(column.copy().addElement(errorMessage.asElement()).addElement(Paragraph.create("Error message").asElement()).addElement(createDemoButton(errorMessage))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(warningMessage.asElement()).addElement(Paragraph.create("Warning message").asElement()).addElement(createDemoButton(warningMessage))).addColumn(column.copy().addElement(customColors.asElement()).addElement(Paragraph.create("Custom colors").asElement()).addElement(createDemoButton(customColors))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(customHeaderContent.asElement()).addElement(Paragraph.create("Custom header content").asElement()).addElement(createDemoButton(customHeaderContent))).addColumn(column.copy().addElement(customContent.asElement()).addElement(Paragraph.create("Custom content").asElement()).addElement(createDemoButton(customContent))).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.dialogs()).asElement());
}