use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.
the class AnimationViewImpl method createCard.
private Card createCard(Transition transition) {
Card animationCard = Card.create().setBackground(Background.BLUE_GREY).appendContent(img(GWT.getModuleBaseURL() + "/images/animation-bg.jpg").css(Styles.img_responsive).asElement());
Card card = Card.create(transition.getName(), transition.getStyle() + " animation.").setBodyBackground(Background.LIGHT_BLUE).setHeaderBackground(Background.BLUE);
Button animate = Button.createDefault(transition.getName()).large();
animate.getClickableElement().addEventListener("click", e -> Animation.create(animationCard.asElement()).transition(transition).duration(1000).animate());
Button infiniteAnimate = Button.createDefault("INFINITE").large();
infiniteAnimate.getClickableElement().addEventListener("click", e -> {
Animation animation = Animation.create(animationCard.asElement()).transition(transition).infinite().duration(1000);
if (animationCard.asElement().classList.contains("animated")) {
animation.stop();
animate.asElement().style.display = "inline-block";
infiniteAnimate.setContent("INFINITE");
} else {
animation.animate();
animate.asElement().style.display = "none";
infiniteAnimate.setContent("STOP");
}
});
card.appendContent(animationCard.asElement()).appendContent(Elements.div().css("button-demo").attr("style", "text-align: center").add(animate.asElement()).add(infiniteAnimate.asElement()).asElement());
return card;
}
use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.
the class ModalsViewImpl method initModalColor.
private void initModalColor() {
Card card = Card.create("WITH MATERIAL DESIGN COLORS", "You can use material design colors.");
HTMLDivElement buttonsContainer = div().css("button-demo").asElement();
card.appendContent(buttonsContainer);
// ------------ Red ------------
ModalDialog modalDialogRed = createModalDialog().setModalColor(Color.RED);
Button redButton = Button.create("RED").setBackground(Background.RED);
redButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogRed));
buttonsContainer.appendChild(redButton.asElement());
element.appendChild(modalDialogRed.asElement());
// ------------ Pink ------------
ModalDialog modalDialogPink = createModalDialog().setModalColor(Color.PINK);
Button pinkButton = Button.create("PINK").setBackground(Background.PINK);
pinkButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogPink));
buttonsContainer.appendChild(pinkButton.asElement());
element.appendChild(modalDialogPink.asElement());
// ------------ Purple ------------
ModalDialog modalDialogPurple = createModalDialog().setModalColor(Color.PURPLE);
Button purpleButton = Button.create("PURPLE").setBackground(Background.PURPLE);
purpleButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogPurple));
buttonsContainer.appendChild(purpleButton.asElement());
element.appendChild(modalDialogPurple.asElement());
// ------------ Deep Purple ------------
ModalDialog modalDialogDeepPurple = createModalDialog().setModalColor(Color.DEEP_PURPLE);
Button deepPurpleButton = Button.create("DEEP PURPLE").setBackground(Background.DEEP_PURPLE);
deepPurpleButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogDeepPurple));
buttonsContainer.appendChild(deepPurpleButton.asElement());
element.appendChild(modalDialogDeepPurple.asElement());
// ------------ Indigo ------------
ModalDialog modalDialogIndigo = createModalDialog().setModalColor(Color.INDIGO);
Button indigoButton = Button.create("INDIGO").setBackground(Background.INDIGO);
indigoButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogIndigo));
buttonsContainer.appendChild(indigoButton.asElement());
element.appendChild(modalDialogIndigo.asElement());
// ------------ Blue ------------
ModalDialog modalDialogBlue = createModalDialog().setModalColor(Color.BLUE);
Button blueButton = Button.create("BLUE").setBackground(Background.BLUE);
blueButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogBlue));
buttonsContainer.appendChild(blueButton.asElement());
element.appendChild(modalDialogBlue.asElement());
// ------------ Orange ------------
ModalDialog modalDialogOrange = createModalDialog().setModalColor(Color.ORANGE);
Button orangeButton = Button.create("ORANGE").setBackground(Background.ORANGE);
orangeButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogOrange));
buttonsContainer.appendChild(orangeButton.asElement());
element.appendChild(modalDialogOrange.asElement());
// ------------ Green ------------
ModalDialog modalDialogGreen = createModalDialog().setModalColor(Color.GREEN);
Button greenButton = Button.create("GREEN").setBackground(Background.GREEN);
greenButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogGreen));
buttonsContainer.appendChild(greenButton.asElement());
element.appendChild(modalDialogGreen.asElement());
// ------------ Teal ------------
ModalDialog modalDialogTeal = createModalDialog().setModalColor(Color.TEAL);
Button tealButton = Button.create("TEAL").setBackground(Background.TEAL);
tealButton.getClickableElement().addEventListener("click", e -> openDialog(modalDialogTeal));
buttonsContainer.appendChild(tealButton.asElement());
element.appendChild(modalDialogTeal.asElement());
element.appendChild(card.asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initModalColor()).asElement());
}
use of org.dominokit.domino.ui.cards.Card 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.cards.Card 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