Slot A
2
Slot B
2
Slot C
2
Slot D
6
Demo

Slot

The UiSlotWidthHandler can be used to easily handle dynamic slot widths. The handler provides two different attributes:

  • This width itself (a, b, c, ...)
  • The information to show the slot or not (showA, showB, showC...)
<j:row id="row">
	<j:slot width="#{handlerSlotBean.uiSlot.a}" rendered="#{handlerSlotBean.uiSlot.showA}">
		<p:panel header="Slot A" styleClass="jeeslPanel jeesl-panel">
			<j:inputGrid labelWidth="9">
				<p:outputLabel value="Width"/>
				<h:panelGroup styleClass="ui-outputtext"><h:outputText value="#{handlerSlotBean.uiSlot.a}"/></h:panelGroup>
			</j:inputGrid>
		</p:panel>
	</j:slot>
	<j:slot width="#{handlerSlotBean.uiSlot.b}" rendered="#{handlerSlotBean.uiSlot.showB}">
		<p:panel header="Slot B" styleClass="jeeslPanel jeesl-panel">
			<j:inputGrid labelWidth="9">
				<p:outputLabel value="Width"/>
				<h:panelGroup styleClass="ui-outputtext"><h:outputText value="#{handlerSlotBean.uiSlot.b}"/></h:panelGroup>
			</j:inputGrid>
		</p:panel>
	</j:slot>
	<j:slot width="#{handlerSlotBean.uiSlot.c}" rendered="#{handlerSlotBean.uiSlot.showC}">
		<p:panel header="Slot C" styleClass="jeeslPanel jeesl-panel">
			<j:inputGrid labelWidth="9">
				<p:outputLabel value="Width"/>
				<h:panelGroup styleClass="ui-outputtext"><h:outputText value="#{handlerSlotBean.uiSlot.c}"/></h:panelGroup>
			</j:inputGrid>
		</p:panel>
	</j:slot>
	<j:slot width="#{handlerSlotBean.uiSlot.d}" rendered="#{handlerSlotBean.uiSlot.showD}">
		<p:panel header="Slot D" styleClass="jeeslPanel jeesl-panel">
			<j:inputGrid labelWidth="9">
				<p:outputLabel value="Width"/>
				<h:panelGroup styleClass="ui-outputtext"><h:outputText value="#{handlerSlotBean.uiSlot.d}"/></h:panelGroup>
			</j:inputGrid>
		</p:panel>
	</j:slot>
</j:row>