| <?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. |
| --> |
| |
| <ui:composition template="/main.xhtml" |
| xmlns="http://www.w3.org/1999/xhtml" |
| xmlns:tc="http://myfaces.apache.org/tobago/component" |
| xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> |
| |
| <p>The segment layout is a grid with 12 columns. |
| The number and the proportion of the columns can be set with the attributes |
| <code>extraSmall</code>, <code>small</code>, <code>medium</code>, <code>large</code> and <code>extraLarge</code>. |
| The value is a space separated list. Allowed are '1seg' to '12seg', 'auto' and '1fr'.</p> |
| <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png" |
| link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/segmentLayout.html"/> |
| |
| <tc:section label="Basics"> |
| <p>The following examples show a segment layout with four and three columns |
| and a segment layout with 'auto' and '1fr'.</p> |
| <tc:section label="4 Columns"> |
| <p>The sum of the values is 12.</p> |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="2seg 3seg 4seg 3seg"></demo-highlight> |
| <tc:segmentLayout extraSmall="2seg 3seg 4seg 3seg"> |
| <tc:in value="2seg"/> |
| <tc:in value="3seg"/> |
| <tc:in value="4seg"/> |
| <tc:in value="3seg"/> |
| <tc:in value="2seg"/> |
| <tc:in value="3seg"/> |
| <tc:in value="4seg"/> |
| <tc:in value="3seg"/> |
| </tc:segmentLayout> |
| </tc:section> |
| <tc:section label="3 Columns"> |
| <p>The sum of the values is 8. After the third element, the sequence starts from the beginning. |
| So the fourth element got a value of 2.</p> |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="2seg 2seg 4seg"></demo-highlight> |
| <tc:segmentLayout extraSmall="2seg 2seg 4seg"> |
| <tc:in value="2"/> |
| <tc:in value="2"/> |
| <tc:in value="4"/> |
| <tc:in value="2"/> |
| <tc:in value="2"/> |
| <tc:in value="4"/> |
| </tc:segmentLayout> |
| </tc:section> |
| <tc:section label="'auto' and '1fr'"> |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="1fr auto 1fr"></demo-highlight> |
| <tc:segmentLayout extraSmall="1fr auto 1fr"> |
| <tc:panel> |
| <tc:style customClass="blue"/> |
| <p>the remaining space</p> |
| </tc:panel> |
| <tc:panel> |
| <tc:style customClass="old-planet"/> |
| <p>width of the content</p> |
| </tc:panel> |
| <tc:panel> |
| <tc:style customClass="blue"/> |
| <p>the remaining space</p> |
| </tc:panel> |
| </tc:segmentLayout> |
| </tc:section> |
| </tc:section> |
| |
| <tc:section label="Screen Size"> |
| <p>For the different kinds of screen sizes, the segment layout has five attributes: |
| <code>extraSmall</code>, <code>small</code>, <code>medium</code>, <code>large</code> and <code>extraLarge</code>. |
| The first three should be used for desktops. The last two should be used for tablets and phones. |
| Notice, that only the browser size matters. So a small browser window on a big screen also reacts with |
| <code>small</code> and <code>extraSmall</code>.</p> |
| <p>In the following example, all attributes are used. If you are on a desktop you can see the different |
| behavior by changing the size of the browser window.</p> |
| <demo-highlight language="markup"><tc:segmentLayout extraLarge="1seg" large="2seg" |
| medium="3seg" small="4seg" extraSmall="6seg"> |
| ...</demo-highlight> |
| |
| <tc:segmentLayout extraLarge="1seg" large="2seg" medium="3seg" small="4seg" extraSmall="6seg"> |
| <tc:in value="1"/> |
| <tc:in value="2"/> |
| <tc:in value="3"/> |
| <tc:in value="4"/> |
| <tc:in value="5"/> |
| <tc:in value="6"/> |
| <tc:in value="7"/> |
| <tc:in value="8"/> |
| <tc:in value="9"/> |
| <tc:in value="10"/> |
| <tc:in value="11"/> |
| <tc:in value="12"/> |
| </tc:segmentLayout> |
| </tc:section> |
| |
| <tc:section id="marginConcept" label="Margin"> |
| <p>A margin can be set for the different proportions with the attributes |
| <code>marginExtraSmall</code>, <code>marginSmall</code>, <code>marginMedium</code>, <code>marginLarge</code> and |
| <code>marginExtraLarge</code>.</p> |
| <p>Possible values are <code>none</code>, <code>left</code>, <code>right</code> and <code>both</code>.</p> |
| |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="5seg 3seg" |
| marginExtraSmall="none both left both"> |
| ...</demo-highlight> |
| <tc:segmentLayout extraSmall="5seg 3seg" marginExtraSmall="none both left both"> |
| <tc:in value="none"/> |
| <tc:in value="both"/> |
| <tc:in value="none"/> |
| <tc:in value="both"/> |
| <tc:in value="none"/> |
| <tc:in value="both"/> |
| </tc:segmentLayout> |
| </tc:section> |
| |
| <tc:section label="Offset"> |
| <p>An offset can be set for the different proportions with the |
| <code class="language-markup"><tc:segmentLayoutConstraint/></code> tag which can have the attributes |
| <code>offsetExtraSmall</code>, <code>offsetSmall</code>,<code>offsetMedium</code>, <code>offsetLarge</code> and |
| <code>offsetExtraLarge</code>.</p> |
| <p>Possible values are from 1 to 11 for <code>offsetExtraSmall</code>.<br/> |
| For the other attributes possible values are from 0 to 11.<br/> |
| A <code>offsetMedium="0"</code> overwrite the offset from smaller proportions.</p> |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="2seg 2seg 2seg 2seg 2seg 2seg"> |
| <tc:in value="1"/> |
| <tc:in value="2"> |
| <tc:segmentLayoutConstraint offsetExtraSmall="1" offsetSmall="2" |
| offsetMedium="3" offsetLarge="4" offsetExtraLarge="5"/> |
| </tc:in> |
| ... |
| </tc:segmentLayout></demo-highlight> |
| <tc:segmentLayout extraSmall="2seg 2seg 2seg 2seg 2seg 2seg"> |
| <tc:in value="1"/> |
| <tc:in value="2"> |
| <tc:segmentLayoutConstraint offsetExtraSmall="1" offsetSmall="2" offsetMedium="3" offsetLarge="4" |
| offsetExtraLarge="5"/> |
| </tc:in> |
| <tc:in value="3"/> |
| <tc:in value="4"/> |
| <tc:in value="5"/> |
| <tc:in value="6"/> |
| <tc:in value="7"/> |
| <tc:in value="8"/> |
| <tc:in value="9"/> |
| <tc:in value="10"/> |
| <tc:in value="11"/> |
| <tc:in value="12"/> |
| </tc:segmentLayout> |
| </tc:section> |
| |
| <tc:section label="Overwrite default layout"> |
| <p>The default layout and margins can be overwritten by the |
| <code class="language-markup"><tc:segmentLayoutConstraint/></code> tag. |
| Possible attributes are <code>extraSmall</code>, <code>small</code>, <code>medium</code>, <code>large</code> and |
| <code>extraLarge</code> for the layout.<br/> |
| And: <code>marginExtraSmall</code>, <code>marginSmall</code>, <code>marginMedium</code>, <code>marginLarge</code>, |
| <code>marginExtraLarge</code> for the margins.</p> |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="4seg 8seg"> |
| <tc:in value="4"/> |
| <tc:in value="8"/> |
| <tc:in value="3 - both"> |
| <tc:segmentLayoutConstraint extraSmall="3seg" marginExtraSmall="both"/> |
| </tc:in> |
| <tc:in value="8"/> |
| </tc:segmentLayout></demo-highlight> |
| <tc:segmentLayout extraSmall="4seg 8seg"> |
| <tc:in value="4"/> |
| <tc:in value="8"/> |
| <tc:in value="3 - both"> |
| <tc:segmentLayoutConstraint extraSmall="3seg" marginExtraSmall="both"/> |
| </tc:in> |
| <tc:in value="8"/> |
| </tc:segmentLayout> |
| </tc:section> |
| |
| <tc:section label="Justify"> |
| <p>The horizontal alignment can be set with <code>justify</code>. Possible attributes are none, start, center, end, around and between. |
| The default value is none.</p> |
| <demo-highlight language="markup"><tc:segmentLayout extraSmall="4seg 4seg" justify="none"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="start"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="center"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="end"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="around"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="between"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout></demo-highlight> |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="none"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="start"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="center"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="end"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="around"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| |
| <tc:segmentLayout extraSmall="4seg 4seg" justify="between"> |
| <tc:in value="A"/> |
| <tc:in value="B"/> |
| </tc:segmentLayout> |
| </tc:section> |
| </ui:composition> |
