org.dominokit.domino.ui.collapsible

Class Accordion

java.lang.Object

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

org.dominokit.domino.ui.collapsible.Accordion

All Implemented Interfaces:

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

public class Accordion
extends BaseDominoElement<elemental2.dom.HTMLDivElement,Accordion>

A drawer like component that allow you to show and hide content.

Accordion component can work in different mode to give the user the ability to show and hide content an accordion can multiple AccordionPanel and the user click on a panel to show/hide its content by default only one panel will be open and the other panels will be closed unless the multi open flag is set which will allow more than one panel to be open at once.

Multi open false

         Accordion.create()
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 1", TextNode.of("Panel 1"))
                                 .show())
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 2", TextNode.of("Panel 1")))
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 3", TextNode.of("panel 1")));
     

Multi open true

         Accordion.create()
                 .multiOpen()
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 1", TextNode.of("Panel 1"))
                                 .show()
                                 .setIcon(Icons.ALL.perm_contact_calendar())
                                 .setHeaderBackground(Color.PINK)
                                 .setBodyBackground(Color.PINK)
                                 .show())
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 2", TextNode.of("Panel 2"))
                                 .setIcon(Icons.ALL.cloud_download())
                                 .setHeaderBackground(Color.CYAN)
                                 .setBodyBackground(Color.CYAN))
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 3", TextNode.of("Panel 3"))
                                 .show()
                                 .setIcon(Icons.ALL.contact_phone())
                                 .setHeaderBackground(Color.TEAL)
                                 .setBodyBackground(Color.TEAL)
                                 .show())
                 .appendChild(
                         AccordionPanel.create(
                                 "Collapsible item 4", TextNode.of("Panel 4"))
                                 .setIcon(Icons.ALL.folder_shared())
                                 .setHeaderBackground(Color.ORANGE)
                                 .setBodyBackground(Color.ORANGE))
     

See Also:

AccordionPanel

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

Constructor Summary

Constructors

Constructor and Description
Accordion() Default constructor

Method Summary

Modifier and Type	Method and Description
Accordion	appendChild(AccordionPanel panel) Adds an Accordion panel to the Accordion
Accordion	appendChild(AccordionPanel panel, boolean overrideColors) Adds an accordion panel to the accordion and allow overriding the accordion panel colors with the colors from the Accordion
static Accordion	create() A facttory to create a new Accordion instance
Accordion	danger() Set the header background to Color.RED
Accordion	dangerFull() Set the header and body background to Color.RED
elemental2.dom.HTMLDivElement	element()
List<AccordionPanel>	getPanels()
Accordion	multiOpen() Set the Accordion to allow multiple open AccordionPanels
Accordion	primary() Set the header background to Color.BLUE
Accordion	primaryFull() Set the header and body background to Color.BLUE
Accordion	setBodyBackground(Color color) Set the body background to a custom color
Accordion	setHeaderBackground(Color color) Set the header background to a custom color
Accordion	setPanelCollapseStrategy(CollapseStrategy strategy)
Accordion	success() Set the header background to Color.GREEN
Accordion	successFull() Set the header and body background to Color.GREEN
void	togglePanel(AccordionPanel panel) Toggles the Accordion panel open state.
Accordion	warning() Set the header background to Color.ORANGE
Accordion	warningFull() Set the header and body background to Color.ORANGE

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

add, add, addClickListener, addCss, addCss, addEventListener, addEventListener, addEventsListener, addHideListener, addShowListener, alignCenter, alignRight, appendChild, appendChild, 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, isCollapsed, 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

Accordion

public Accordion()

Default constructor

Method Detail

create

public static Accordion create()

A facttory to create a new Accordion instance

Returns:

new Accordion instance

appendChild

public Accordion appendChild(AccordionPanel panel)

Adds an Accordion panel to the Accordion

Parameters:

panel - AccordionPanel

Returns:

same instance

appendChild

public Accordion appendChild(AccordionPanel panel,
                             boolean overrideColors)

Adds an accordion panel to the accordion and allow overriding the accordion panel colors with the colors from the Accordion

Parameters:

panel - AccordionPanel

overrideColors - boolean, true to override the colors.

Returns:

same accordion instance

togglePanel

public void togglePanel(AccordionPanel panel)

Toggles the Accordion panel open state. if it is open it will be closed and if closed it will open

Parameters:

panel - AccordionPanel

multiOpen

public Accordion multiOpen()

Set the Accordion to allow multiple open AccordionPanels

Returns:

same accordion instance

primary

public Accordion primary()

Set the header background to Color.BLUE

Returns:

same accordion instance

success

public Accordion success()

Set the header background to Color.GREEN

Returns:

same accordion instance

warning

public Accordion warning()

Set the header background to Color.ORANGE

Returns:

same accordion instance

danger

public Accordion danger()

Set the header background to Color.RED

Returns:

same accordion instance

primaryFull

public Accordion primaryFull()

Set the header and body background to Color.BLUE

Returns:

same accordion instance

successFull

public Accordion successFull()

Set the header and body background to Color.GREEN

Returns:

same accordion instance

warningFull

public Accordion warningFull()

Set the header and body background to Color.ORANGE

Returns:

same accordion instance

dangerFull

public Accordion dangerFull()

Set the header and body background to Color.RED

Returns:

same accordion instance

setHeaderBackground

public Accordion setHeaderBackground(Color color)

Set the header background to a custom color

Parameters:

color - Color

Returns:

same accordion instance

setBodyBackground

public Accordion setBodyBackground(Color color)

Set the body background to a custom color

Parameters:

color - Color

Returns:

same accordion instance

setPanelCollapseStrategy

public Accordion setPanelCollapseStrategy(CollapseStrategy strategy)

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,Accordion>

Returns:

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

getPanels

public List<AccordionPanel> getPanels()

Returns:

List of AccordionPanel that are added to this accordion