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

Example 6 with Card

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

the class ButtonsViewImpl method initNestingGroup.

private void initNestingGroup() {
    Card card = Card.create("SIZING", "Dropdown can be used inside a group of buttons.");
    HTMLElement defaultGroup = numbersNestedGroup(StyleType.DEFAULT);
    defaultGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement primaryGroup = numbersNestedGroup(StyleType.PRIMARY);
    primaryGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement infoGroup = numbersNestedGroup(StyleType.INFO);
    infoGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement successGroup = numbersNestedGroup(StyleType.SUCCESS);
    successGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    successGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement dangerGroup = numbersNestedGroup(StyleType.DANGER);
    dangerGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    HTMLElement warningGroup = numbersNestedGroup(StyleType.WARNING);
    warningGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    warningGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultGroup);
    card.appendContent(primaryGroup);
    card.appendContent(infoGroup);
    card.appendContent(successGroup);
    card.appendContent(dangerGroup);
    card.appendContent(warningGroup);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initNestingGroup()).asElement());
}

Example 7 with Card

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

the class ButtonsViewImpl method initBootstrapButtons.

private void initBootstrapButtons() {
    Card card = Card.create("BOOTSTRAP DEFAULT BUTTONS", "Use any of the available button classes to quickly create a styled button");
    HTMLElement defaultBtn = Button.createDefault("DEFAULT").asElement();
    HTMLElement primaryBtn = Button.createPrimary("PRIMARY").asElement();
    HTMLElement successBtn = Button.createSuccess("SUCCESS").asElement();
    HTMLElement infoBtn = Button.createInfo("INFO").asElement();
    HTMLElement warningBtn = Button.createWarning("WARNING").asElement();
    HTMLElement dangerBtn = Button.createDanger("DANGER").asElement();
    defaultBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultBtn);
    primaryBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(primaryBtn);
    successBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    successBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(successBtn);
    infoBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(infoBtn);
    warningBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    warningBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(warningBtn);
    dangerBtn.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerBtn.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(dangerBtn);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initBootstrapButtons()).asElement());
}

Example 8 with Card

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

the class ButtonsViewImpl method initSingleDropdownButtons.

private void initSingleDropdownButtons() {
    Card card = Card.create("SINGLE BUTTON DROPDOWNS", "Turn a button into a dropdown toggle with some basic markup changes.");
    DropdownButton defaultDropdown = DropdownButton.createDefault("DEFAULT").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    DropdownButton primaryDropdown = DropdownButton.createPrimary("PRIMARY").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    DropdownButton infoDropdown = DropdownButton.createInfo("INFO").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    DropdownButton dangerButton = DropdownButton.createDanger("DANGER").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    DropdownButton warningDropdown = DropdownButton.createWarning("WARNING").addAction(DropdownAction.create("Action")).addAction(DropdownAction.create("Another action")).addAction(DropdownAction.create("Something else here")).separator().addAction(DropdownAction.create("Separated link"));
    defaultDropdown.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryDropdown.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    infoDropdown.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    warningDropdown.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerButton.asElement().style.margin = CSSProperties.MarginUnionType.of("5px");
    card.appendContent(defaultDropdown.asElement());
    card.appendContent(primaryDropdown.asElement());
    card.appendContent(infoDropdown.asElement());
    card.appendContent(warningDropdown.asElement());
    card.appendContent(dangerButton.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initSingleDropdownButtons()).asElement());
}

Example 9 with Card

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

the class ButtonsViewImpl method initButtonsBasicGroup.

private void initButtonsBasicGroup() {
    Card card = Card.create("BASIC EXAMPLE", "Create group of buttons");
    HTMLElement defaultGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).asElement();
    defaultGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    defaultGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(defaultGroup);
    HTMLElement primaryGroup = ButtonsGroup.create().addButton(Button.createPrimary("LEFT")).addButton(Button.createPrimary("MIDDLE")).addButton(Button.createPrimary("RIGHT")).asElement();
    primaryGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    primaryGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(primaryGroup);
    HTMLElement successGroup = ButtonsGroup.create().addButton(Button.createSuccess("LEFT")).addButton(Button.createSuccess("MIDDLE")).addButton(Button.createSuccess("RIGHT")).asElement();
    successGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    successGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(successGroup);
    HTMLElement infoGroup = ButtonsGroup.create().addButton(Button.createInfo("LEFT")).addButton(Button.createInfo("MIDDLE")).addButton(Button.createInfo("RIGHT")).asElement();
    infoGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    infoGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(infoGroup);
    HTMLElement dangerGroup = ButtonsGroup.create().addButton(Button.createDanger("LEFT")).addButton(Button.createDanger("MIDDLE")).addButton(Button.createDanger("RIGHT")).asElement();
    dangerGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    dangerGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(dangerGroup);
    HTMLElement purpleGroup = ButtonsGroup.create().addButton(Button.create("LEFT").setBackground(Background.PURPLE)).addButton(Button.create("MIDDLE").setBackground(Background.PURPLE)).addButton(Button.create("RIGHT").setBackground(Background.PURPLE)).asElement();
    purpleGroup.style.margin = CSSProperties.MarginUnionType.of("5px");
    purpleGroup.style.minWidth = CSSProperties.MinWidthUnionType.of("120px");
    card.appendContent(purpleGroup);
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initButtonsBasicGroup()).asElement());
}

Example 10 with Card

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

the class ButtonsViewImpl method initSizingGroup.

private void initSizingGroup() {
    Card card = Card.create("SIZING", "Instead of applying button sizing classes to every button in a group, size can be applied to the group and will be applied to every button.");
    Row row = Row.create();
    Column column1 = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.nine).onXSmall(Column.OnXSmall.twelve);
    HTMLElement largeGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).setSize(ButtonSize.LARGE).asElement();
    largeGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column1.asElement().appendChild(heading("Large Button Group"));
    column1.asElement().appendChild(largeGroup);
    Column column2 = column1.copy();
    HTMLElement defaultGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).asElement();
    defaultGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column2.asElement().appendChild(heading("Default Button Group"));
    column2.asElement().appendChild(defaultGroup);
    Column column3 = column1.copy();
    HTMLElement smallGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).setSize(ButtonSize.SMALL).asElement();
    smallGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column3.asElement().appendChild(heading("Small Button Group"));
    column3.asElement().appendChild(smallGroup);
    Column column4 = column1.copy();
    HTMLElement xsmallGroup = ButtonsGroup.create().addButton(Button.createDefault("LEFT")).addButton(Button.createDefault("MIDDLE")).addButton(Button.createDefault("RIGHT")).setSize(ButtonSize.XSMALL).asElement();
    xsmallGroup.style.margin = CSSProperties.MarginUnionType.of("15px");
    column4.asElement().appendChild(heading("Extra-Small Button Group"));
    column4.asElement().appendChild(xsmallGroup);
    column1.asElement().classList.add("align-center");
    column2.asElement().classList.add("align-center");
    column3.asElement().classList.add("align-center");
    column4.asElement().classList.add("align-center");
    row.addColumn(column1).addColumn(column2).addColumn(column3).addColumn(column4);
    card.appendContent(row.asElement());
    element.appendChild(card.asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.initSizingGroup()).asElement());
}