| <?xml version="1.0" encoding="utf-8"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:j="library://ns.apache.org/royale/jewel" |
| xmlns:js="library://ns.apache.org/royale/basic" |
| xmlns:html="library://ns.apache.org/royale/html"> |
| |
| <fx:Script> |
| <![CDATA[ |
| [Bindable] |
| public var useGap:Boolean = true; |
| ]]> |
| </fx:Script> |
| |
| <j:beads> |
| <js:ContainerDataBinding/> |
| </j:beads> |
| |
| |
| <html:H3 text="Grids"/> |
| <j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" selected="true"/> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="1" |
| tabletNumerator="1" tabletDenominator="1" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="1"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="2" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="2"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="2" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="2"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="3"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="3"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="3"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4"/> |
| </j:GridCell> |
| </j:Grid> |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="5" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="5"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="5" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="5"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="5" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="5"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="5" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="5"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="5" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="5"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="6" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="6"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="6" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="6"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="6" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="6"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="6" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="6"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="6" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="6"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="6" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="6"/> |
| </j:GridCell> |
| |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="7" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="7"/> |
| </j:GridCell> |
| |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="8" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="8"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="9" |
| tabletNumerator="1" tabletDenominator="4" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="9"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="10" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="10"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="11" |
| tabletNumerator="1" tabletDenominator="5" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="11"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid id="g" className="wrapper" gap="{useGap}"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="12" |
| tabletNumerator="1" tabletDenominator="6" |
| phoneNumerator="1" phoneDenominator="4"> |
| <html:Div className="box" text="12"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <html:H3 text="Grids Responsive Visibility"/> |
| |
| <j:Grid className="wrapper" gap="true"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="2" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="2"> |
| <html:Div className="box" text="2a"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="2" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="2" |
| wideScreenVisible="false"> |
| <html:Div className="box" text="2b - Hidden in WideScreen"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="true"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3" |
| phoneVisible="false"> |
| <html:Div className="box" text="3a - Hidden in Phones"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3" |
| tabletVisible="false"> |
| <html:Div className="box" text="3b - Hidden in Tablet"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="3c"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <j:Grid className="wrapper" gap="true"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4a"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4b"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1" |
| desktopVisible="false"> |
| <html:Div className="box" text="4c - Hidden in Desktop"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="4" |
| tabletNumerator="1" tabletDenominator="2" |
| phoneNumerator="1" phoneDenominator="1"> |
| <html:Div className="box" text="4d"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <html:H3 text="Grids Horizontal Align"/> |
| |
| <html:H4 text=" itemsTop"/> |
| |
| <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsTop"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 100px" height="100"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 200px" height="200"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 300px" height="300"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <html:H4 text=" itemsBottom"/> |
| |
| <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsBottom"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 100px" height="100"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 200px" height="200"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 300px" height="300"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <html:H4 text=" itemsCentered"/> |
| |
| <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsCentered"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 100px" height="100"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 200px" height="200"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="height: 300px" height="300"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| <html:H4 text=" itemsSameHeight"/> |
| |
| <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsSameHeight" height="200"> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="Same Height"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="Same Height"/> |
| </j:GridCell> |
| <j:GridCell desktopNumerator="1" desktopDenominator="3" |
| tabletNumerator="1" tabletDenominator="3" |
| phoneNumerator="1" phoneDenominator="3"> |
| <html:Div className="box" text="Same Height"/> |
| </j:GridCell> |
| </j:Grid> |
| |
| |
| </j:SectionContent> |