use of org.dominokit.domino.ui.column.Column in project domino-ui-demo by DominoKit.
the class HelpersViewImpl method textAligns.
private void textAligns() {
Column column = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.three).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
element.appendChild(Card.create("TEXT ALIGNS", "You can use ready classes to change text alignment.").appendContent(Row.create().addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Align left").asElement()).alignLeft().asElement()).addElement(div().css(Styles.align_left).textContent(SAMPLE_TEXT).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Align center").asElement()).alignCenter().asElement()).addElement(div().css(Styles.align_center).textContent(SAMPLE_TEXT).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Align right").asElement()).alignRight().asElement()).addElement(div().css(Styles.align_right).textContent(SAMPLE_TEXT).asElement())).addColumn(column.copy().addElement(Paragraph.create().appendContent(b().textContent("Align justify").asElement()).alignJustify().asElement()).addElement(div().css(Styles.align_justify).textContent(SAMPLE_TEXT).asElement())).asElement()).asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.textAligns()).asElement());
}
use of org.dominokit.domino.ui.column.Column in project domino-ui-demo by DominoKit.
the class InfoBoxViewImpl method basicInfoBoxes.
private void basicInfoBoxes() {
element.appendChild(BlockHeader.create("BASIC INFO BOX AND COUNTERS", "Simple info box without effects, and counters to update the value.").asElement());
Column column = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.three).onSmall(Column.OnSmall.six).onXSmall(Column.OnXSmall.twelve);
element.appendChild(Row.create().addColumn(column.addElement(InfoBox.create(Icons.ALL.shopping_cart(), "NEW ORDERS", "125").setIconBackground(Background.RED).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.face(), "NEW MEMBERS", "257").setIconBackground(Background.INDIGO).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.shopping_cart(), "BOOKMARKS", "117").setIconBackground(Background.PURPLE).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.favorite(), "LIKES", "1432").setIconBackground(Background.DEEP_PURPLE).asElement())).asElement());
InfoBox new_orders = InfoBox.create(Icons.ALL.shopping_cart(), "NEW ORDERS", "0");
InfoBox new_members = InfoBox.create(Icons.ALL.face(), "NEW MEMBERS", "0");
InfoBox bookmarks = InfoBox.create(Icons.ALL.shopping_cart(), "BOOKMARKS", "0");
InfoBox likes = InfoBox.create(Icons.ALL.favorite(), "LIKES", "0");
element.appendChild(Row.create().addColumn(column.copy().addElement(new_orders.setIconBackground(Background.RED).asElement())).addColumn(column.copy().addElement(new_members.setIconBackground(Background.INDIGO).asElement())).addColumn(column.copy().addElement(bookmarks.setIconBackground(Background.PURPLE).asElement())).addColumn(column.copy().addElement(likes.setIconBackground(Background.DEEP_PURPLE).asElement())).asElement());
counter = Counter.countFrom(0).countTo(125).every(40).incrementBy(5).onCount(count -> {
new_orders.getValueElement().textContent = Integer.toString(count);
new_members.getValueElement().textContent = Integer.toString(count);
bookmarks.getValueElement().textContent = Integer.toString(count);
likes.getValueElement().textContent = Integer.toString(count);
});
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.basicInfoBoxes()).asElement());
}
use of org.dominokit.domino.ui.column.Column in project domino-ui-demo by DominoKit.
the class CardsViewImpl method noHeaderCards.
private void noHeaderCards() {
element.appendChild(BlockHeader.create("NO HEADER CARDS", "You can also create cards without headers.").asElement());
Column column = Column.create().onLarge(OnLarge.four).onMedium(OnMedium.four).onSmall(OnSmall.twelve).onXSmall(OnXSmall.twelve);
element.appendChild(Row.create().addColumn(column.addElement(Card.create().setBackground(Background.GREEN).appendContent(new Text(SAMPLE_CONTENT)).asElement())).addColumn(column.copy().addElement(Card.create().setBackground(Background.LIGHT_BLUE).appendContent(new Text(SAMPLE_CONTENT)).asElement())).addColumn(column.copy().addElement(Card.create().setBackground(Background.PURPLE).appendContent(new Text(SAMPLE_CONTENT)).asElement())).asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.noHeaderCards()).asElement());
}
use of org.dominokit.domino.ui.column.Column in project domino-ui-demo by DominoKit.
the class CardsViewImpl method cardsWithHeaders.
private void cardsWithHeaders() {
element.appendChild(BlockHeader.create("CARDS WITH HEADERS", "cards can have a header that has a Title and an optional description.").asElement());
Column column = Column.create().onLarge(OnLarge.four).onMedium(OnMedium.four).onSmall(OnSmall.twelve).onXSmall(OnXSmall.twelve);
element.appendChild(Row.create().addColumn(column.addElement(Card.create("Card Title", "Description text here...").appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.ALL.more_vert(), event -> DomGlobal.console.info("More action selected")).asElement())).addColumn(column.copy().addElement(Card.create("Card Title", "Description text here...").appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.AV_ICONS.mic(), event -> DomGlobal.console.info("Play sound")).asElement())).addColumn(column.copy().addElement(Card.create("Card Title", "Description text here...").appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.AV_ICONS.mic(), event -> DomGlobal.console.info("Play sound")).addHeaderAction(Icons.NAVIGATION_ICONS.more_vert(), event -> DomGlobal.console.info("More action selected")).asElement())).asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.cardsWithHeaders()).asElement());
}
use of org.dominokit.domino.ui.column.Column in project domino-ui-demo by DominoKit.
the class LabelsViewImpl method initMaterialLabels.
private void initMaterialLabels() {
Card labels = Card.create("LABELS WITH MATERIAL DESIGN COLORS", "You can use material design color with labels");
Row row = Row.create();
Column column = Column.create().onLarge(Column.OnLarge.one).onMedium(Column.OnMedium.two).onSmall(Column.OnSmall.six).onXSmall(Column.OnXSmall.twelve);
HTMLElement red = Label.create("Red").setBackground(Background.RED).asElement();
HTMLElement pink = Label.create("Pink").setBackground(Background.PINK).asElement();
HTMLElement purple = Label.create("Purple").setBackground(Background.PURPLE).asElement();
HTMLElement deepPurple = Label.create("Deep Purple").setBackground(Background.DEEP_PURPLE).asElement();
HTMLElement indigo = Label.create("Indigo").setBackground(Background.INDIGO).asElement();
HTMLElement blue = Label.create("Blue").setBackground(Background.BLUE).asElement();
HTMLElement lightBlue = Label.create("Light Blue").setBackground(Background.LIGHT_BLUE).asElement();
HTMLElement cyan = Label.create("Cyan").setBackground(Background.CYAN).asElement();
HTMLElement teal = Label.create("Teal").setBackground(Background.TEAL).asElement();
HTMLElement green = Label.create("Green").setBackground(Background.GREEN).asElement();
HTMLElement orange = Label.create("Orange").setBackground(Background.ORANGE).asElement();
HTMLElement yellow = Label.create("Yellow").setBackground(Background.YELLOW).asElement();
red.style.margin = CSSProperties.MarginUnionType.of("10px");
pink.style.margin = CSSProperties.MarginUnionType.of("10px");
purple.style.margin = CSSProperties.MarginUnionType.of("10px");
deepPurple.style.margin = CSSProperties.MarginUnionType.of("10px");
indigo.style.margin = CSSProperties.MarginUnionType.of("10px");
blue.style.margin = CSSProperties.MarginUnionType.of("10px");
lightBlue.style.margin = CSSProperties.MarginUnionType.of("10px");
cyan.style.margin = CSSProperties.MarginUnionType.of("10px");
teal.style.margin = CSSProperties.MarginUnionType.of("10px");
green.style.margin = CSSProperties.MarginUnionType.of("10px");
orange.style.margin = CSSProperties.MarginUnionType.of("10px");
yellow.style.margin = CSSProperties.MarginUnionType.of("10px");
row.addColumn(column.addElement(red)).addColumn(column.copy().addElement(pink)).addColumn(column.copy().addElement(purple)).addColumn(column.copy().addElement(deepPurple)).addColumn(column.copy().addElement(indigo)).addColumn(column.copy().addElement(blue)).addColumn(column.copy().addElement(lightBlue)).addColumn(column.copy().addElement(cyan)).addColumn(column.copy().addElement(teal)).addColumn(column.copy().addElement(green)).addColumn(column.copy().addElement(orange)).addColumn(column.copy().addElement(yellow));
labels.appendContent(row.asElement());
element.appendChild(labels.asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initMaterialLabels()).asElement());
}
Aggregations