Examples with Card org.dominokit.domino.ui.cards.Card used on opensource projects

Example 11 with Card

use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initDropUp.

private void initDropUp() {
    Card card = Card.create("DROPUP VARIATION", "Trigger dropdown menus above elements.");
    HTMLElement element = DropdownButton.createDefault("DEFAULT").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    HTMLElement primary = DropdownButton.createPrimary("PRIMARY").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    HTMLElement success = DropdownButton.createSuccess("SUCCESS").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    HTMLElement info = DropdownButton.createInfo("INFO").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup().asElement();
    DropdownButton danger = DropdownButton.createDanger("Dropdown").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).dropup();
    HTMLElement group = ButtonsGroup.create().addButton(Button.createDanger("DANGER")).addDropDown(danger).asElement();
    element.style.margin = CSSProperties.MarginUnionType.of("5px");
    primary.style.margin = CSSProperties.MarginUnionType.of("5px");
    success.style.margin = CSSProperties.MarginUnionType.of("5px");
    info.style.margin = CSSProperties.MarginUnionType.of("5px");
    group.style.margin = CSSProperties.MarginUnionType.of("5px");
    card.appendContent(element);
    card.appendContent(primary);
    card.appendContent(success);
    card.appendContent(info);
    card.appendContent(group);
    this.element.appendChild(card.asElement());
    this.element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initDropUp()).asElement());
}

Example 12 with Card

use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initMaterialDesignButtons.

private void initMaterialDesignButtons() {
    Card card = Card.create("METARIAL DESIGN BUTTONS", "Use any of the available button classes to quickly create a styled button");
    HTMLElement redBtn = Button.create("RED").setBackground(Background.RED).asElement();
    redBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    redBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(redBtn);
    HTMLElement purpleBtn = Button.create("PURPLE").setBackground(Background.PURPLE).asElement();
    purpleBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    purpleBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(purpleBtn);
    HTMLElement indigoBtn = Button.create("INDIGO").setBackground(Background.INDIGO).asElement();
    indigoBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    indigoBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(indigoBtn);
    HTMLElement lightBlueBtn = Button.create("LIGHT BLUE").setBackground(Background.LIGHT_BLUE).asElement();
    lightBlueBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    lightBlueBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(lightBlueBtn);
    HTMLElement greenBtn = Button.create("GREEN").setBackground(Background.GREEN).asElement();
    greenBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    greenBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(greenBtn);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initMaterialDesignButtons()).asElement());
}

Example 13 with Card

use of org.dominokit.domino.ui.cards.Card 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 14 with Card

use of org.dominokit.domino.ui.cards.Card 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 15 with Card

use of org.dominokit.domino.ui.cards.Card in project domino-ui-demo by DominoKit.

the class ButtonsViewImpl method initSplitButton.

private void initSplitButton() {
    Card card = Card.create("SPLITE BUTTON DROPDOWNS", "Similarly, create split button dropdowns with the same markup changes, only with a separate button.");
    DropdownButton defaultDropdown = DropdownButton.createDefault("Toggle Dropdown").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    HTMLElement defaultSplit = SplitButton.createDefault("DEFAULT").addDropdown(defaultDropdown).asElement();
    card.appendContent(defaultSplit);
    DropdownButton primaryDropdown = DropdownButton.createPrimary("Toggle Dropdown").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    HTMLElement primarySplit = SplitButton.createPrimary("PRIMARY").addDropdown(primaryDropdown).asElement();
    card.appendContent(primarySplit);
    DropdownButton warningDropdown = DropdownButton.createWarning("Toggle Dropdown").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    HTMLElement warningSplit = SplitButton.createWarning("WARNING").addDropdown(warningDropdown).asElement();
    card.appendContent(warningSplit);
    DropdownButton infoDropdown = DropdownButton.createInfo("Toggle Dropdown").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    HTMLElement infoSplit = SplitButton.createInfo("INFO").addDropdown(infoDropdown).asElement();
    card.appendContent(infoSplit);
    defaultSplit.style.margin = CSSProperties.MarginUnionType.of("10px");
    primarySplit.style.margin = CSSProperties.MarginUnionType.of("10px");
    warningSplit.style.margin = CSSProperties.MarginUnionType.of("10px");
    infoSplit.style.margin = CSSProperties.MarginUnionType.of("10px");
    this.element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initSplitButton()).asElement());
}