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

Example 16 with Row

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

the class ModalsViewImpl method initModalsSize.

private void initModalsSize() {
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    // ------------ Default size -------------
    ModalDialog defaultSizeModal = createModalDialog();
    Button defaultSizeButton = Button.createDefault("MODAL - DEFAULT SIZE");
    defaultSizeButton.getClickableElement().addEventListener("click", e -> openDialog(defaultSizeModal));
    element.appendChild(defaultSizeModal.asElement());
    row.addColumn(column.addElement(defaultSizeButton.asElement()));
    // ------------ Large size -------------
    ModalDialog largeSizeModal = createModalDialog().large();
    Button largeSizeButton = Button.createDefault("MODAL - LARGE SIZE");
    largeSizeButton.getClickableElement().addEventListener("click", e -> openDialog(largeSizeModal));
    element.appendChild(largeSizeModal.asElement());
    row.addColumn(column.copy().addElement(largeSizeButton.asElement()));
    // ------------ Small size -------------
    ModalDialog smallSizeModal = createModalDialog().small();
    Button smallSizeButton = Button.createDefault("MODAL - LARGE SIZE");
    smallSizeButton.getClickableElement().addEventListener("click", e -> openDialog(smallSizeModal));
    element.appendChild(smallSizeModal.asElement());
    row.addColumn(column.copy().addElement(smallSizeButton.asElement()));
    element.appendChild(Card.create("MODAL SIZE EXAMPLE", "Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.").appendContent(row.asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initModalsSize()).asElement());
}

Example 17 with Row

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

the class HelpersViewImpl method textStyles.

private void textStyles() {
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.two).onMedium(Column.OnMedium.two).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Card.create("TEXT STYLES", "Use ready classes to style your paragraphs.").appendContent(row.addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Normal").asElement()).asElement()).addElement(Paragraph.create("Default text").asElement()).addElement(Paragraph.create("Text pink color").setColor(Color.PINK).asElement()).addElement(Paragraph.create("Text cyan color").setColor(Color.CYAN).asElement()).addElement(Paragraph.create("Text teal color").setColor(Color.TEAL).asElement()).addElement(Paragraph.create("Text orange color").setColor(Color.ORANGE).asElement()).addElement(Paragraph.create("Text blue grey color").setColor(Color.BLUE_GREY).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Bold").asElement()).asElement()).addElement(Paragraph.create("Default text").bold().asElement()).addElement(Paragraph.create("Text pink color").bold().setColor(Color.PINK).asElement()).addElement(Paragraph.create("Text cyan color").bold().setColor(Color.CYAN).asElement()).addElement(Paragraph.create("Text teal color").bold().setColor(Color.TEAL).asElement()).addElement(Paragraph.create("Text orange color").bold().setColor(Color.ORANGE).asElement()).addElement(Paragraph.create("Text blue grey color").bold().setColor(Color.BLUE_GREY).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Italic").asElement()).asElement()).addElement(Paragraph.create("Default text").italic().asElement()).addElement(Paragraph.create("Text pink color").italic().setColor(Color.PINK).asElement()).addElement(Paragraph.create("Text cyan color").italic().setColor(Color.CYAN).asElement()).addElement(Paragraph.create("Text teal color").italic().setColor(Color.TEAL).asElement()).addElement(Paragraph.create("Text orange color").italic().setColor(Color.ORANGE).asElement()).addElement(Paragraph.create("Text blue grey color").italic().setColor(Color.BLUE_GREY).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Underline").asElement()).asElement()).addElement(Paragraph.create("Default text").underLine().asElement()).addElement(Paragraph.create("Text pink color").underLine().setColor(Color.PINK).asElement()).addElement(Paragraph.create("Text cyan color").underLine().setColor(Color.CYAN).asElement()).addElement(Paragraph.create("Text teal color").underLine().setColor(Color.TEAL).asElement()).addElement(Paragraph.create("Text orange color").underLine().setColor(Color.ORANGE).asElement()).addElement(Paragraph.create("Text blue grey color").underLine().setColor(Color.BLUE_GREY).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Line through").asElement()).asElement()).addElement(Paragraph.create("Default text").lineThrough().asElement()).addElement(Paragraph.create("Text pink color").lineThrough().setColor(Color.PINK).asElement()).addElement(Paragraph.create("Text cyan color").lineThrough().setColor(Color.CYAN).asElement()).addElement(Paragraph.create("Text teal color").lineThrough().setColor(Color.TEAL).asElement()).addElement(Paragraph.create("Text orange color").lineThrough().setColor(Color.ORANGE).asElement()).addElement(Paragraph.create("Text blue grey color").lineThrough().setColor(Color.BLUE_GREY).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Over line").asElement()).asElement()).addElement(Paragraph.create("Default text").overLine().asElement()).addElement(Paragraph.create("Text pink color").overLine().setColor(Color.PINK).asElement()).addElement(Paragraph.create("Text cyan color").overLine().setColor(Color.CYAN).asElement()).addElement(Paragraph.create("Text teal color").overLine().setColor(Color.TEAL).asElement()).addElement(Paragraph.create("Text orange color").overLine().setColor(Color.ORANGE).asElement()).addElement(Paragraph.create("Text blue grey color").overLine().setColor(Color.BLUE_GREY).asElement())).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.textStyles()).asElement());
}

Example 18 with Row

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

the class IconsViewImpl method makeRow.

private Row makeRow() {
    Row row = Row.create();
    row.asElement().classList.add("demo-icon-container");
    return row;
}

Example 19 with Row

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

the class BreadcrumbViewImpl method breadcrumbWithBackground.

private void breadcrumbWithBackground() {
    Row row = Row.create();
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("WITH MATERIAL DESIGN COLORS", "You can use material design colors").appendContent(Breadcrumb.create().setBackground(Background.PINK).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setBackground(Background.CYAN).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setBackground(Background.TEAL).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).addItem(" File ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setBackground(Background.ORANGE).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).addItem(" File ", evt -> {
    }).addItem(" Extensions ", evt -> {
    }).asElement()).asElement())).asElement());
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("WITH ICONS & MATERIAL DESIGN COLORS").appendContent(Breadcrumb.create().setBackground(Background.PINK).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setBackground(Background.CYAN).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setBackground(Background.TEAL).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).addItem(Icons.ALL.attachment(), " File ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setBackground(Background.ORANGE).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).addItem(Icons.ALL.attachment(), " File ", evt -> {
    }).addItem(Icons.ALL.extension(), " Extensions ", evt -> {
    }).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.breadcrumbWithBackground()).asElement());
}

Example 20 with Row

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

the class BreadcrumbViewImpl method coloredBreadcrumb.

private void coloredBreadcrumb() {
    Row row = Row.create();
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("WITH MATERIAL DESIGN COLORS", "You can use material design colors").appendContent(Breadcrumb.create().setColor(Color.PINK).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setColor(Color.CYAN).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setColor(Color.TEAL).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).addItem(" File ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setColor(Color.ORANGE).addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).addItem(" File ", evt -> {
    }).addItem(" Extensions ", evt -> {
    }).asElement()).asElement())).asElement());
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("WITH ICONS & MATERIAL DESIGN COLORS").appendContent(Breadcrumb.create().setColor(Color.PINK).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setColor(Color.CYAN).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setColor(Color.TEAL).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).addItem(Icons.ALL.attachment(), " File ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().setColor(Color.ORANGE).addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).addItem(Icons.ALL.attachment(), " File ", evt -> {
    }).addItem(Icons.ALL.extension(), " Extensions ", evt -> {
    }).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.coloredBreadcrumb()).asElement());
}