org.dominokit.domino.ui.cards

Class Card

java.lang.Object

org.dominokit.domino.ui.utils.BaseDominoElement<elemental2.dom.HTMLDivElement,Card>

org.dominokit.domino.ui.cards.Card

All Implemented Interfaces:

DominoStyle<elemental2.dom.HTMLDivElement,Card,Card>, HasBackground<Card>, HasChildren<Card>, HasWavesElement, IsCollapsible<Card>, IsReadOnly<Card>, org.jboss.elemento.IsElement<elemental2.dom.HTMLDivElement>

public class Card
extends BaseDominoElement<elemental2.dom.HTMLDivElement,Card>
implements HasBackground<Card>

A component provides a content container.

A card has two main sub-containers, header and body; the header provides title and description for the card with customizable header actions to perform specific operations while the body provides a container for custom content.

Customize the component can be done by overwriting classes provided by CardStyles

For example:

     Card.create("Card Title", "Description text here...")
             .appendChild(TextNode.of(SAMPLE_CONTENT))
             .addHeaderAction(Icons.ALL.more_vert(), (event) -> {
                 DomGlobal.console.info("More action selected");
             })
 

See Also:

BaseDominoElement, HasBackground

Nested Class Summary

Nested classes/interfaces inherited from class org.dominokit.domino.ui.utils.BaseDominoElement

BaseDominoElement.ElementHandler<T>, BaseDominoElement.ResizeHandler<T>, BaseDominoElement.StyleEditor<E extends elemental2.dom.HTMLElement,T extends org.jboss.elemento.IsElement<E>>, BaseDominoElement.WavesStyler

Field Summary

Fields inherited from class org.dominokit.domino.ui.utils.BaseDominoElement

element

Constructor Summary

Constructors

Constructor and Description
Card()

Method Summary

Modifier and Type	Method and Description
Card	addCollapseListener(Collapsible.HideCompletedHandler listener) Adds listener to be called when the body gets collapsed.
Card	addExpandListener(Collapsible.ShowCompletedHandler listener) Adds listener to be called when the body gets expanded.
Card	addHeaderAction(BaseIcon<?> icon, elemental2.dom.EventListener eventListener) Adds new header action to card header passing the icon and the eventListener.
Card	addHeaderAction(HeaderAction headerAction) Adds new HeaderAction
Card	appendChild(org.jboss.elemento.IsElement<?> element)
Card	appendChild(elemental2.dom.Node content) Adds element to the body of the card
Card	appendDescriptionChild(org.jboss.elemento.IsElement<?> element) Same as appendDescriptionChild(Node) but takes IsElement
Card	appendDescriptionChild(elemental2.dom.Node node) Adds new element to the description element inside the header
Style<elemental2.dom.HTMLDivElement,DominoElement<elemental2.dom.HTMLDivElement>>	bodyStyle()
Card	clearBody() Clears the body element
Card	collapse() Hide the body
static Card	create() Creates new card instance with hiding the header
static Card	create(String title) Creates new card instance with title.
static Card	create(String title, String description) Creates new card instance with title and description
static Card	createProfile(String name, String info) Profile is a special case of a card which has margin-bottom to 0px and @link Color#THEME} as a background
elemental2.dom.HTMLDivElement	element()
Card	expand() Show the body
Card	fitContent() Removes spaces inside the card and fit the body to its content, check CardStyles.FIT_CONTENT
DominoElement<elemental2.dom.HTMLDivElement>	getBody()
BaseIcon<?>	getCollapseIcon()
DominoElement<elemental2.dom.HTMLDivElement>	getHeader()
DominoElement<elemental2.dom.HTMLUListElement>	getHeaderBar()
DominoElement<elemental2.dom.HTMLElement>	getHeaderDescription()
DominoElement<elemental2.dom.HTMLHeadingElement>	getHeaderTitle()
Card	hideHeader() Hide the header
boolean	isCollapsed() Checks if the body is hidden
Card	removeCollapseListener(Collapsible.HideCompletedHandler listener) Removes collapse listener.
Card	removeExpandListener(Collapsible.ShowCompletedHandler listener) Removes expand listener.
Card	removeHeaderLogo() Removes the card header logo and hides its container
Card	setBackground(Color background)
Card	setBodyBackground(Color bodyBackground) Sets the background Color of the body
Card	setBodyCollapseStrategy(CollapseStrategy strategy) Set the card body collapse strategy
Card	setBodyPadding(String padding) Sets the padding of the body, the padding value will be the same as CSS defines it.
Card	setBodyPaddingBottom(String padding) Sets the bottom padding of the body
Card	setBodyPaddingLeft(String padding) Sets the left padding of the body
Card	setBodyPaddingRight(String padding) Sets the right padding of the body
Card	setBodyPaddingTop(String padding) Sets the top padding of the body
Card	setCollapsible() Enables the ability to hide/show the body by adding header action to the card.
Card	setDescription(String descriptionText) Sets the description of the card
Card	setHeaderBackground(Color headerBackground) Sets the background Color of the header
Card	setHeaderLogo(org.jboss.elemento.IsElement<?> element) Same as setHeaderLogo(Node) but accepts IsElement
Card	setHeaderLogo(elemental2.dom.Node node) Sets the header logo, this will removes the previous logo if set.
Card	setHeaderVisible(boolean headerVisible) Sets the header visibility
Card	setTitle(String titleText) Sets the title of the card
Card	showHeader() Show the header
Card	toggle() Change the visibility of the body based on its current state; expand if collapsed or collapse if expanded
Card	unFitContent() Sets a default padding to the body of the card

Methods inherited from class org.dominokit.domino.ui.utils.BaseDominoElement

add, add, addClickListener, addCss, addCss, addEventListener, addEventListener, addEventsListener, addHideListener, addShowListener, alignCenter, alignRight, apply, attr, blur, childNodes, clearElement, contains, contains, contains, containsCss, css, css, cssClassByIndex, cssClassesCount, cssText, disable, elevate, elevate, enable, firstChild, getAttachObserver, getAttribute, getBoundingClientRect, getChildElementCount, getClickableElement, getCollapsible, getCollapsibleElement, getDetachObserver, getDominoId, getElementsCount, getElevation, getFirstChild, getId, getTextContent, getTooltip, getWavesElement, hasAttribute, hasChildNodes, hasDirectChild, hide, hideOn, id, init, insertAfter, insertAfter, insertAfter, insertAfter, insertBefore, insertBefore, insertBefore, insertBefore, insertFirst, insertFirst, insertFirst, isAttached, isDisabled, isEmptyElement, isEqualNode, isForceHidden, isHidden, isReadOnly, item, lastChild, length, onAttached, onDetached, onResize, pullLeft, pullRight, querySelector, querySelectorAll, remove, removeAttachObserver, removeAttribute, removeChild, removeChild, removeCss, removeCss, removeCssProperty, removeDetachObserver, removeEventListener, removeEventListener, removeHideListener, removeHideOn, removeShowListener, removeShowOn, removeTooltip, removeWaves, replaceCss, setAlignItems, setAttribute, setAttribute, setAttribute, setBackgroundColor, setBackgroundColor, setBorder, setBorderColor, setBottom, setBottom, setBoxShadow, setCollapseStrategy, setColor, setColor, setContent, setContent, setCssProperty, setCssProperty, setCursor, setCursor, setDisabled, setDisplay, setDisplay, setDropMenu, setFlex, setFloat, setFloat, setFontSize, setFontSize, setForceHidden, setHeight, setHeight, setId, setInnerHtml, setLeft, setLeft, setLineHeight, setLineHeight, setMargin, setMargin, setMarginBottom, setMarginBottom, setMarginLeft, setMarginLeft, setMarginRight, setMarginRight, setMarginTop, setMarginTop, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setOpacity, setOpacity, setOverFlow, setOverFlow, setOverFlowY, setPadding, setPadding, setPaddingBottom, setPaddingBottom, setPaddingLeft, setPaddingLeft, setPaddingRight, setPaddingRight, setPaddingTop, setPaddingTop, setPointerEvents, setPosition, setPosition, setReadOnly, setRight, setRight, setTabIndex, setTextAlign, setTextAlign, setTextContent, setTooltip, setTooltip, setTooltip, setTooltip, setTop, setTop, setTransitionDuration, setWidth, setWidth, setZIndex, show, showOn, style, style, styler, textContent, toggleDisplay, toggleDisplay, withWaves, withWaves

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface org.dominokit.domino.ui.utils.IsCollapsible

isExpanded

Methods inherited from interface org.dominokit.domino.ui.style.DominoStyle

add, add, remove, remove, removeProperty, replace, setProperty, setProperty

Constructor Detail

Card

public Card()

Method Detail

create

public static Card create()

Creates new card instance with hiding the header

Returns:

new instance with no header

create

public static Card create(String title)

Creates new card instance with title.

Parameters:

title - the title of the header

Returns:

new instance

create

public static Card create(String title,
                          String description)

Creates new card instance with title and description

Parameters:

title - the title of the header

description - the description of the header

Returns:

new instance

createProfile

public static Card createProfile(String name,
                                 String info)

Profile is a special case of a card which has margin-bottom to 0px and @link Color#THEME} as a background

Parameters:

name - the title of the header of the profile

info - the description of the header of the profile

Returns:

new instance

See Also:

create(String, String)

setTitle

public Card setTitle(String titleText)

Sets the title of the card

Parameters:

titleText - the title of the header

Returns:

same instance

setDescription

public Card setDescription(String descriptionText)

Sets the description of the card

Parameters:

descriptionText - the description of the header

Returns:

same instance

appendDescriptionChild

public Card appendDescriptionChild(elemental2.dom.Node node)

Adds new element to the description element inside the header

Parameters:

node - the element to be added

Returns:

same instance

appendDescriptionChild

public Card appendDescriptionChild(org.jboss.elemento.IsElement<?> element)

Same as appendDescriptionChild(Node) but takes IsElement

Parameters:

element - the element to append

Returns:

same instance

appendChild

public Card appendChild(elemental2.dom.Node content)

Adds element to the body of the card

Specified by:

appendChild in interface HasChildren<Card>

Overrides:

appendChild in class BaseDominoElement<elemental2.dom.HTMLDivElement,Card>

Parameters:

content - the element to add

Returns:

same instance

appendChild

public Card appendChild(org.jboss.elemento.IsElement<?> element)

Specified by:

appendChild in interface HasChildren<Card>

Overrides:

appendChild in class BaseDominoElement<elemental2.dom.HTMLDivElement,Card>

Parameters:

element - IsElement to be appended to the component

Returns:

same component

setHeaderBackground

public Card setHeaderBackground(Color headerBackground)

Sets the background Color of the header

Parameters:

headerBackground - a Color to set as a background to the header

Returns:

same instance

setBodyBackground

public Card setBodyBackground(Color bodyBackground)

Sets the background Color of the body

Parameters:

bodyBackground - a Color to set as a background to the body

Returns:

same instance

fitContent

public Card fitContent()

Removes spaces inside the card and fit the body to its content, check CardStyles.FIT_CONTENT

Returns:

same instance

unFitContent

public Card unFitContent()

Sets a default padding to the body of the card

Returns:

same instance

setBackground

public Card setBackground(Color background)

Specified by:

setBackground in interface HasBackground<Card>

Parameters:

background - Color

Returns:

same implementing component

getHeader

public DominoElement<elemental2.dom.HTMLDivElement> getHeader()

Returns:

The header element

getHeaderBar

public DominoElement<elemental2.dom.HTMLUListElement> getHeaderBar()

Returns:

The header actions container

getBody

public DominoElement<elemental2.dom.HTMLDivElement> getBody()

Returns:

The body element

getHeaderTitle

public DominoElement<elemental2.dom.HTMLHeadingElement> getHeaderTitle()

Returns:

The header title element

getHeaderDescription

public DominoElement<elemental2.dom.HTMLElement> getHeaderDescription()

Returns:

The header description element

addHeaderAction

public Card addHeaderAction(BaseIcon<?> icon,
                            elemental2.dom.EventListener eventListener)

Adds new header action to card header passing the icon and the eventListener.

Parameters:

icon - the header action BaseIcon

eventListener - A EventListener to listen to the action

Returns:

same instance

addHeaderAction

public Card addHeaderAction(HeaderAction headerAction)

Adds new HeaderAction

Parameters:

headerAction - A HeaderAction to be added to the card

Returns:

same instance

setCollapsible

public Card setCollapsible()

Enables the ability to hide/show the body by adding header action to the card. This method will set the header action icon to HardwareIcons.keyboard_arrow_up() and adds a listener to hide and show the body.

Returns:

same instance

toggle

public Card toggle()

Change the visibility of the body based on its current state; expand if collapsed or collapse if expanded

Returns:

same instance

expand

public Card expand()

Show the body

Returns:

same instance

collapse

public Card collapse()

Hide the body

Returns:

same instance

isCollapsed

public boolean isCollapsed()

Checks if the body is hidden

Specified by:

isCollapsed in interface IsCollapsible<Card>

Overrides:

isCollapsed in class BaseDominoElement<elemental2.dom.HTMLDivElement,Card>

Returns:

true if the body is hidden, false otherwise

addExpandListener

public Card addExpandListener(Collapsible.ShowCompletedHandler listener)

Adds listener to be called when the body gets expanded. The listener will be called everytime the body gets expanded.

Parameters:

listener - the Collapsible.ShowCompletedHandler to be added

Returns:

same instance

removeExpandListener

public Card removeExpandListener(Collapsible.ShowCompletedHandler listener)

Removes expand listener.

Parameters:

listener - the Collapsible.ShowCompletedHandler to be removed

Returns:

same instance

addCollapseListener

public Card addCollapseListener(Collapsible.HideCompletedHandler listener)

Adds listener to be called when the body gets collapsed. The listener will be called everytime the body gets collapsed.

Parameters:

listener - the Collapsible.HideCompletedHandler to add

Returns:

same instance

removeCollapseListener

public Card removeCollapseListener(Collapsible.HideCompletedHandler listener)

Removes collapse listener.

Parameters:

listener - the Collapsible.HideCompletedHandler to be removed

Returns:

same instance

setBodyPadding

public Card setBodyPadding(String padding)

Sets the padding of the body, the padding value will be the same as CSS defines it.

For example:

     card.setBodyPadding("2px 1px 2px 1px")
 

Parameters:

padding - the padding to set

Returns:

same instance

setBodyPaddingLeft

public Card setBodyPaddingLeft(String padding)

Sets the left padding of the body

Parameters:

padding - the padding to set

Returns:

same instance

setBodyPaddingRight

public Card setBodyPaddingRight(String padding)

Sets the right padding of the body

Parameters:

padding - the padding to set

Returns:

same instance

setBodyPaddingTop

public Card setBodyPaddingTop(String padding)

Sets the top padding of the body

Parameters:

padding - the padding to set

Returns:

same instance

setBodyPaddingBottom

public Card setBodyPaddingBottom(String padding)

Sets the bottom padding of the body

Parameters:

padding - the padding to set

Returns:

same instance

setHeaderLogo

public Card setHeaderLogo(elemental2.dom.Node node)

Sets the header logo, this will removes the previous logo if set.

Parameters:

node - the element to be set in the logo container,if null logo container become hidden

Returns:

same instance

removeHeaderLogo

public Card removeHeaderLogo()

Removes the card header logo and hides its container

Returns:

same instance

setHeaderLogo

public Card setHeaderLogo(org.jboss.elemento.IsElement<?> element)

Same as setHeaderLogo(Node) but accepts IsElement

Parameters:

element - the element to be set in the logo container,if null it will hide the logo container

Returns:

same instance

showHeader

public Card showHeader()

Show the header

Returns:

same instance

hideHeader

public Card hideHeader()

Hide the header

Returns:

same instance

setHeaderVisible

public Card setHeaderVisible(boolean headerVisible)

Sets the header visibility

Parameters:

headerVisible - true to show the header, false otherwise

Returns:

same instance

getCollapseIcon

public BaseIcon<?> getCollapseIcon()

Returns:

the collapse icon element

bodyStyle

public Style<elemental2.dom.HTMLDivElement,DominoElement<elemental2.dom.HTMLDivElement>> bodyStyle()

Returns:

The Style of the body

clearBody

public Card clearBody()

Clears the body element

Returns:

same instance

setBodyCollapseStrategy

public Card setBodyCollapseStrategy(CollapseStrategy strategy)

Set the card body collapse strategy

Returns:

same instance

element

public elemental2.dom.HTMLDivElement element()

Specified by:

element in interface org.jboss.elemento.IsElement<elemental2.dom.HTMLDivElement>

Specified by:

element in class BaseDominoElement<elemental2.dom.HTMLDivElement,Card>

Returns:

the HTML element of type E which is the root element of the component