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

Example 6 with Row

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

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

the class CollapseViewImpl method multiOpenItems.

private void multiOpenItems() {
    Row row = Row.create();
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("MULTIPLE ITEMS TO BE OPEN").setCollapsible().appendContent(Accordion.create().multiOpen().fullBody().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.perm_contact_calendar()).setColor(Color.PINK).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.cloud_download()).setColor(Color.CYAN)).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.contact_phone()).setColor(Color.TEAL).expand()).addPanel(AccordionPanel.create("Collapsible item 4", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.folder_shared()).setColor(Color.ORANGE)).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.multiOpenItems()).asElement());
}

Example 8 with Row

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

the class CollapseViewImpl method accordionSample.

private void accordionSample() {
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.six).onMedium(Column.OnMedium.six).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("BASIC EXAMPLES", "Extend the default collapse behavior to create an accordion with the panel component.").setCollapsible().appendContent(Elements.b().textContent("Panel Primary").asElement()).appendContent(Accordion.create().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).asElement()).appendContent(Elements.b().textContent("Panel Success").asElement()).appendContent(Accordion.create().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).success().asElement()).appendContent(Elements.b().textContent("Panel Warning").asElement()).appendContent(Accordion.create().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).warning().asElement()).appendContent(Elements.b().textContent("Panel Danger").asElement()).appendContent(Accordion.create().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).danger().asElement()).asElement())).addColumn(column.copy().addElement(Card.create("FULL BODY EXAMPLES", "If you want to also colorful body, you need to use fullBody method.").setCollapsible().appendContent(Elements.b().textContent("Panel Primary").asElement()).appendContent(Accordion.create().fullBody().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).asElement()).appendContent(Elements.b().textContent("Panel Success").asElement()).appendContent(Accordion.create().fullBody().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).success().asElement()).appendContent(Elements.b().textContent("Panel Warning").asElement()).appendContent(Accordion.create().fullBody().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).warning().asElement()).appendContent(Elements.b().textContent("Panel Danger").asElement()).appendContent(Accordion.create().fullBody().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT))).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT))).danger().asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.accordionSample()).asElement());
}

Example 9 with Row

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

the class CollapseViewImpl method colorFullWithIcons.

private void colorFullWithIcons() {
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.six).onMedium(Column.OnMedium.six).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("COLORFUL PANEL ITEMS WITH ICON").setCollapsible().appendContent(Elements.b().textContent("Panel Primary").asElement()).appendContent(Accordion.create().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.perm_contact_calendar()).setColor(Color.PINK).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.cloud_download()).setColor(Color.CYAN)).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.contact_phone()).setColor(Color.TEAL)).addPanel(AccordionPanel.create("Collapsible item 4", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.folder_shared()).setColor(Color.ORANGE)).asElement()).asElement())).addColumn(column.copy().addElement(Card.create("FULL BODY COLORFUL PANEL ITEMS WITH ICON").setCollapsible().appendContent(Elements.b().textContent("Panel Primary").asElement()).appendContent(Accordion.create().fullBody().addPanel(AccordionPanel.create("Collapsible item 1", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.perm_contact_calendar()).setColor(Color.PINK).expand()).addPanel(AccordionPanel.create("Collapsible item 2", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.cloud_download()).setColor(Color.CYAN)).addPanel(AccordionPanel.create("Collapsible item 3", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.contact_phone()).setColor(Color.TEAL)).addPanel(AccordionPanel.create("Collapsible item 4", new Text(SAMPLE_CONTENT)).setIcon(Icons.ALL.folder_shared()).setColor(Color.ORANGE)).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.colorFullWithIcons()).asElement());
}

Example 10 with Row

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

the class BreadcrumbViewImpl method basicBreadcrumb.

private void basicBreadcrumb() {
    Row row = Row.create();
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("BASIC EXAMPLES", "Separators are automatically added for breadcrumb elements").appendContent(Breadcrumb.create().addItem(" Home ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().addItem(" Home ", evt -> {
    }).addItem(" Library ", evt -> {
    }).addItem(" Data ", evt -> {
    }).asElement()).asElement())).asElement());
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("WITH ICONS").appendContent(Breadcrumb.create().addItem(Icons.ALL.home(), " Home ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).asElement()).appendContent(Breadcrumb.create().addItem(Icons.ALL.home(), " Home ", evt -> {
    }).addItem(Icons.ALL.library_books(), " Library ", evt -> {
    }).addItem(Icons.ALL.archive(), " Data ", evt -> {
    }).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.basicBreadcrumb()).asElement());
}