Examples with Row org.dominokit.domino.ui.row.Row used on opensource projects

Example 1 with Row

use of org.dominokit.domino.ui.row.Row in project domino-ui-demo by DominoKit.

the class LoadersViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("Loaders", "Use loaders to mask an element until some action is completed.").asElement());
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    Row row = Row.create();
    element.appendChild(row.asElement());
    row.addColumn(column.addElement(createCard(LoaderEffect.BOUNCE, "Loading ... ", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    row.addColumn(column.copy().addElement(createCard(LoaderEffect.FACEBOOK, "Loading ... ", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    row.addColumn(column.copy().addElement(createCard(LoaderEffect.IOS, "Loading ... ", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    Row secondRow = Row.create();
    element.appendChild(secondRow.asElement());
    secondRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ROTATE_PLANE, "Waiting ... ", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    secondRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ROTATION, "Waiting ... ", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    secondRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ROUND_BOUNCE, "Waiting ... ", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    Row thirdRow = Row.create();
    element.appendChild(thirdRow.asElement());
    thirdRow.addColumn(column.copy().addElement(createCard(LoaderEffect.TIMER, " ... ", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    thirdRow.addColumn(column.copy().addElement(createCard(LoaderEffect.WIN8, " ... ", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    thirdRow.addColumn(column.copy().addElement(createCard(LoaderEffect.WIN8_LINEAR, " ... ", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    Row fourthRow = Row.create();
    element.appendChild(fourthRow.asElement());
    fourthRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ORBIT, "", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    fourthRow.addColumn(column.copy().addElement(createCard(LoaderEffect.STRETCH, "", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    fourthRow.addColumn(column.copy().addElement(createCard(LoaderEffect.NONE, "", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.loadersSample()).asElement());
}

Example 2 with Row

use of org.dominokit.domino.ui.row.Row in project domino-ui-demo by DominoKit.

the class LabelsViewImpl method initLabels.

private void initLabels() {
    Card labels = Card.create("LABELS");
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.one).onMedium(Column.OnMedium.two).onSmall(Column.OnSmall.six).onXSmall(Column.OnXSmall.twelve);
    HTMLElement defaultLabel = Label.createDefault("DEFAULT").asElement();
    HTMLElement primaryLabel = Label.createPrimary("PRIMARY").asElement();
    HTMLElement successLabel = Label.createSuccess("SUCCESS").asElement();
    HTMLElement infoLabel = Label.createInfo("INFO").asElement();
    HTMLElement warningLabel = Label.createWarning("WARNING").asElement();
    HTMLElement dangerLabel = Label.createDanger("DANGER").asElement();
    defaultLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    primaryLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    successLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    infoLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    warningLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    dangerLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    row.addColumn(column.addElement(defaultLabel)).addColumn(column.copy().addElement(primaryLabel)).addColumn(column.copy().addElement(successLabel)).addColumn(column.copy().addElement(infoLabel)).addColumn(column.copy().addElement(warningLabel)).addColumn(column.copy().addElement(dangerLabel));
    labels.appendContent(row.asElement());
    labels.appendContent(Elements.hr().asElement());
    HTMLHeadingElement h1 = Elements.h(1).textContent("Example heading ").asElement();
    HTMLHeadingElement h2 = Elements.h(2).textContent("Example heading ").asElement();
    HTMLHeadingElement h3 = Elements.h(3).textContent("Example heading ").asElement();
    HTMLHeadingElement h4 = Elements.h(4).textContent("Example heading ").asElement();
    HTMLHeadingElement h5 = Elements.h(5).textContent("Example heading ").asElement();
    HTMLHeadingElement h6 = Elements.h(6).textContent("Example heading ").asElement();
    h1.style.textAlign = "left";
    h1.appendChild(Label.createDanger("New").asElement());
    h2.appendChild(Label.createWarning("New").asElement());
    h3.appendChild(Label.createInfo("New").asElement());
    h4.appendChild(Label.createSuccess("New").asElement());
    h5.appendChild(Label.createPrimary("New").asElement());
    h6.appendChild(Label.createDefault("New").asElement());
    labels.appendContent(h1).appendContent(h2).appendContent(h3).appendContent(h4).appendContent(h5).appendContent(h6);
    this.element.appendChild(labels.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initLabels()).asElement());
}

Example 3 with Row

use of org.dominokit.domino.ui.row.Row in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initButtonsToolbar.

private void initButtonsToolbar() {
    Card card = Card.create("BUTTON TOOLBAR", "Create buttons toolbar");
    Row row = Row.create();
    ButtonsGroup firstDefaultGroup = ButtonsGroup.create().addButton(Button.createDefault("1")).addButton(Button.createDefault("2")).addButton(Button.createDefault("3"));
    ButtonsGroup secondDefaultGroup = ButtonsGroup.create().addButton(Button.createDefault("4")).addButton(Button.createDefault("5")).addButton(Button.createDefault("6"));
    ButtonsGroup thirdDefaultGroup = ButtonsGroup.create().addButton(Button.createDefault("7"));
    ButtonsToolbar defaultButtonsToolbar = ButtonsToolbar.create().addGroup(firstDefaultGroup).addGroup(secondDefaultGroup).addGroup(thirdDefaultGroup);
    defaultButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    row.asElement().appendChild(defaultButtonsToolbar.asElement());
    ButtonsGroup firstPrimaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("1")).addButton(Button.createPrimary("2")).addButton(Button.createPrimary("3"));
    ButtonsGroup secondPrimaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("4")).addButton(Button.createPrimary("5")).addButton(Button.createPrimary("6"));
    ButtonsGroup thirdPrimaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("7"));
    ButtonsToolbar primaryButtonsToolbar = ButtonsToolbar.create().addGroup(firstPrimaryGroup).addGroup(secondPrimaryGroup).addGroup(thirdPrimaryGroup);
    primaryButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    row.asElement().appendChild(primaryButtonsToolbar.asElement());
    ButtonsGroup firstInfoGroup = ButtonsGroup.create().addButton(Button.createInfo("1")).addButton(Button.createInfo("2")).addButton(Button.createInfo("3"));
    ButtonsGroup secondInfoGroup = ButtonsGroup.create().addButton(Button.createInfo("4")).addButton(Button.createInfo("5")).addButton(Button.createInfo("6"));
    ButtonsGroup thirdInfoGroup = ButtonsGroup.create().addButton(Button.createInfo("7"));
    ButtonsToolbar infoButtonsToolbar = ButtonsToolbar.create().addGroup(firstInfoGroup).addGroup(secondInfoGroup).addGroup(thirdInfoGroup);
    infoButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    row.asElement().appendChild(infoButtonsToolbar.asElement());
    ButtonsGroup firstColorGroup = ButtonsGroup.create().addButton(Button.create("1").setBackground(Background.PURPLE)).addButton(Button.create("2").setBackground(Background.PURPLE)).addButton(Button.create("3").setBackground(Background.PURPLE));
    ButtonsGroup secondColorGroup = ButtonsGroup.create().addButton(Button.create("4").setBackground(Background.PURPLE)).addButton(Button.create("5").setBackground(Background.PURPLE)).addButton(Button.create("6").setBackground(Background.PURPLE));
    ButtonsGroup thirdColorGroup = ButtonsGroup.create().addButton(Button.create("7").setBackground(Background.PURPLE));
    ButtonsToolbar colorButtonsToolbar = ButtonsToolbar.create().addGroup(firstColorGroup).addGroup(secondColorGroup).addGroup(thirdColorGroup);
    colorButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    row.asElement().appendChild(colorButtonsToolbar.asElement());
    infoButtonsToolbar.asElement().style.cssFloat = "left";
    defaultButtonsToolbar.asElement().style.cssFloat = "left";
    primaryButtonsToolbar.asElement().style.cssFloat = "left";
    colorButtonsToolbar.asElement().style.cssFloat = "left";
    card.appendContent(row.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initButtonsToolbar()).asElement());
}

Example 4 with Row

use of org.dominokit.domino.ui.row.Row 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 5 with Row

use of org.dominokit.domino.ui.row.Row in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initButtonSizes.

private void initButtonSizes() {
    Card card = Card.create("BUTTON SIZES", "You can resize the buttons");
    Column column = Column.create().onLarge(Column.OnLarge.three).onSmall(Column.OnSmall.six).onXSmall(Column.OnXSmall.twelve);
    // -----------------------------------------------
    Button defaultLarge = Button.createDefault("LARGE").setSize(ButtonSize.LARGE);
    Button defaultBtn = Button.createDefault("DEFAULT");
    Button defaultSmall = Button.createDefault("SMALL").setSize(ButtonSize.SMALL);
    Button defaultXsmall = Button.createDefault("XSMALL").setSize(ButtonSize.XSMALL);
    defaultLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultSmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    defaultBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    defaultSmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    defaultXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    column.addElement(Row.create().appendContent(defaultLarge.asElement()).asElement()).addElement(Row.create().appendContent(defaultBtn.asElement()).asElement()).addElement(Row.create().appendContent(defaultSmall.asElement()).asElement()).addElement(Row.create().appendContent(defaultXsmall.asElement()).asElement());
    card.appendContent(column.asElement());
    // -----------------------------------------------
    Column column2 = column.copy();
    Button primaryLarge = Button.createPrimary("LARGE").setSize(ButtonSize.LARGE);
    Button primaryBtn = Button.createPrimary("DEFAULT");
    Button primarySmall = Button.createPrimary("SMALL").setSize(ButtonSize.SMALL);
    Button primaryXsmall = Button.createPrimary("XSMALL").setSize(ButtonSize.XSMALL);
    primaryLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    primarySmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    primaryBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    primarySmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    primaryXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    column2.addElement(Row.create().appendContent(primaryLarge.asElement()).asElement()).addElement(Row.create().appendContent(primaryBtn.asElement()).asElement()).addElement(Row.create().appendContent(primarySmall.asElement()).asElement()).addElement(Row.create().appendContent(primaryXsmall.asElement()).asElement());
    card.appendContent(column2.asElement());
    // -----------------------------------------------
    Column column3 = column.copy();
    Button warningLarge = Button.createWarning("LARGE").setSize(ButtonSize.LARGE);
    Button warningBtn = Button.createWarning("DEFAULT");
    Button warningSmall = Button.createWarning("SMALL").setSize(ButtonSize.SMALL);
    Button warningXsmall = Button.createWarning("XSMALL").setSize(ButtonSize.XSMALL);
    warningLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    warningBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    warningSmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    warningXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    warningLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    warningBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    warningSmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    warningXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    column3.addElement(Row.create().appendContent(warningLarge.asElement()).asElement()).addElement(Row.create().appendContent(warningBtn.asElement()).asElement()).addElement(Row.create().appendContent(warningSmall.asElement()).asElement()).addElement(Row.create().appendContent(warningXsmall.asElement()).asElement());
    card.appendContent(column3.asElement());
    // -----------------------------------------------
    Column column4 = column.copy();
    Button infoLarge = Button.createInfo("LARGE").setSize(ButtonSize.LARGE);
    Button infoBtn = Button.createInfo("DEFAULT");
    Button infoSmall = Button.createInfo("SMALL").setSize(ButtonSize.SMALL);
    Button infoXsmall = Button.createInfo("XSMALL").setSize(ButtonSize.XSMALL);
    infoLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    infoBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    infoSmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    infoXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    infoLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    infoBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    infoSmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    infoXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
    column4.addElement(Row.create().appendContent(infoLarge.asElement()).asElement()).addElement(Row.create().appendContent(infoBtn.asElement()).asElement()).addElement(Row.create().appendContent(infoSmall.asElement()).asElement()).addElement(Row.create().appendContent(infoXsmall.asElement()).asElement());
    card.appendContent(column4.asElement());
    // -----------------------------------------------
    Row row = Row.create().addColumn(column).addColumn(column2).addColumn(column3).addColumn(column4);
    row.asElement().style.margin = CSSProperties.MarginUnionType.of("10px");
    card.appendContent(row.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initButtonSizes()).asElement());
}