use of org.dominokit.domino.ui.button.Button in project domino-ui-demo by DominoKit.
the class CollapseViewImpl method example.
private void example() {
Collapsible collapsible = Collapsible.create(Elements.div().add(Elements.div().css("well").textContent(SAMPLE_CONTENT).asElement()).asElement());
EventListener collapsibleListener = evt -> {
if (collapsible.isCollapsed())
collapsible.expand();
else
collapsible.collapse();
};
Button anchorButton = Button.create("LINK WITH HREF");
anchorButton.justify();
anchorButton.getClickableElement().addEventListener("click", collapsibleListener);
Button button = Button.create("BUTTON");
button.getClickableElement().addEventListener("click", collapsibleListener);
element.appendChild(Row.create().addColumn(column.copy().addElement(Card.create("EXAMPLE", "click the buttons below to show and hide another element via class changes.").appendContent(anchorButton.htmlBuilder().css(CssStyles.M_B_15).component().setBackground(Background.PINK).asElement()).appendContent(new Text("\n")).appendContent(button.htmlBuilder().css(CssStyles.M_B_15).component().setBackground(Background.CYAN).asElement()).appendContent(collapsible.asElement()).asElement())).asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.example()).asElement());
}
use of org.dominokit.domino.ui.button.Button 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.button.Button in project domino-ui-demo by DominoKit.
the class ModalsViewImpl method initModalsSize.
private void initModalsSize() {
Row row = Row.create();
Column column = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
// ------------ Default size -------------
ModalDialog defaultSizeModal = createModalDialog();
Button defaultSizeButton = Button.createDefault("MODAL - DEFAULT SIZE");
defaultSizeButton.getClickableElement().addEventListener("click", e -> openDialog(defaultSizeModal));
element.appendChild(defaultSizeModal.asElement());
row.addColumn(column.addElement(defaultSizeButton.asElement()));
// ------------ Large size -------------
ModalDialog largeSizeModal = createModalDialog().large();
Button largeSizeButton = Button.createDefault("MODAL - LARGE SIZE");
largeSizeButton.getClickableElement().addEventListener("click", e -> openDialog(largeSizeModal));
element.appendChild(largeSizeModal.asElement());
row.addColumn(column.copy().addElement(largeSizeButton.asElement()));
// ------------ Small size -------------
ModalDialog smallSizeModal = createModalDialog().small();
Button smallSizeButton = Button.createDefault("MODAL - LARGE SIZE");
smallSizeButton.getClickableElement().addEventListener("click", e -> openDialog(smallSizeModal));
element.appendChild(smallSizeModal.asElement());
row.addColumn(column.copy().addElement(smallSizeButton.asElement()));
element.appendChild(Card.create("MODAL SIZE EXAMPLE", "Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.").appendContent(row.asElement()).asElement());
element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initModalsSize()).asElement());
}
use of org.dominokit.domino.ui.button.Button 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.button.Button in project domino-ui-demo by DominoKit.
the class ModalsViewImpl method createModalDialog.
private ModalDialog createModalDialog() {
ModalDialog modal = ModalDialog.create("Modal title");
modal.appendContent(new Text(SAMPLE_CONTENT));
Button closeButton = Button.create("CLOSE").linkify();
Button saveButton = Button.create("SAVE CHANGES").linkify();
EventListener closeModalListener = evt -> modal.close();
closeButton.getClickableElement().addEventListener("click", closeModalListener);
saveButton.getClickableElement().addEventListener("click", closeModalListener);
modal.appendFooterContent(saveButton.asElement());
modal.appendFooterContent(closeButton.asElement());
return modal;
}
Aggregations