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

Example 11 with Column

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

the class CardsViewImpl method coloredCards.

private void coloredCards() {
    element.appendChild(BlockHeader.create("COLORED CARDS", "You can control the background color of card, card header and card body.").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("Light Blue Card", "Description text here...").setBackground(Background.LIGHT_BLUE).appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.ALL.more_vert(), event -> DomGlobal.console.info("More action selected")).asElement())).addColumn(column.copy().addElement(Card.create("Light Green Card", "Description text here...").setBackground(Background.LIGHT_GREEN).appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.AV_ICONS.mic(), event -> DomGlobal.console.info("Play sound")).asElement())).addColumn(column.copy().addElement(Card.create("Amber card", "Description text here...").setBackground(Background.AMBER).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(Row.create().addColumn(column.copy().addElement(Card.create("Pink Card", "Description text here...").setHeaderBackground(Background.PINK).appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.ALL.more_vert(), event -> DomGlobal.console.info("More action selected")).asElement())).addColumn(column.copy().addElement(Card.create("Blue Grey Card", "Description text here...").setHeaderBackground(Background.BLUE_GREY).appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.AV_ICONS.mic(), event -> DomGlobal.console.info("Play sound")).asElement())).addColumn(column.copy().addElement(Card.create("Deep Orange card", "Description text here...").setHeaderBackground(Background.DEEP_ORANGE).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(Row.create().addColumn(column.copy().addElement(Card.create("Light Blue Card", "Description text here...").setHeaderBackground(Background.BLUE).setBodyBackground(Background.LIGHT_BLUE).appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.ALL.more_vert(), event -> DomGlobal.console.info("More action selected")).asElement())).addColumn(column.copy().addElement(Card.create("Light Green Card", "Description text here...").setHeaderBackground(Background.GREEN).setBodyBackground(Background.LIGHT_GREEN).appendContent(new Text(SAMPLE_CONTENT)).addHeaderAction(Icons.AV_ICONS.mic(), event -> DomGlobal.console.info("Play sound")).asElement())).addColumn(column.copy().addElement(Card.create("Amber card", "Description text here...").setHeaderBackground(Background.ORANGE).setBodyBackground(Background.AMBER).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.coloredCards()).asElement());
}

Example 12 with Column

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

the class CardsViewImpl method collapsibleCards.

private void collapsibleCards() {
    element.appendChild(BlockHeader.create("COLLAPSIBLE CARDS", "cards can be collapsible.").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...").setCollapsible().setHeaderBackground(Background.THEME).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...").setCollapsible().setHeaderBackground(Background.BROWN).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...").setCollapsible().collapse().setHeaderBackground(Background.CYAN).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.collapsibleCards()).asElement());
}

Example 13 with Column

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

the class AnimationViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("CSS ANIMATIONS").appendText("Pure css animations - ").appendContent(a().attr("href", "https://daneden.github.io/animate.css/").attr("target", "_blank").textContent("daneden.github.io/animate.css").asElement()).asElement());
    HTMLImageElement image = img(GWT.getModuleBaseURL() + "/images/animation-bg.jpg").css(Styles.img_responsive).asElement();
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.BOUNCE).asElement())).addColumn(column.copy().addElement(createCard(Transition.FLASH).asElement())).addColumn(column.copy().addElement(createCard(Transition.PULSE).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.RUBBER_BAND).asElement())).addColumn(column.copy().addElement(createCard(Transition.SHAKE).asElement())).addColumn(column.copy().addElement(createCard(Transition.SWING).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.TADA).asElement())).addColumn(column.copy().addElement(createCard(Transition.WOBBLE).asElement())).addColumn(column.copy().addElement(createCard(Transition.JELLO).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.BOUNCE_IN).asElement())).addColumn(column.copy().addElement(createCard(Transition.BOUNCE_IN_DOWN).asElement())).addColumn(column.copy().addElement(createCard(Transition.BOUNCE_IN_LEFT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.BOUNCE_IN_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.BOUNCE_IN_UP).asElement())).addColumn(column.copy().addElement(createCard(Transition.BOUNCE_OUT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.BOUNCE_OUT_DOWN).asElement())).addColumn(column.copy().addElement(createCard(Transition.BOUNCE_OUT_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.BOUNCE_OUT_RIGHT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.BOUNCE_OUT_UP).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_IN).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_IN_DOWN).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FADE_IN_DOWN_BIG).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_IN_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_IN_LEFT_BIG).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FADE_IN_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_IN_RIGHT_BIG).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_IN_UP).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FADE_IN_UP_BIG).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_OUT).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_DOWN).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_DOWN_BIG).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_LEFT_BIG).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_RIGHT_BIG).asElement())).addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_UP).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FADE_OUT_UP_BIG).asElement())).addColumn(column.copy().addElement(createCard(Transition.FLIP).asElement())).addColumn(column.copy().addElement(createCard(Transition.FLIP_IN_X).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.FLIP_IN_Y).asElement())).addColumn(column.copy().addElement(createCard(Transition.FLIP_OUT_X).asElement())).addColumn(column.copy().addElement(createCard(Transition.FLIP_OUT_Y).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.LIGHT_SPEED_IN).asElement())).addColumn(column.copy().addElement(createCard(Transition.LIGHT_SPEED_OUT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_IN).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.ROTATE_IN_DOWN_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_IN_DOWN_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_IN_UP_LEFT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.ROTATE_IN_UP_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_OUT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_OUT_DOWN_LEFT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.ROTATE_OUT_DOWN_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_OUT_UP_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROTATE_OUT_UP_RIGHT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.SLIDE_IN_UP).asElement())).addColumn(column.copy().addElement(createCard(Transition.SLIDE_IN_DOWN).asElement())).addColumn(column.copy().addElement(createCard(Transition.SLIDE_IN_LEFT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.SLIDE_IN_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.SLIDE_OUT_UP).asElement())).addColumn(column.copy().addElement(createCard(Transition.SLIDE_OUT_DOWN).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.SLIDE_OUT_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.SLIDE_OUT_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_IN).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.ZOOM_IN_DOWN).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_IN_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_IN_RIGHT).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.ZOOM_IN_UP).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_OUT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_OUT_DOWN).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.ZOOM_OUT_LEFT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_OUT_RIGHT).asElement())).addColumn(column.copy().addElement(createCard(Transition.ZOOM_OUT_UP).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(createCard(Transition.HINGE).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROLL_IN).asElement())).addColumn(column.copy().addElement(createCard(Transition.ROLL_OUT).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.animation()).asElement());
}

Example 14 with Column

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

the class BadgesViewImpl method buttonExample.

private void buttonExample() {
    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").appendContent(Row.create().addColumn(column.addElement(Button.createSuccess("SUCCESS ").large().block().appendContent(Badge.create("4").asElement()).asElement())).addColumn(column.copy().addElement(Button.createPrimary("PRIMARY").large().block().appendContent(Badge.create("10+").asElement()).asElement())).addColumn(column.copy().addElement(Button.createDanger("DANGER").large().block().appendContent(Badge.create("8").asElement()).asElement())).addColumn(column.copy().addElement(Button.createWarning("WARNING").large().block().appendContent(Badge.create("3").asElement()).asElement())).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.buttonExample()).asElement());
}

Example 15 with Column

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

the class BasicFormsViewImpl method initInputStatus.

private void initInputStatus() {
    Column column6Size = Column.create().onSmall(Column.OnSmall.six);
    inputCard.appendContent(BlockHeader.create("Input Status").asElement()).appendContent(Row.create().addColumn(column6Size.addElement(TextBox.create("Focused").focus().asElement())).addColumn(column6Size.copy().addElement(TextBox.create("Disabled").disable().asElement())).asElement());
}