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

Example 26 with Column

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

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

the class PaginationViewImpl method sizesSample.

private void sizesSample() {
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Card.create("ACTIVE PAGE", "You can mark the current active page.").appendContent(Row.create().addColumn(column.copy().addElement(b().textContent("Large").asElement()).addElement(Pagination.create(5).markActivePage().onPageChanged(pageNumber -> DomGlobal.console.info(pageNumber)).setActivePage(3).large().asElement())).addColumn(column.copy().addElement(b().textContent("Default").asElement()).addElement(Pagination.create(5).markActivePage().onPageChanged(pageNumber -> DomGlobal.console.info(pageNumber)).setActivePage(3).asElement())).addColumn(column.copy().addElement(b().textContent("Small").asElement()).addElement(Pagination.create(5).markActivePage().onPageChanged(pageNumber -> DomGlobal.console.info(pageNumber)).setActivePage(3).small().asElement())).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.sizesSample()).asElement());
}

Example 28 with Column

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

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

the class HelpersViewImpl method marginAndPaddingSpaces.

private void marginAndPaddingSpaces() {
    Column marginColumn = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    Column paddingColumn = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.three).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Card.create("MARGIN & PADDING SPACES", "Use ready classes to apply margins and padding to your elements.").appendContent(Paragraph.create().appendContent(b().textContent("Margins").asElement()).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("10").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-t-10").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-t-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-10").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-t--10").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("35").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l-35").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-35").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l--35").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("15").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-b-15").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-b-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-20").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l--20").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("30").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-r-30").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-r-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-30").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-r--30").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("ALL M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".margin-0").asElement())).asElement()).appendContent(Paragraph.create().appendContent(b().textContent("Paddings").asElement()).asElement()).appendContent(Row.create().addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("10").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-t-10").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-t-0").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("35").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-l-35").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-l-0").asElement())).asElement()).appendContent(Row.create().addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("15").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-b-15").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-b-0").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("30").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-r-30").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-r-0").asElement())).asElement()).appendContent(Row.create().addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("ALL P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".padding-0").asElement())).asElement()).asElement());
}

Example 30 with Column

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

the class HelpersViewImpl method fontSize.

private void fontSize() {
    Column column = Column.create().onLarge(Column.OnLarge.two).onMedium(Column.OnMedium.two).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Card.create("FONT SIZES", "Use ready classes to change text font size.").appendContent(Row.create().addColumn(column.copy().addElement(div().css(Styles.font_6).textContent("font-6").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_10).textContent("font-10").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_12).textContent("font-12").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_15).textContent("font-15").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_20).textContent("font-20").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_24).textContent("font-24").asElement())).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(div().css(Styles.font_32).textContent("font-32").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_40).textContent("font-40").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_42).textContent("font-42").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_45).textContent("font-45").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_48).textContent("font-48").asElement())).addColumn(column.copy().addElement(div().css(Styles.font_50).textContent("font-50").asElement())).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.fontSize()).asElement());
}