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

Example 11 with HTMLElement

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

the class ButtonsViewImpl method initBootstrapButtons.

private void initBootstrapButtons() {
    Card card = Card.create("BOOTSTRAP DEFAULT BUTTONS", "Use any of the available button classes to quickly create a styled button");
    HTMLElement defaultBtn = Button.createDefault("DEFAULT").asElement();
    HTMLElement primaryBtn = Button.createPrimary("PRIMARY").asElement();
    HTMLElement successBtn = Button.createSuccess("SUCCESS").asElement();
    HTMLElement infoBtn = Button.createInfo("INFO").asElement();
    HTMLElement warningBtn = Button.createWarning("WARNING").asElement();
    HTMLElement dangerBtn = Button.createDanger("DANGER").asElement();
    defaultBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultBtn);
    primaryBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(primaryBtn);
    successBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    successBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(successBtn);
    infoBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(infoBtn);
    warningBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    warningBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(warningBtn);
    dangerBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(dangerBtn);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initBootstrapButtons()).asElement());
}

Example 12 with HTMLElement

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

the class ButtonsViewImpl method initButtonsBasicGroup.

private void initButtonsBasicGroup() {
    Card card = Card.create("BASIC EXAMPLE", "Create group of buttons");
    HTMLElement defaultGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).asElement();
    defaultGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultGroup);
    HTMLElement primaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("LEFT")).addButton(Button.createPrimary("MIDDLE")).addButton(Button.createPrimary("RIGHT")).asElement();
    primaryGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(primaryGroup);
    HTMLElement successGroup = ButtonsGroup.create().addButton(Button.createSuccess("LEFT")).addButton(Button.createSuccess("MIDDLE")).addButton(Button.createSuccess("RIGHT")).asElement();
    successGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    successGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(successGroup);
    HTMLElement infoGroup = ButtonsGroup.create().addButton(Button.createInfo("LEFT")).addButton(Button.createInfo("MIDDLE")).addButton(Button.createInfo("RIGHT")).asElement();
    infoGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(infoGroup);
    HTMLElement dangerGroup = ButtonsGroup.create().addButton(Button.createDanger("LEFT")).addButton(Button.createDanger("MIDDLE")).addButton(Button.createDanger("RIGHT")).asElement();
    dangerGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(dangerGroup);
    HTMLElement purpleGroup = ButtonsGroup.create().addButton(Button.create("LEFT").setBackground(Background.PURPLE)).addButton(Button.create("MIDDLE").setBackground(Background.PURPLE)).addButton(Button.create("RIGHT").setBackground(Background.PURPLE)).asElement();
    purpleGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    purpleGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(purpleGroup);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initButtonsBasicGroup()).asElement());
}

Example 13 with HTMLElement

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

the class ButtonsViewImpl method initSizingGroup.

private void initSizingGroup() {
    Card card = Card.create("SIZING", "Instead of applying button sizing classes to every button in a group, size can be applied to the group and will be applied to every button.");
    Row row = Row.create();
    Column column1 = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.nine).onXSmall(Column.OnXSmall.twelve);
    HTMLElement largeGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).setSize(ButtonSize.LARGE).asElement();
    largeGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column1.asElement().appendChild(heading("Large Button Group"));
    column1.asElement().appendChild(largeGroup);
    Column column2 = column1.copy();
    HTMLElement defaultGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).asElement();
    defaultGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column2.asElement().appendChild(heading("Default Button Group"));
    column2.asElement().appendChild(defaultGroup);
    Column column3 = column1.copy();
    HTMLElement smallGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).setSize(ButtonSize.SMALL).asElement();
    smallGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column3.asElement().appendChild(heading("Small Button Group"));
    column3.asElement().appendChild(smallGroup);
    Column column4 = column1.copy();
    HTMLElement xsmallGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).setSize(ButtonSize.XSMALL).asElement();
    xsmallGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column4.asElement().appendChild(heading("Extra-Small Button Group"));
    column4.asElement().appendChild(xsmallGroup);
    column1.asElement().classList.add("align-center");
    column2.asElement().classList.add("align-center");
    column3.asElement().classList.add("align-center");
    column4.asElement().classList.add("align-center");
    row.addColumn(column1).addColumn(column2).addColumn(column3).addColumn(column4);
    card.appendContent(row.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initSizingGroup()).asElement());
}

Example 14 with HTMLElement

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

the class ButtonsViewImpl method initDropUp.

private void initDropUp() {
    Card card = Card.create("DROPUP VARIATION", "Trigger dropdown menus above elements.");
    HTMLElement element = DropdownButton.createDefault("DEFAULT").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    HTMLElement primary = DropdownButton.createPrimary("PRIMARY").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    HTMLElement success = DropdownButton.createSuccess("SUCCESS").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    HTMLElement info = DropdownButton.createInfo("INFO").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    DropdownButton danger = DropdownButton.createDanger("Dropdown").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup();
    HTMLElement group = ButtonsGroup.create().addButton(Button.createDanger("DANGER")).addDropDown(danger).asElement();
    element.style.margin = CSSProperties.MarginUnionType.of("5px");
    primary.style.margin = CSSProperties.MarginUnionType.of("5px");
    success.style.margin = CSSProperties.MarginUnionType.of("5px");
    info.style.margin = CSSProperties.MarginUnionType.of("5px");
    group.style.margin = CSSProperties.MarginUnionType.of("5px");
    card.appendContent(element);
    card.appendContent(primary);
    card.appendContent(success);
    card.appendContent(info);
    card.appendContent(group);
    this.element.appendChild(card.asElement());
    this.element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initDropUp()).asElement());
}

Example 15 with HTMLElement

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

the class ButtonsViewImpl method initMaterialDesignButtons.

private void initMaterialDesignButtons() {
    Card card = Card.create("METARIAL DESIGN BUTTONS", "Use any of the available button classes to quickly create a styled button");
    HTMLElement redBtn = Button.create("RED").setBackground(Background.RED).asElement();
    redBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    redBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(redBtn);
    HTMLElement purpleBtn = Button.create("PURPLE").setBackground(Background.PURPLE).asElement();
    purpleBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    purpleBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(purpleBtn);
    HTMLElement indigoBtn = Button.create("INDIGO").setBackground(Background.INDIGO).asElement();
    indigoBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    indigoBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(indigoBtn);
    HTMLElement lightBlueBtn = Button.create("LIGHT BLUE").setBackground(Background.LIGHT_BLUE).asElement();
    lightBlueBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    lightBlueBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(lightBlueBtn);
    HTMLElement greenBtn = Button.create("GREEN").setBackground(Background.GREEN).asElement();
    greenBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    greenBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(greenBtn);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initMaterialDesignButtons()).asElement());
}