org.dominokit.domino.ui.grid

Class GridLayout

java.lang.Object

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

org.dominokit.domino.ui.grid.GridLayout

All Implemented Interfaces:

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

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

A layout which is a 12 columns grid based with a required content section and 4 other optional sections Header, Footer, Left and Right.

More information can be found in MDN official documentation

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

For example:

     GridLayout gridLayout = GridLayout.create()
                 .style()
                 .setHeight("500px").get();

     // changing a section size
     gridLayout.setHeaderSpan(SectionSpan._2);
     gridLayout.setLeftSpan(SectionSpan._3);
     gridLayout.setRightSpan(SectionSpan._4);
     gridLayout.setFooterSpan(SectionSpan._2);

     // hiding sections
     gridLayout.hideHeader();
     gridLayout.hideLeft();
     gridLayout.hideRight();
     gridLayout.hideFooter();

     // Adding elements
     gridLayout.getContentElement().appendChild(otherElement);
     gridLayout.getHeaderElement().appendChild(otherElement);
     gridLayout.getLeftElement().appendChild(otherElement);
     gridLayout.getRightElement().appendChild(otherElement);
     gridLayout.getFooterElement().appendChild(otherElement);
 

See Also:

BaseDominoElement

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
GridLayout()

Method Summary

Modifier and Type	Method and Description
static GridLayout	create() Creates a new layout
elemental2.dom.HTMLDivElement	element()
DominoElement<elemental2.dom.HTMLDivElement>	getContentElement()
DominoElement<elemental2.dom.HTMLDivElement>	getFooterElement()
DominoElement<elemental2.dom.HTMLDivElement>	getHeaderElement()
DominoElement<elemental2.dom.HTMLDivElement>	getLeftElement()
DominoElement<elemental2.dom.HTMLDivElement>	getRightElement()
GridLayout	hideFooter() Hides the footer section
GridLayout	hideHeader() Hides the header section
GridLayout	hideLeft() Hides the left section
GridLayout	hideRight() Hides the right section
GridLayout	setFooterSpan(SectionSpan sectionSpan) Change the size of the footer section, changing the footer section can be to cover up to 6 rows
GridLayout	setGap(String gap) Sets the spaces between the sections
GridLayout	setHeaderSpan(SectionSpan sectionSpan) Change the size of the header section, changing the header can be to cover up to 6 rows
GridLayout	setLeftSpan(SectionSpan sectionSpan, boolean spanUp, boolean spanDown) Change the size of the left section, changing the left section can be to cover up to 6 columns
GridLayout	setRightSpan(SectionSpan sectionSpan, boolean spanUp, boolean spanDown) Change the size of the right section, changing the right section can be to cover up to 6 columns

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

GridLayout

public GridLayout()

Method Detail

create

public static GridLayout create()

Creates a new layout

Returns:

new instance

setGap

public GridLayout setGap(String gap)

Sets the spaces between the sections

For example:

     GridLayout.create()
               .setGap("1px 2px")
 

Parameters:

gap - the string value of the space in CSS gap format

Returns:

same instance

setHeaderSpan

public GridLayout setHeaderSpan(SectionSpan sectionSpan)

Change the size of the header section, changing the header can be to cover up to 6 rows

Parameters:

sectionSpan - the number of rows to cover

Returns:

same instance

hideHeader

public GridLayout hideHeader()

Hides the header section

Returns:

same instance

setRightSpan

public GridLayout setRightSpan(SectionSpan sectionSpan,
                               boolean spanUp,
                               boolean spanDown)

Change the size of the right section, changing the right section can be to cover up to 6 columns

Parameters:

sectionSpan - the number of columns to cover

spanUp - true to make the right section sized to the top of the layout even if the header exists, false to position it based on the header

spanDown - true to make the right section sized to the bottom of the layout even if the footer exists, false to position it based on the footer

Returns:

same instance

hideRight

public GridLayout hideRight()

Hides the right section

Returns:

same instance

setLeftSpan

public GridLayout setLeftSpan(SectionSpan sectionSpan,
                              boolean spanUp,
                              boolean spanDown)

Change the size of the left section, changing the left section can be to cover up to 6 columns

Parameters:

sectionSpan - the number of columns to cover

spanUp - true to make the left section sized to the top of the layout even if the header exists, false to position it based on the header

spanDown - true to make the left section sized to the bottom of the layout even if the footer exists, false to position it based on the footer

Returns:

same instance

hideLeft

public GridLayout hideLeft()

Hides the left section

Returns:

same instance

setFooterSpan

public GridLayout setFooterSpan(SectionSpan sectionSpan)

Change the size of the footer section, changing the footer section can be to cover up to 6 rows

Parameters:

sectionSpan - the number of rows to cover

Returns:

same instance

hideFooter

public GridLayout hideFooter()

Hides the footer section

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

Returns:

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

getContentElement

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

Returns:

The content section

getHeaderElement

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

Returns:

The header section

getFooterElement

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

Returns:

The footer section

getLeftElement

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

Returns:

The left section

getRightElement

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

Returns:

The right section