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

Example 21 with Column

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

the class TypographyViewImpl method lists.

private void lists() {
    Row row = Row.create();
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(row.addColumn(column.copy().addElement(Card.create("UNORDERED LIST").appendContent(ul().add(li().textContent("Lorem ipsum dolor sit amet")).add(li().textContent("Consectetur adipiscing elit")).add(li().textContent("Integer molestie lorem at massa")).add(li().textContent("Facilisis in pretium nisl aliquet")).add(li().textContent("Nulla volutpat aliquam velit").add(ul().add(li().textContent("Phasellus iaculis neque")).add(li().textContent("Purus sodales ultricies")).add(li().textContent("Vestibulum laoreet porttitor sem")).add(li().textContent("Ac tristique libero volutpat at")))).add(li().textContent("Faucibus porta lacus fringilla vel")).add(li().textContent("Aenean sit amet erat nunc")).add(li().textContent("Eget porttitor lorem")).asElement()).asElement())).addColumn(column.copy().addElement(Card.create("ORDERED LIST").appendContent(ol().add(li().textContent("Lorem ipsum dolor sit amet")).add(li().textContent("Consectetur adipiscing elit")).add(li().textContent("Integer molestie lorem at massa")).add(li().textContent("Facilisis in pretium nisl aliquet")).add(li().textContent("Nulla volutpat aliquam velit").add(ol().add(li().textContent("Phasellus iaculis neque")).add(li().textContent("Purus sodales ultricies")).add(li().textContent("Vestibulum laoreet porttitor sem")).add(li().textContent("Ac tristique libero volutpat at")))).add(li().textContent("Faucibus porta lacus fringilla vel")).add(li().textContent("Aenean sit amet erat nunc")).add(li().textContent("Eget porttitor lorem")).asElement()).asElement())).addColumn(column.copy().addElement(Card.create("UNSTYLED LIST").appendContent(ul().css(Styles.LIST_UNSTYLED).add(li().textContent("Lorem ipsum dolor sit amet")).add(li().textContent("Consectetur adipiscing elit")).add(li().textContent("Integer molestie lorem at massa")).add(li().textContent("Facilisis in pretium nisl aliquet")).add(li().textContent("Nulla volutpat aliquam velit").add(ul().add(li().textContent("Phasellus iaculis neque")).add(li().textContent("Purus sodales ultricies")).add(li().textContent("Vestibulum laoreet porttitor sem")).add(li().textContent("Ac tristique libero volutpat at")))).add(li().textContent("Faucibus porta lacus fringilla vel")).add(li().textContent("Aenean sit amet erat nunc")).add(li().textContent("Eget porttitor lorem")).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.lists()).asElement());
}

Example 22 with Column

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

the class ListsViewImpl method coloredSample.

private void coloredSample() {
    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.asElement());
    ListGroup<String> contextualGroup = ListGroup.create();
    contextualGroup.appendItem(contextualGroup.createItem("Value1", "Cras justo odio").select().success()).appendItem(contextualGroup.createItem("Value2", "Dapibus ac facilisis in").info()).appendItem(contextualGroup.createItem("Value3", "Morbi leo risus").warning()).appendItem(contextualGroup.createItem("Value4", "Porta ac consectetur ac").error()).appendItem(contextualGroup.createItem("Value5", "Vestibulum at eros"));
    row.addColumn(column.addElement(Card.create("CONTEXTUAL CLASSES", "Use contextual classes to style list items.").appendContent(contextualGroup.asElement()).asElement()));
    ListGroup<String> coloredGroup = ListGroup.create();
    coloredGroup.appendItem(coloredGroup.createItem("Value1", "Cras justo odio").disable().setBackground(Background.PINK)).appendItem(coloredGroup.createItem("Value2", "Dapibus ac facilisis in").setBackground(Background.TEAL)).appendItem(coloredGroup.createItem("Value3", "Morbi leo risus").setBackground(Background.LIGHT_GREEN)).appendItem(coloredGroup.createItem("Value4", "Porta ac consectetur ac").setBackground(Background.AMBER)).appendItem(coloredGroup.createItem("Value5", "Vestibulum at eros").setBackground(Background.DEEP_PURPLE));
    row.addColumn(column.copy().addElement(Card.create("MATERIAL DESIGN COLORS", "Use Material design background colors to style list items.").appendContent(coloredGroup.asElement()).asElement()));
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.coloredSample()).asElement());
}

Example 23 with Column

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

the class ListsViewImpl method basicListsSample.

private void basicListsSample() {
    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.asElement());
    row.addColumn(column.addElement(Card.create("BASIC EXAMPLES", "The most basic list group is simply an unordered list with list items, and the proper classes.").appendContent(SimpleListGroup.create().appendItem("Cras justo odio").appendItem("Dapibus ac facilisis in").appendItem("Morbi leo risus").appendItem("Porta ac consectetur ac").appendItem("Vestibulum at eros").asElement()).asElement()));
    row.addColumn(column.copy().addElement(Card.create("BADGES", "Add the badges component to any list group item and it will automatically be positioned on the right.").appendContent(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()).asElement()));
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.basicListsSample()).asElement());
}

Example 24 with Column

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

the class ListsViewImpl method selectableSample.

private void selectableSample() {
    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.asElement());
    ListGroup<String> listGroup = ListGroup.create();
    listGroup.multiSelect().appendItem(listGroup.createItem("Value1", "Cras justo odio").select()).appendItem(listGroup.createItem("Value2", "Dapibus ac facilisis in")).appendItem(listGroup.createItem("Value3", "Morbi leo risus")).appendItem(listGroup.createItem("Value4", "Porta ac consectetur ac")).appendItem(listGroup.createItem("Value5", "Vestibulum at eros"));
    row.addColumn(column.addElement(Card.create("SELECTABLE ITEMS", "Use ListGroup instead of SimpleListGroup to make items selectable, use multiSelect to select more than one item.").appendContent(listGroup.asElement()).asElement()));
    ListGroup<String> disabledItems = ListGroup.create();
    disabledItems.appendItem(disabledItems.createItem("Value1", "Cras justo odio").disable()).appendItem(disabledItems.createItem("Value2", "Dapibus ac facilisis in").select()).appendItem(disabledItems.createItem("Value3", "Morbi leo risus").disable()).appendItem(disabledItems.createItem("Value4", "Porta ac consectetur ac")).appendItem(disabledItems.createItem("Value5", "Vestibulum at eros"));
    row.addColumn(column.copy().addElement(Card.create("DISABLED ITEMS", "List group items can be disabled and prevented from being selected.").appendContent(disabledItems.asElement()).asElement()));
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.selectableSample()).asElement());
}

Example 25 with Column

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

the class WavesViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("WAVES", "Click effect inspired by Google's Material Design").asElement());
    Column column = Column.create().onLarge(Column.OnLarge.six).onMedium(Column.OnMedium.six).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Row.create().addColumn(column.copy().addElement(Card.create("COLOR VARIATIONS").appendContent(SimpleListGroup.create().appendItem(SimpleListItem.create("Default").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIGHT").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createPrimary("CLICK ME").setWaveColor(WaveColor.LIGHT).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.RED").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.RED).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.PINK").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.PINK).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.PURPLE").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.PURPLE).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.DEEP_PURPLE").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.DEEP_PURPLE).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.INDIGO").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.INDIGO).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BLUE").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.BLUE).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIGHT_BLUE").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.LIGHT_BLUE).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.CYAN").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.CYAN).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.TEAL").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.TEAL).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.GREEN").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.GREEN).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIGHT_GREEN").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.LIGHT_GREEN).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIME").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.LIME).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.YELLOW").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.YELLOW).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.AMBER").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.AMBER).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.ORANGE").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.ORANGE).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.DEEP_ORANGE").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.DEEP_ORANGE).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BROWN").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.BROWN).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.GREY").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.GREY).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BLUE_GREY").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.BLUE_GREY).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BLACK").htmlBuilder().css(Styles.clearfix).component().appendContent(Button.createDefault("CLICK ME").setWaveColor(WaveColor.BLACK).htmlBuilder().style("min-width:120px;").css(Styles.pull_right).asElement())).asElement()).asElement())).addColumn(column.copy().addElement(Card.create("CIRCLE").appendContent(SimpleListGroup.create().appendItem(SimpleListItem.create("Default").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.mic()).circle(IconButton.CircleSize.SMALL).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIGHT").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createPrimary(Icons.ALL.keyboard()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.LIGHT).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.RED").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.content_copy()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.RED).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.PINK").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.content_cut()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.PINK).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.PURPLE").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.content_paste()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.PURPLE).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.DEEP_PURPLE").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.access_alarm()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.DEEP_PURPLE).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.INDIGO").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.access_time()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.INDIGO).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BLUE").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.account_box()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.BLUE).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIGHT_BLUE").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.airline_seat_flat()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.LIGHT_BLUE).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.CYAN").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.alarm()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.CYAN).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.TEAL").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.ac_unit()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.TEAL).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.GREEN").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.apps()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.GREEN).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIGHT_GREEN").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.assessment()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.LIGHT_GREEN).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.LIME").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.android()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.LIME).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.YELLOW").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.album()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.YELLOW).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.AMBER").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.aspect_ratio()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.AMBER).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.ORANGE").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.autorenew()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.ORANGE).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.DEEP_ORANGE").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.add_a_photo()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.DEEP_ORANGE).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BROWN").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.add_location()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.BROWN).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.GREY").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.add_box()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.GREY).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BLUE_GREY").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.add_to_queue()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.BLUE_GREY).htmlBuilder().css(Styles.pull_right).asElement())).appendItem(SimpleListItem.create("WaveColor.BLACK").htmlBuilder().css(Styles.clearfix).component().appendContent(IconButton.createDefault(Icons.ALL.adjust()).circle(IconButton.CircleSize.SMALL).setWaveColor(WaveColor.BLACK).htmlBuilder().css(Styles.pull_right).asElement())).asElement()).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.waves()).asElement());
}