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

Example 1 with Column

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

the class LoadersViewImpl method init.

@Override
public void init() {
    element.appendChild(BlockHeader.create("Loaders", "Use loaders to mask an element until some action is completed.").asElement());
    Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    Row row = Row.create();
    element.appendChild(row.asElement());
    row.addColumn(column.addElement(createCard(LoaderEffect.BOUNCE, "Loading ... ", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    row.addColumn(column.copy().addElement(createCard(LoaderEffect.FACEBOOK, "Loading ... ", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    row.addColumn(column.copy().addElement(createCard(LoaderEffect.IOS, "Loading ... ", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    Row secondRow = Row.create();
    element.appendChild(secondRow.asElement());
    secondRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ROTATE_PLANE, "Waiting ... ", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    secondRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ROTATION, "Waiting ... ", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    secondRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ROUND_BOUNCE, "Waiting ... ", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    Row thirdRow = Row.create();
    element.appendChild(thirdRow.asElement());
    thirdRow.addColumn(column.copy().addElement(createCard(LoaderEffect.TIMER, " ... ", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    thirdRow.addColumn(column.copy().addElement(createCard(LoaderEffect.WIN8, " ... ", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    thirdRow.addColumn(column.copy().addElement(createCard(LoaderEffect.WIN8_LINEAR, " ... ", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    Row fourthRow = Row.create();
    element.appendChild(fourthRow.asElement());
    fourthRow.addColumn(column.copy().addElement(createCard(LoaderEffect.ORBIT, "", Background.BLUE_GREY, Background.BLUE_GREY).asElement()));
    fourthRow.addColumn(column.copy().addElement(createCard(LoaderEffect.STRETCH, "", Background.LIGHT_BLUE, Background.BLUE).asElement()));
    fourthRow.addColumn(column.copy().addElement(createCard(LoaderEffect.NONE, "", Background.LIGHT_GREEN, Background.GREEN).asElement()));
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.loadersSample()).asElement());
}

Example 2 with Column

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

the class LabelsViewImpl method initLabels.

private void initLabels() {
    Card labels = Card.create("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 defaultLabel = Label.createDefault("DEFAULT").asElement();
    HTMLElement primaryLabel = Label.createPrimary("PRIMARY").asElement();
    HTMLElement successLabel = Label.createSuccess("SUCCESS").asElement();
    HTMLElement infoLabel = Label.createInfo("INFO").asElement();
    HTMLElement warningLabel = Label.createWarning("WARNING").asElement();
    HTMLElement dangerLabel = Label.createDanger("DANGER").asElement();
    defaultLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    primaryLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    successLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    infoLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    warningLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    dangerLabel.style.margin = CSSProperties.MarginUnionType.of("10px");
    row.addColumn(column.addElement(defaultLabel)).addColumn(column.copy().addElement(primaryLabel)).addColumn(column.copy().addElement(successLabel)).addColumn(column.copy().addElement(infoLabel)).addColumn(column.copy().addElement(warningLabel)).addColumn(column.copy().addElement(dangerLabel));
    labels.appendContent(row.asElement());
    labels.appendContent(Elements.hr().asElement());
    HTMLHeadingElement h1 = Elements.h(1).textContent("Example heading ").asElement();
    HTMLHeadingElement h2 = Elements.h(2).textContent("Example heading ").asElement();
    HTMLHeadingElement h3 = Elements.h(3).textContent("Example heading ").asElement();
    HTMLHeadingElement h4 = Elements.h(4).textContent("Example heading ").asElement();
    HTMLHeadingElement h5 = Elements.h(5).textContent("Example heading ").asElement();
    HTMLHeadingElement h6 = Elements.h(6).textContent("Example heading ").asElement();
    h1.style.textAlign = "left";
    h1.appendChild(Label.createDanger("New").asElement());
    h2.appendChild(Label.createWarning("New").asElement());
    h3.appendChild(Label.createInfo("New").asElement());
    h4.appendChild(Label.createSuccess("New").asElement());
    h5.appendChild(Label.createPrimary("New").asElement());
    h6.appendChild(Label.createDefault("New").asElement());
    labels.appendContent(h1).appendContent(h2).appendContent(h3).appendContent(h4).appendContent(h5).appendContent(h6);
    this.element.appendChild(labels.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initLabels()).asElement());
}

Example 3 with Column

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

the class InfoBoxViewImpl method hoverZoomEffect.

private void hoverZoomEffect() {
    element.appendChild(BlockHeader.create("HOVER EFFECTS", "Apply Zoom or Expand effects on hover").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.email(), "MESSAGES", "15").setBackground(Background.PINK).setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.devices(), "CPU USAGE", "92%").setBackground(Background.BLUE).setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.alarm(), "ALARM", "07:00 AM").setBackground(Background.AMBER).setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.gps_fixed(), "LOCATION", "Jordan").setBackground(Background.DEEP_PURPLE).setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.equalizer(), "BOUNCE RATE", "62%").setIconBackground(Background.TEAL).setBackground(Background.TEAL).setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.flight_takeoff(), "FLIGHT", "02:59 PM").setIconBackground(Background.GREEN).setBackground(Background.GREEN).setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.battery_charging_full(), "BATTERY", "Charging").setIconBackground(Background.LIGHT_GREEN).setBackground(Background.LIGHT_GREEN).setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.brightness_low(), "BRIGHTNESS RATE", "40%").setIconBackground(Background.LIME).setBackground(Background.LIME).setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.hoverZoomEffect()).asElement());
}

Example 4 with Column

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

the class InfoBoxViewImpl method rightAligned.

private void rightAligned() {
    element.appendChild(BlockHeader.create("ICON ALIGN AND COUNTERS", "Change icon position, and update info value with counters").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.email(), "MESSAGES", "15").setIconBackground(Background.WHITE).setIconColor(Color.PINK).flip().setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.devices(), "CPU USAGE", "92%").setIconBackground(Background.WHITE).setIconColor(Color.BLUE).flip().setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.alarm(), "ALARM", "07:00 AM").setIconBackground(Background.WHITE).setIconColor(Color.AMBER).flip().setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.gps_fixed(), "LOCATION", "Jordan").setIconBackground(Background.WHITE).setIconColor(Color.DEEP_PURPLE).flip().setHoverEffect(InfoBox.HoverEffect.ZOOM).asElement())).asElement());
    element.appendChild(Row.create().addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.equalizer(), "BOUNCE RATE", "62%").setIconBackground(Background.TEAL).setBackground(Background.TEAL).flip().setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.flight_takeoff(), "FLIGHT", "02:59 PM").setIconBackground(Background.GREEN).setBackground(Background.GREEN).flip().setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.battery_charging_full(), "BATTERY", "Charging").setIconBackground(Background.LIGHT_GREEN).setBackground(Background.LIGHT_GREEN).flip().setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).addColumn(column.copy().addElement(InfoBox.create(Icons.ALL.brightness_low(), "BRIGHTNESS RATE", "40%").setIconBackground(Background.LIME).setBackground(Background.LIME).flip().setHoverEffect(InfoBox.HoverEffect.EXPAND).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.rightAligned()).asElement());
}

Example 5 with Column

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

the class BasicFormsViewImpl method initDifferentWidths.

private void initDifferentWidths() {
    Column column6Size = Column.create().onSmall(Column.OnSmall.six);
    Column column4Size = Column.create().onSmall(Column.OnSmall.four);
    Column column3Size = Column.create().onSmall(Column.OnSmall.three);
    inputCard.appendContent(BlockHeader.create("Different Widths").asElement()).appendContent(Row.create().addColumn(column6Size.addElement(TextBox.create("col-sm-6").asElement())).addColumn(column6Size.copy().addElement(TextBox.create("col-sm-6").asElement())).asElement()).appendContent(Row.create().addColumn(column4Size.addElement(TextBox.create("col-sm-4").asElement())).addColumn(column4Size.copy().addElement(TextBox.create("col-sm-4").asElement())).addColumn(column4Size.copy().addElement(TextBox.create("col-sm-4").asElement())).asElement()).appendContent(Row.create().addColumn(column3Size.addElement(TextBox.create("col-sm-3").asElement())).addColumn(column3Size.copy().addElement(TextBox.create("col-sm-3").asElement())).addColumn(column3Size.copy().addElement(TextBox.create("col-sm-3").asElement())).addColumn(column3Size.copy().addElement(TextBox.create("col-sm-3").asElement())).asElement());
}