Examples with Column org.dominokit.domino.ui.column.Column used on opensource projects

Example 6 with Column

use of org.dominokit.domino.ui.column.Column in project domino-ui-demo by DominoKit.

the class BasicFormsViewImpl method initSelectExample.

private void initSelectExample() {
    Column column = Column.create().onSmall(Column.OnSmall.six);
    selectCard.appendContent(Row.create().addColumn(column.addElement(DropDown.create().addOption(DropDownOption.create("-- please select --")).addOption(DropDownOption.create("10")).addOption(DropDownOption.create("20")).addOption(DropDownOption.create("30")).addOption(DropDownOption.create("40")).addOption(DropDownOption.create("50")).selectAt(0).setSelectionHandler(option -> {
        Notification.create("Item selected [ " + option.getValue() + " ]").show();
    }).asElement())).addColumn(column.copy().addElement(DropDown.create().addOption(DropDownOption.create("Disabled")).selectAt(0).disable().asElement())).asElement());
    selectCard.appendContent(BlockHeader.create("Drop up example").asElement());
    selectCard.appendContent(Row.create().addColumn(column.copy().addElement(DropDown.create().addOption(DropDownOption.create("-- please select --")).addOption(DropDownOption.create("10")).addOption(DropDownOption.create("20")).addOption(DropDownOption.create("30")).addOption(DropDownOption.create("40")).addOption(DropDownOption.create("50")).selectAt(0).dropup().setSelectionHandler(option -> {
        Notification.create("Item selected [ " + option.getValue() + " ]").show();
    }).asElement())).asElement());
}

Example 7 with Column

use of org.dominokit.domino.ui.column.Column 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());
}

Example 8 with Column

use of org.dominokit.domino.ui.column.Column 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 9 with Column

use of org.dominokit.domino.ui.column.Column 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 10 with Column

use of org.dominokit.domino.ui.column.Column 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());
}