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

Example 16 with Column

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

the class BasicFormsViewImpl method initCheckboxExample.

private void initCheckboxExample() {
    Column column = Column.create().onLarge(Column.OnLarge.two).onSmall(Column.OnSmall.six);
    checkboxCard.appendContent(Elements.h(5).textContent("Basic Examples").asElement());
    checkboxCard.appendContent(Row.create().addColumn(column.addElement(CheckBox.create("default_checkbox", "Default").asElement())).addColumn(column.copy().addElement(CheckBox.create("filled_in_checkbox", "Filled In").filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("disbaled_checkbox", "Default - Disabled").check().disable().asElement())).addColumn(column.copy().addElement(CheckBox.create("filled_in_disbaled_checkbox", "Filled In - Disabled").check().filledIn().disable().asElement())).asElement());
    checkboxCard.appendContent(Elements.h(5).textContent("With Material Design Colors").asElement());
    checkboxCard.appendContent(Row.create().addColumn(column.copy().addElement(CheckBox.create("red_checkbox", "RED").setColor(Color.RED).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("pink_checkbox", "PINK").setColor(Color.PINK).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("DEEP_PURPLE_checkbox", "DEEP PURPLE").setColor(Color.DEEP_PURPLE).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("INDIGO_checkbox", "INDIGO").setColor(Color.INDIGO).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("BLUE_checkbox", "BLUE").setColor(Color.BLUE).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("CYAN_checkbox", "CYAN").setColor(Color.CYAN).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("TEAL_checkbox", "TEAL").setColor(Color.TEAL).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("GREEN_checkbox", "GREEN").setColor(Color.GREEN).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("LIME_checkbox", "LIME").setColor(Color.LIME).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("YELLOW_checkbox", "YELLOW").setColor(Color.YELLOW).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("AMBER_checkbox", "AMBER").setColor(Color.AMBER).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("ORANGE_checkbox", "ORANGE").setColor(Color.ORANGE).check().asElement())).addColumn(column.copy().addElement(CheckBox.create("GREY_checkbox", "GREY").setColor(Color.GREY).check().asElement())).asElement());
    checkboxCard.appendContent(Elements.h(5).textContent("With Material Design Colors - Filled In").asElement());
    checkboxCard.appendContent(Row.create().addColumn(column.copy().addElement(CheckBox.create("red_checkbox_filled_in", "RED").setColor(Color.RED).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("pink_checkbox_filled_in", "PINK").setColor(Color.PINK).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("DEEP_PURPLE_checkbox_filled_in", "DEEP PURPLE").setColor(Color.DEEP_PURPLE).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("INDIGO_checkbox_filled_in", "INDIGO").setColor(Color.INDIGO).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("BLUE_checkbox_filled_in", "BLUE").setColor(Color.BLUE).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("CYAN_checkbox_filled_in", "CYAN").setColor(Color.CYAN).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("TEAL_checkbox_filled_in", "TEAL").setColor(Color.TEAL).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("GREEN_checkbox_filled_in", "GREEN").setColor(Color.GREEN).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("LIME_checkbox_filled_in", "LIME").setColor(Color.LIME).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("YELLOW_checkbox_filled_in", "YELLOW").setColor(Color.YELLOW).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("AMBER_checkbox_filled_in", "AMBER").setColor(Color.AMBER).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("ORANGE_checkbox_filled_in", "ORANGE").setColor(Color.ORANGE).check().filledIn().asElement())).addColumn(column.copy().addElement(CheckBox.create("GREY_checkbox_filled_in", "GREY").setColor(Color.GREY).check().filledIn().asElement())).asElement());
}

Example 17 with Column

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

the class BadgesViewImpl method buttonExamplesWithMaterialDesignColors.

private void buttonExamplesWithMaterialDesignColors() {
    Column column = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.three).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    this.element.appendChild(Card.create("BUTTON EXAMPLES WITH MATERIAL DESIGN COLORS").appendContent(Row.create().addColumn(column.addElement(Button.create("GREEN").setBackground(Background.GREEN).large().block().appendContent(Badge.create("2").asElement()).asElement())).addColumn(column.copy().addElement(Button.create("BLUE").setBackground(Background.BLUE).large().block().appendContent(Badge.create("10+").asElement()).asElement())).addColumn(column.copy().addElement(Button.create("RED").setBackground(Background.RED).large().block().appendContent(Badge.create("13").asElement()).asElement())).addColumn(column.copy().addElement(Button.create("ORANGE").setBackground(Background.ORANGE).large().block().appendContent(Badge.create("5").asElement()).asElement())).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(Button.create("PINK").setBackground(Background.PINK).large().block().appendContent(Badge.create("14").asElement()).asElement())).addColumn(column.copy().addElement(Button.create("CYAN").setBackground(Background.CYAN).large().block().appendContent(Badge.create("99+").asElement()).asElement())).addColumn(column.copy().addElement(Button.create("TEAL").setBackground(Background.TEAL).large().block().appendContent(Badge.create("26").asElement()).asElement())).addColumn(column.copy().addElement(Button.create("PURPLE").setBackground(Background.PURPLE).large().block().appendContent(Badge.create("47").asElement()).asElement())).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.buttonExamplesWithMaterialDesignColors()).asElement());
}

Example 18 with Column

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

the class ColorsViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("COLORS").asElement());
    Column column = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.three).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Card.create("MATERIAL DESIGN COLORS", "Taken by Google's Material Design Color page which link is ").appendDescriptionContent(a().attr("href", "https://material.google.com/style/color.html#color-color-palette").textContent("material.google.com/style/color.html#color-color-palette").title("Google's Material Design Color").asElement()).appendContent(Row.create().addColumn(column.copy().addElement(makeColorBox(Color.RED, Background.RED))).addColumn(column.copy().addElement(makeColorBox(Color.PINK, Background.PINK))).addColumn(column.copy().addElement(makeColorBox(Color.PURPLE, Background.PURPLE))).addColumn(column.copy().addElement(makeColorBox(Color.DEEP_PURPLE, Background.DEEP_PURPLE))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(makeColorBox(Color.INDIGO, Background.INDIGO))).addColumn(column.copy().addElement(makeColorBox(Color.BLUE, Background.BLUE))).addColumn(column.copy().addElement(makeColorBox(Color.LIGHT_BLUE, Background.LIGHT_BLUE))).addColumn(column.copy().addElement(makeColorBox(Color.CYAN, Background.CYAN))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(makeColorBox(Color.TEAL, Background.TEAL))).addColumn(column.copy().addElement(makeColorBox(Color.GREEN, Background.GREEN))).addColumn(column.copy().addElement(makeColorBox(Color.LIGHT_GREEN, Background.LIGHT_GREEN))).addColumn(column.copy().addElement(makeColorBox(Color.LIME, Background.LIME))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(makeColorBox(Color.YELLOW, Background.YELLOW))).addColumn(column.copy().addElement(makeColorBox(Color.AMBER, Background.AMBER))).addColumn(column.copy().addElement(makeColorBox(Color.ORANGE, Background.ORANGE))).addColumn(column.copy().addElement(makeColorBox(Color.DEEP_ORANGE, Background.DEEP_ORANGE))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(makeColorBox(Color.BROWN, Background.BROWN))).addColumn(column.copy().addElement(makeColorBox(Color.GREY, Background.GREY))).addColumn(column.copy().addElement(makeColorBox(Color.BLUE_GREY, Background.BLUE_GREY))).addColumn(column.copy().addElement(makeColorBox(Color.BLACK, Background.BLACK))).asElement()).asElement());
}

Example 19 with Column

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

the class DialogsViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("DIALOGS").asElement());
    Column column = Column.create().onLarge(Column.OnLarge.six).onMedium(Column.OnMedium.six).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    MessageDialog basicMessage = MessageDialog.createMessage("Here's a message!", () -> Notification.create("Dialog closed").show());
    MessageDialog headerAndMessage = MessageDialog.createMessage("Message header", "Here's a message body!", () -> Notification.create("Dialog closed").show());
    MessageDialog successMessage = MessageDialog.createMessage("Success Operation", "Well done! You successfully read this important alert message.", () -> Notification.create("Dialog closed").show()).success();
    MessageDialog errorMessage = MessageDialog.createMessage("Failed operation", "Oh snap! Change a few things up and try submitting again.", () -> Notification.create("Dialog closed").show()).error();
    MessageDialog customColors = MessageDialog.createMessage("Failed operation", "Oh snap! Change a few things up and try submitting again.", () -> Notification.create("Dialog closed").show()).error().setModalColor(Color.RED).setIconColor(Color.WHITE);
    MessageDialog warningMessage = MessageDialog.createMessage("Warning", "Warning! Better check yourself, you're not looking too good.", () -> Notification.create("Dialog closed").show()).warning();
    HTMLElement heart = Icons.ALL.favorite().asElement();
    heart.classList.add(Styles.font_72, Styles.m_b_15, Color.RED.getStyle());
    MessageDialog customHeaderContent = MessageDialog.createMessage("Custom header", "You can customize the header content", () -> Notification.create("Dialog closed").show()).onOpen(() -> Animation.create(heart).duration(400).infinite().transition(Transition.PULSE).animate()).appendHeaderContent(heart);
    HTMLUListElement listGroup = SimpleListGroup.create().appendItem(SimpleListItem.create("Cras justo odio").appendContent(Badge.create("14 new").setBackground(Background.PINK).asElement())).appendItem(SimpleListItem.create("Dapibus ac facilisis in").appendContent(Badge.create("99 unread").setBackground(Background.CYAN).asElement())).appendItem(SimpleListItem.create("Morbi leo risus").appendContent(Badge.create("99+").setBackground(Background.TEAL).asElement())).appendItem(SimpleListItem.create("Porta ac consectetur ac").appendContent(Badge.create("21").setBackground(Background.ORANGE).asElement())).appendItem(SimpleListItem.create("Vestibulum at eros").appendContent(Badge.create("Pending").setBackground(Background.PURPLE).asElement())).asElement();
    listGroup.style.setProperty("text-align", "left");
    MessageDialog customContent = MessageDialog.createMessage("Custom content", "You can customize the dialog content", () -> Notification.create("Dialog closed").show()).appendContent(listGroup);
    this.element.appendChild(Card.create("EXAMPLES").appendContent(Row.create().addColumn(column.copy().addElement(basicMessage.asElement()).addElement(Paragraph.create("A basic message").asElement()).addElement(createDemoButton(basicMessage))).addColumn(column.copy().addElement(headerAndMessage.asElement()).addElement(Paragraph.create("Message with header").asElement()).addElement(createDemoButton(headerAndMessage))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(successMessage.asElement()).addElement(Paragraph.create("Success message").asElement()).addElement(createDemoButton(successMessage))).addColumn(column.copy().addElement(errorMessage.asElement()).addElement(Paragraph.create("Error message").asElement()).addElement(createDemoButton(errorMessage))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(warningMessage.asElement()).addElement(Paragraph.create("Warning message").asElement()).addElement(createDemoButton(warningMessage))).addColumn(column.copy().addElement(customColors.asElement()).addElement(Paragraph.create("Custom colors").asElement()).addElement(createDemoButton(customColors))).asElement()).appendContent(Row.create().addColumn(column.copy().addElement(customHeaderContent.asElement()).addElement(Paragraph.create("Custom header content").asElement()).addElement(createDemoButton(customHeaderContent))).addColumn(column.copy().addElement(customContent.asElement()).addElement(Paragraph.create("Custom content").asElement()).addElement(createDemoButton(customContent))).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.dialogs()).asElement());
}

Example 20 with Column

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

the class TypographyViewImpl 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("Under line").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());
}