<?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://java.sun.com/jsf/facelets">
<ui:param name="title" value="#{demoBundle.segment_layout} <tc:segmentLayout>"/>
<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="#{demoBundle.tagDocUrl}/#{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>
<pre><code class="language-markup"><tc:segmentLayout extraSmall="2seg 3seg 4seg 3seg"></code></pre>
<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>
<pre><code class="language-markup"><tc:segmentLayout extraSmall="2seg 2seg 4seg"></code></pre>
<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'">
<pre><code class="language-markup"><tc:segmentLayout extraSmall="1fr auto 1fr"></code></pre>
<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>
<pre><code class="language-markup"><tc:segmentLayout extraLarge="1seg" large="2seg"
medium="3seg" small="4seg" extraSmall="6seg">
...</code></pre>
<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>
<pre><code class="language-markup"><tc:segmentLayout extraSmall="5seg 3seg"
marginExtraSmall="none both left both">
...</code></pre>
<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>
<pre><code class="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></code></pre>
<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>
<pre><code class="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></code></pre>
<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>
</ui:composition>