Examples with Text elemental2.dom.Text used on opensource projects

Example 16 with Text

use of elemental2.dom.Text in project domino-ui-demo by DominoKit.

the class MediaViewImpl method defaultMedia.

private void defaultMedia() {
    element.appendChild(Card.create("DEFAULT MEDIA", "The default media displays a media object (images, video, audio) to the left or right of a content block.").appendContent(MediaObject.create().setHeader("Media heading").setLeftMedia(a().add(img("http://placehold.it/64x64").attr("width", "64").attr("height", "64")).asElement()).appendContent(new Text(SAMPLE_TEXT)).asElement()).appendContent(MediaObject.create().setHeader("Media heading").setLeftMedia(a().add(img("http://placehold.it/64x64").attr("width", "64").attr("height", "64")).asElement()).appendContent(new Text(SAMPLE_TEXT)).appendContent(MediaObject.create().setHeader("Media heading").setLeftMedia(a().add(img("http://placehold.it/64x64").attr("width", "64").attr("height", "64")).asElement()).appendContent(new Text(SAMPLE_TEXT)).asElement()).asElement()).appendContent(MediaObject.create().setHeader("Media heading").setRightMedia(a().add(img("http://placehold.it/64x64").attr("width", "64").attr("height", "64")).asElement()).appendContent(new Text(SAMPLE_TEXT)).asElement()).appendContent(MediaObject.create().setHeader("Media heading").setRightMedia(a().add(img("http://placehold.it/64x64").attr("width", "64").attr("height", "64")).asElement()).setLeftMedia(a().add(img("http://placehold.it/64x64").attr("width", "64").attr("height", "64")).asElement()).appendContent(new Text(SAMPLE_TEXT)).asElement()).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.defaultMedia()).asElement());
}

Example 17 with Text

use of elemental2.dom.Text 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;
}

Example 18 with Text

use of elemental2.dom.Text in project domino-ui-demo by DominoKit.

the class HelpersViewImpl method marginAndPaddingSpaces.

private void marginAndPaddingSpaces() {
    Column marginColumn = Column.create().onLarge(Column.OnLarge.four).onMedium(Column.OnMedium.four).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    Column paddingColumn = Column.create().onLarge(Column.OnLarge.three).onMedium(Column.OnMedium.three).onSmall(Column.OnSmall.twelve).onXSmall(Column.OnXSmall.twelve);
    element.appendChild(Card.create("MARGIN & PADDING SPACES", "Use ready classes to apply margins and padding to your elements.").appendContent(Paragraph.create().appendContent(b().textContent("Margins").asElement()).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("10").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-t-10").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-t-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-10").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-t--10").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("35").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l-35").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-35").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l--35").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("15").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-b-15").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-b-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-20").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-l--20").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("30").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-r-30").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-r-0").asElement())).addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("-30").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".m-r--30").asElement())).asElement()).appendContent(Row.create().addColumn(marginColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("ALL M").asElement()).addElement(new Text("argin ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".margin-0").asElement())).asElement()).appendContent(Paragraph.create().appendContent(b().textContent("Paddings").asElement()).asElement()).appendContent(Row.create().addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("10").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-t-10").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("T").asElement()).addElement(new Text("op ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-t-0").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("35").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-l-35").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("L").asElement()).addElement(new Text("eft ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-l-0").asElement())).asElement()).appendContent(Row.create().addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("15").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-b-15").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("B").asElement()).addElement(new Text("ottom ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-b-0").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("30").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-r-30").asElement())).addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("R").asElement()).addElement(new Text("ight ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".p-r-0").asElement())).asElement()).appendContent(Row.create().addColumn(paddingColumn.copy().addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("ALL P").asElement()).addElement(new Text("adding ")).addElement(span().css(Color.RED.getStyle(), Styles.font_bold).textContent("0").asElement()).addElement(new Text("px → ")).addElement(code().textContent(".padding-0").asElement())).asElement()).asElement());
}

Example 19 with Text

use of elemental2.dom.Text in project domino-ui-demo by DominoKit.

the class CardsViewImpl method noHeaderCards.

private void noHeaderCards() {
    element.appendChild(BlockHeader.create("NO HEADER CARDS", "You can also create cards without headers.").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().setBackground(Background.GREEN).appendContent(new Text(SAMPLE_CONTENT)).asElement())).addColumn(column.copy().addElement(Card.create().setBackground(Background.LIGHT_BLUE).appendContent(new Text(SAMPLE_CONTENT)).asElement())).addColumn(column.copy().addElement(Card.create().setBackground(Background.PURPLE).appendContent(new Text(SAMPLE_CONTENT)).asElement())).asElement());
    element.appendChild(Card.createCodeCard(CodeResource.INSTANCE.noHeaderCards()).asElement());
}

Example 20 with Text

use of elemental2.dom.Text 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());
}