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

Example 6 with HTMLElement

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

the class LayoutViewImpl method addActionItem.

@Override
public void addActionItem(String iconName, LayoutContext.SelectionHandler selectionHandler) {
    HTMLElement actionItem = layout.addActionItem(Icon.create(iconName));
    actionItem.addEventListener("click", evt -> selectionHandler.onSelected());
}

Example 7 with HTMLElement

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

the class PopoverViewImpl method popover.

private void popover() {
    HTMLElement popover_on_right = Button.createPrimary("POPOVER ON RIGHT").block().asElement();
    Popover.create(popover_on_right, "Popover on right", Paragraph.create("Vivamus sagittis lacus vel augue laoreet rutrum faucibus.").asElement()).position(PopupPosition.RIGHT);
    HTMLElement popover_on_top = Button.createPrimary("POPOVER ON TOP").block().asElement();
    Popover.create(popover_on_top, "Popover on right", Paragraph.create("Vivamus sagittis lacus vel augue laoreet rutrum faucibus.").asElement()).position(PopupPosition.TOP);
    HTMLElement popover_on_bottom = Button.createPrimary("POPOVER ON BOTTOM").block().asElement();
    Popover.create(popover_on_bottom, "Popover on right", Paragraph.create("Vivamus sagittis lacus vel augue laoreet rutrum faucibus.").asElement()).position(PopupPosition.BOTTOM);
    HTMLElement popover_on_left = Button.createPrimary("POPOVER ON LEFT").block().asElement();
    Popover.create(popover_on_left, "Popover on right", Paragraph.create("Vivamus sagittis lacus vel augue laoreet rutrum faucibus.").asElement()).position(PopupPosition.LEFT);
    element.appendChild(Card.create("POPOVER").appendContent(Row.create().addColumn(column.copy().addElement(popover_on_right)).addColumn(column.copy().addElement(popover_on_top)).addColumn(column.copy().addElement(popover_on_bottom)).addColumn(column.copy().addElement(popover_on_left)).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.popover()).asElement());
}

Example 8 with HTMLElement

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

the class PopoverViewImpl method tooltips.

private void tooltips() {
    HTMLElement tooltip_on_right = Button.createPrimary("TOOLTIP ON RIGHT").block().asElement();
    Tooltip.create(tooltip_on_right, "Tooltip on right").position(PopupPosition.RIGHT);
    HTMLElement tooltip_on_top = Button.createPrimary("TOOLTIP ON TOP").block().asElement();
    Tooltip.create(tooltip_on_top, "Tooltip on top").position(PopupPosition.TOP);
    HTMLElement tooltip_on_bottom = Button.createPrimary("TOOLTIP ON BOTTOM").block().asElement();
    Tooltip.create(tooltip_on_bottom, "Tooltip on bottom").position(PopupPosition.BOTTOM);
    HTMLElement tooltip_on_left = Button.createPrimary("TOOLTIP ON LEFT").block().asElement();
    Tooltip.create(tooltip_on_left, "Tooltip on left").position(PopupPosition.LEFT);
    element.appendChild(Card.create("TOOLTIPS").appendContent(Row.create().addColumn(column.copy().addElement(tooltip_on_right)).addColumn(column.copy().addElement(tooltip_on_top)).addColumn(column.copy().addElement(tooltip_on_bottom)).addColumn(column.copy().addElement(tooltip_on_left)).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.tooltips()).asElement());
}

Example 9 with HTMLElement

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

the class ButtonsViewImpl method initIconButtons.

private void initIconButtons() {
    Card card = Card.create("ICON BUTTONS", "Make icon buttons");
    Row normal = Row.create();
    HTMLHeadingElement normal_circle = heading("Normal Icon Button");
    normal.asElement().appendChild(normal_circle);
    card.appendContent(normal.asElement());
    Row row = Row.create();
    HTMLElement homeIcon = IconButton.create(Icons.ALL.home()).setButtonType(StyleType.DEFAULT).asElement();
    HTMLElement micIcon = IconButton.createPrimary(Icons.ALL.mic()).setButtonType(StyleType.PRIMARY).asElement();
    HTMLElement moreIcon = IconButton.createInfo(Icons.ALL.more()).setButtonType(StyleType.INFO).asElement();
    HTMLElement keyboardIcon = IconButton.createSuccess(Icons.ALL.keyboard()).setButtonType(StyleType.SUCCESS).asElement();
    HTMLElement acUnitIcon = IconButton.createWarning(Icons.ALL.ac_unit()).setButtonType(StyleType.WARNING).asElement();
    HTMLElement accessAlarmIcon = IconButton.createDanger(Icons.ALL.access_alarm()).setButtonType(StyleType.DANGER).asElement();
    homeIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
    micIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
    moreIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
    keyboardIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
    acUnitIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
    accessAlarmIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
    row.asElement().appendChild(homeIcon);
    row.asElement().appendChild(micIcon);
    row.asElement().appendChild(moreIcon);
    row.asElement().appendChild(keyboardIcon);
    row.asElement().appendChild(acUnitIcon);
    row.asElement().appendChild(accessAlarmIcon);
    card.appendContent(row.asElement());
    Row smallCircle = Row.create();
    HTMLHeadingElement small_icon_button = heading("Small Circle Icon Button");
    smallCircle.asElement().appendChild(small_icon_button);
    card.appendContent(smallCircle.asElement());
    Row row1 = Row.create();
    HTMLElement addCircleIconCRL = IconButton.create(Icons.ALL.add_circle()).circle(CircleSize.SMALL).setButtonType(StyleType.DEFAULT).asElement();
    HTMLElement placeIconCRL = IconButton.createPrimary(Icons.ALL.place()).circle(CircleSize.SMALL).setButtonType(StyleType.PRIMARY).asElement();
    HTMLElement airplaneModeActiveIconCRL = IconButton.createInfo(Icons.ALL.airplanemode_active()).circle(CircleSize.SMALL).setButtonType(StyleType.INFO).asElement();
    HTMLElement albumIconCRL = IconButton.createSuccess(Icons.ALL.album()).circle(CircleSize.SMALL).setButtonType(StyleType.SUCCESS).asElement();
    HTMLElement weekendIconCRL = IconButton.createWarning(Icons.ALL.weekend()).circle(CircleSize.SMALL).setButtonType(StyleType.WARNING).asElement();
    HTMLElement airplayIconCRL = IconButton.createDanger(Icons.ALL.airplay()).circle(CircleSize.SMALL).setButtonType(StyleType.DANGER).asElement();
    addCircleIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    placeIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    airplaneModeActiveIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    albumIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    weekendIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    airplayIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    row1.asElement().appendChild(addCircleIconCRL);
    row1.asElement().appendChild(placeIconCRL);
    row1.asElement().appendChild(airplaneModeActiveIconCRL);
    row1.asElement().appendChild(albumIconCRL);
    row1.asElement().appendChild(weekendIconCRL);
    row1.asElement().appendChild(airplayIconCRL);
    card.appendContent(row1.asElement());
    Row large = Row.create();
    HTMLHeadingElement large_circle = heading("Large Circle Icon Button");
    large.asElement().appendChild(large_circle);
    card.appendContent(large.asElement());
    Row row2 = Row.create();
    HTMLElement adjustIconCRL = IconButton.create(Icons.ALL.adjust()).circle(CircleSize.LARGE).setButtonType(StyleType.DEFAULT).asElement();
    HTMLElement alloutIconCRL = IconButton.createPrimary(Icons.ALL.all_out()).circle(CircleSize.LARGE).setButtonType(StyleType.PRIMARY).asElement();
    HTMLElement appsIconCRL = IconButton.createInfo(Icons.ALL.apps()).circle(CircleSize.LARGE).setButtonType(StyleType.INFO).asElement();
    HTMLElement artTrackIconCRL = IconButton.createSuccess(Icons.ALL.art_track()).circle(CircleSize.LARGE).setButtonType(StyleType.SUCCESS).asElement();
    HTMLElement assessmentIconCRL = IconButton.createWarning(Icons.ALL.assessment()).circle(CircleSize.LARGE).setButtonType(StyleType.WARNING).asElement();
    HTMLElement assistantIconCRL = IconButton.createDanger(Icons.ALL.assistant()).circle(CircleSize.LARGE).setButtonType(StyleType.DANGER).asElement();
    adjustIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    alloutIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    appsIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    artTrackIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    assessmentIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    assistantIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
    row2.asElement().appendChild(adjustIconCRL);
    row2.asElement().appendChild(alloutIconCRL);
    row2.asElement().appendChild(appsIconCRL);
    row2.asElement().appendChild(artTrackIconCRL);
    row2.asElement().appendChild(assessmentIconCRL);
    row2.asElement().appendChild(assistantIconCRL);
    card.appendContent(row2.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initIconButtons()).asElement());
}

Example 10 with HTMLElement

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

the class ButtonsViewImpl method initNestingGroup.

private void initNestingGroup() {
    Card card = Card.create("SIZING", "Dropdown can be used inside a group of buttons.");
    HTMLElement defaultGroup = numbersNestedGroup(StyleType.DEFAULT);
    defaultGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement primaryGroup = numbersNestedGroup(StyleType.PRIMARY);
    primaryGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement infoGroup = numbersNestedGroup(StyleType.INFO);
    infoGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement successGroup = numbersNestedGroup(StyleType.SUCCESS);
    successGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    successGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement dangerGroup = numbersNestedGroup(StyleType.DANGER);
    dangerGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement warningGroup = numbersNestedGroup(StyleType.WARNING);
    warningGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    warningGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultGroup);
    card.appendContent(primaryGroup);
    card.appendContent(infoGroup);
    card.appendContent(successGroup);
    card.appendContent(dangerGroup);
    card.appendContent(warningGroup);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initNestingGroup()).asElement());
}