use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.
the class LoadersViewImpl method createCard.
private Card createCard(LoaderEffect effect, String loadingText, Background bodyBackground, Background headerBackground) {
Card card = Card.create(effect.toString(), effect.toString().toLowerCase() + " loader effect.").setBodyBackground(bodyBackground).setHeaderBackground(headerBackground);
EventListener loaderListener = e -> {
Loader loader = Loader.create(card.asElement(), effect).setLoadingText(loadingText).start();
new Timer() {
@Override
public void run() {
loader.stop();
}
}.schedule(7000);
};
Button button = Button.createDefault("CLICK ME").addClickListener(loaderListener);
card.appendContent(new Text(SAMPLE_CONTENT)).appendContent(Elements.br().asElement()).appendContent(Elements.br().asElement()).appendContent(Elements.div().attr("style", "text-align: center").add(button.asElement()).asElement());
return card;
}
use of org.dominokit.domino.ui.cards.Card 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());
}
use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.
the class ButtonsViewImpl method initButtonsToolbar.
private void initButtonsToolbar() {
Card card = Card.create("BUTTON TOOLBAR", "Create buttons toolbar");
Row row = Row.create();
ButtonsGroup firstDefaultGroup = ButtonsGroup.create().addButton(Button.createDefault("1")).addButton(Button.createDefault("2")).addButton(Button.createDefault("3"));
ButtonsGroup secondDefaultGroup = ButtonsGroup.create().addButton(Button.createDefault("4")).addButton(Button.createDefault("5")).addButton(Button.createDefault("6"));
ButtonsGroup thirdDefaultGroup = ButtonsGroup.create().addButton(Button.createDefault("7"));
ButtonsToolbar defaultButtonsToolbar = ButtonsToolbar.create().addGroup(firstDefaultGroup).addGroup(secondDefaultGroup).addGroup(thirdDefaultGroup);
defaultButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
row.asElement().appendChild(defaultButtonsToolbar.asElement());
ButtonsGroup firstPrimaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("1")).addButton(Button.createPrimary("2")).addButton(Button.createPrimary("3"));
ButtonsGroup secondPrimaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("4")).addButton(Button.createPrimary("5")).addButton(Button.createPrimary("6"));
ButtonsGroup thirdPrimaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("7"));
ButtonsToolbar primaryButtonsToolbar = ButtonsToolbar.create().addGroup(firstPrimaryGroup).addGroup(secondPrimaryGroup).addGroup(thirdPrimaryGroup);
primaryButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
row.asElement().appendChild(primaryButtonsToolbar.asElement());
ButtonsGroup firstInfoGroup = ButtonsGroup.create().addButton(Button.createInfo("1")).addButton(Button.createInfo("2")).addButton(Button.createInfo("3"));
ButtonsGroup secondInfoGroup = ButtonsGroup.create().addButton(Button.createInfo("4")).addButton(Button.createInfo("5")).addButton(Button.createInfo("6"));
ButtonsGroup thirdInfoGroup = ButtonsGroup.create().addButton(Button.createInfo("7"));
ButtonsToolbar infoButtonsToolbar = ButtonsToolbar.create().addGroup(firstInfoGroup).addGroup(secondInfoGroup).addGroup(thirdInfoGroup);
infoButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
row.asElement().appendChild(infoButtonsToolbar.asElement());
ButtonsGroup firstColorGroup = ButtonsGroup.create().addButton(Button.create("1").setBackground(Background.PURPLE)).addButton(Button.create("2").setBackground(Background.PURPLE)).addButton(Button.create("3").setBackground(Background.PURPLE));
ButtonsGroup secondColorGroup = ButtonsGroup.create().addButton(Button.create("4").setBackground(Background.PURPLE)).addButton(Button.create("5").setBackground(Background.PURPLE)).addButton(Button.create("6").setBackground(Background.PURPLE));
ButtonsGroup thirdColorGroup = ButtonsGroup.create().addButton(Button.create("7").setBackground(Background.PURPLE));
ButtonsToolbar colorButtonsToolbar = ButtonsToolbar.create().addGroup(firstColorGroup).addGroup(secondColorGroup).addGroup(thirdColorGroup);
colorButtonsToolbar.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
row.asElement().appendChild(colorButtonsToolbar.asElement());
infoButtonsToolbar.asElement().style.cssFloat = "left";
defaultButtonsToolbar.asElement().style.cssFloat = "left";
primaryButtonsToolbar.asElement().style.cssFloat = "left";
colorButtonsToolbar.asElement().style.cssFloat = "left";
card.appendContent(row.asElement());
element.appendChild(card.asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initButtonsToolbar()).asElement());
}
use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.
the class ButtonsViewImpl method initIconButtons.
private void initIconButtons() {
Card card = Card.create("ICON BUTTONS", "Make icon buttons");
Row normal = Row.create();
HTMLHeadingElement normal_circle = heading("Normal Icon Button");
normal.asElement().appendChild(normal_circle);
card.appendContent(normal.asElement());
Row row = Row.create();
HTMLElement homeIcon = IconButton.create(Icons.ALL.home()).setButtonType(StyleType.DEFAULT).asElement();
HTMLElement micIcon = IconButton.createPrimary(Icons.ALL.mic()).setButtonType(StyleType.PRIMARY).asElement();
HTMLElement moreIcon = IconButton.createInfo(Icons.ALL.more()).setButtonType(StyleType.INFO).asElement();
HTMLElement keyboardIcon = IconButton.createSuccess(Icons.ALL.keyboard()).setButtonType(StyleType.SUCCESS).asElement();
HTMLElement acUnitIcon = IconButton.createWarning(Icons.ALL.ac_unit()).setButtonType(StyleType.WARNING).asElement();
HTMLElement accessAlarmIcon = IconButton.createDanger(Icons.ALL.access_alarm()).setButtonType(StyleType.DANGER).asElement();
homeIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
micIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
moreIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
keyboardIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
acUnitIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
accessAlarmIcon.style.margin = CSSProperties.MarginUnionType.of("5px");
row.asElement().appendChild(homeIcon);
row.asElement().appendChild(micIcon);
row.asElement().appendChild(moreIcon);
row.asElement().appendChild(keyboardIcon);
row.asElement().appendChild(acUnitIcon);
row.asElement().appendChild(accessAlarmIcon);
card.appendContent(row.asElement());
Row smallCircle = Row.create();
HTMLHeadingElement small_icon_button = heading("Small Circle Icon Button");
smallCircle.asElement().appendChild(small_icon_button);
card.appendContent(smallCircle.asElement());
Row row1 = Row.create();
HTMLElement addCircleIconCRL = IconButton.create(Icons.ALL.add_circle()).circle(CircleSize.SMALL).setButtonType(StyleType.DEFAULT).asElement();
HTMLElement placeIconCRL = IconButton.createPrimary(Icons.ALL.place()).circle(CircleSize.SMALL).setButtonType(StyleType.PRIMARY).asElement();
HTMLElement airplaneModeActiveIconCRL = IconButton.createInfo(Icons.ALL.airplanemode_active()).circle(CircleSize.SMALL).setButtonType(StyleType.INFO).asElement();
HTMLElement albumIconCRL = IconButton.createSuccess(Icons.ALL.album()).circle(CircleSize.SMALL).setButtonType(StyleType.SUCCESS).asElement();
HTMLElement weekendIconCRL = IconButton.createWarning(Icons.ALL.weekend()).circle(CircleSize.SMALL).setButtonType(StyleType.WARNING).asElement();
HTMLElement airplayIconCRL = IconButton.createDanger(Icons.ALL.airplay()).circle(CircleSize.SMALL).setButtonType(StyleType.DANGER).asElement();
addCircleIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
placeIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
airplaneModeActiveIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
albumIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
weekendIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
airplayIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
row1.asElement().appendChild(addCircleIconCRL);
row1.asElement().appendChild(placeIconCRL);
row1.asElement().appendChild(airplaneModeActiveIconCRL);
row1.asElement().appendChild(albumIconCRL);
row1.asElement().appendChild(weekendIconCRL);
row1.asElement().appendChild(airplayIconCRL);
card.appendContent(row1.asElement());
Row large = Row.create();
HTMLHeadingElement large_circle = heading("Large Circle Icon Button");
large.asElement().appendChild(large_circle);
card.appendContent(large.asElement());
Row row2 = Row.create();
HTMLElement adjustIconCRL = IconButton.create(Icons.ALL.adjust()).circle(CircleSize.LARGE).setButtonType(StyleType.DEFAULT).asElement();
HTMLElement alloutIconCRL = IconButton.createPrimary(Icons.ALL.all_out()).circle(CircleSize.LARGE).setButtonType(StyleType.PRIMARY).asElement();
HTMLElement appsIconCRL = IconButton.createInfo(Icons.ALL.apps()).circle(CircleSize.LARGE).setButtonType(StyleType.INFO).asElement();
HTMLElement artTrackIconCRL = IconButton.createSuccess(Icons.ALL.art_track()).circle(CircleSize.LARGE).setButtonType(StyleType.SUCCESS).asElement();
HTMLElement assessmentIconCRL = IconButton.createWarning(Icons.ALL.assessment()).circle(CircleSize.LARGE).setButtonType(StyleType.WARNING).asElement();
HTMLElement assistantIconCRL = IconButton.createDanger(Icons.ALL.assistant()).circle(CircleSize.LARGE).setButtonType(StyleType.DANGER).asElement();
adjustIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
alloutIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
appsIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
artTrackIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
assessmentIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
assistantIconCRL.style.margin = CSSProperties.MarginUnionType.of("5px");
row2.asElement().appendChild(adjustIconCRL);
row2.asElement().appendChild(alloutIconCRL);
row2.asElement().appendChild(appsIconCRL);
row2.asElement().appendChild(artTrackIconCRL);
row2.asElement().appendChild(assessmentIconCRL);
row2.asElement().appendChild(assistantIconCRL);
card.appendContent(row2.asElement());
element.appendChild(card.asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initIconButtons()).asElement());
}
use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.
the class ButtonsViewImpl method initButtonSizes.
private void initButtonSizes() {
Card card = Card.create("BUTTON SIZES", "You can resize the buttons");
Column column = Column.create().onLarge(Column.OnLarge.three).onSmall(Column.OnSmall.six).onXSmall(Column.OnXSmall.twelve);
// -----------------------------------------------
Button defaultLarge = Button.createDefault("LARGE").setSize(ButtonSize.LARGE);
Button defaultBtn = Button.createDefault("DEFAULT");
Button defaultSmall = Button.createDefault("SMALL").setSize(ButtonSize.SMALL);
Button defaultXsmall = Button.createDefault("XSMALL").setSize(ButtonSize.XSMALL);
defaultLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
defaultBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
defaultSmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
defaultXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
defaultLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
defaultBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
defaultSmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
defaultXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
column.addElement(Row.create().appendContent(defaultLarge.asElement()).asElement()).addElement(Row.create().appendContent(defaultBtn.asElement()).asElement()).addElement(Row.create().appendContent(defaultSmall.asElement()).asElement()).addElement(Row.create().appendContent(defaultXsmall.asElement()).asElement());
card.appendContent(column.asElement());
// -----------------------------------------------
Column column2 = column.copy();
Button primaryLarge = Button.createPrimary("LARGE").setSize(ButtonSize.LARGE);
Button primaryBtn = Button.createPrimary("DEFAULT");
Button primarySmall = Button.createPrimary("SMALL").setSize(ButtonSize.SMALL);
Button primaryXsmall = Button.createPrimary("XSMALL").setSize(ButtonSize.XSMALL);
primaryLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
primaryBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
primarySmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
primaryXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
primaryLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
primaryBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
primarySmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
primaryXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
column2.addElement(Row.create().appendContent(primaryLarge.asElement()).asElement()).addElement(Row.create().appendContent(primaryBtn.asElement()).asElement()).addElement(Row.create().appendContent(primarySmall.asElement()).asElement()).addElement(Row.create().appendContent(primaryXsmall.asElement()).asElement());
card.appendContent(column2.asElement());
// -----------------------------------------------
Column column3 = column.copy();
Button warningLarge = Button.createWarning("LARGE").setSize(ButtonSize.LARGE);
Button warningBtn = Button.createWarning("DEFAULT");
Button warningSmall = Button.createWarning("SMALL").setSize(ButtonSize.SMALL);
Button warningXsmall = Button.createWarning("XSMALL").setSize(ButtonSize.XSMALL);
warningLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
warningBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
warningSmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
warningXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
warningLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
warningBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
warningSmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
warningXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
column3.addElement(Row.create().appendContent(warningLarge.asElement()).asElement()).addElement(Row.create().appendContent(warningBtn.asElement()).asElement()).addElement(Row.create().appendContent(warningSmall.asElement()).asElement()).addElement(Row.create().appendContent(warningXsmall.asElement()).asElement());
card.appendContent(column3.asElement());
// -----------------------------------------------
Column column4 = column.copy();
Button infoLarge = Button.createInfo("LARGE").setSize(ButtonSize.LARGE);
Button infoBtn = Button.createInfo("DEFAULT");
Button infoSmall = Button.createInfo("SMALL").setSize(ButtonSize.SMALL);
Button infoXsmall = Button.createInfo("XSMALL").setSize(ButtonSize.XSMALL);
infoLarge.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
infoBtn.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
infoSmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
infoXsmall.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
infoLarge.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
infoBtn.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
infoSmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
infoXsmall.asElement().style.minWidth = CSSProperties.MinWidthUnionType.of("200px");
column4.addElement(Row.create().appendContent(infoLarge.asElement()).asElement()).addElement(Row.create().appendContent(infoBtn.asElement()).asElement()).addElement(Row.create().appendContent(infoSmall.asElement()).asElement()).addElement(Row.create().appendContent(infoXsmall.asElement()).asElement());
card.appendContent(column4.asElement());
// -----------------------------------------------
Row row = Row.create().addColumn(column).addColumn(column2).addColumn(column3).addColumn(column4);
row.asElement().style.margin = CSSProperties.MarginUnionType.of("10px");
card.appendContent(row.asElement());
element.appendChild(card.asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initButtonSizes()).asElement());
}
Aggregations