Tab Group - Client side <tc:tab>

<?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"
                xmlns:f="http://java.sun.com/jsf/core">
  <ui:param name="title" value="#{demoBundle.tab} - #{demoBundle.tab_client} &lt;tc:tab>"/>
  <p>Tabs can be created with one or more <code class="language-markup">&lt;tc:tab/></code> within a
    <code class="language-markup">&lt;tc:tabGroup></code>.
    Within a tab, content can be added like in a section or a panel.</p>
  <p>Changing tabs is client side by default.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:tabGroup/>" image="#{request.contextPath}/image/feather-leaf.png" link="#{demoBundle.tagDocUrl}/#{apiController.currentRelease}/tld/tc/tabGroup.html"/>
    |
    <tc:link label="&lt;tc:tab/>" image="#{request.contextPath}/image/feather-leaf.png" link="#{demoBundle.tagDocUrl}/#{apiController.currentRelease}/tld/tc/tab.html"/>
    |
    <tc:link label="&lt;tc:tabChangeListener/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{demoBundle.tagDocUrl}/#{apiController.currentRelease}/tld/tc/tabChangeListener.html"/></p>

  <tc:section label="Basics">
    <p>A simple tabgroup. The second tab is disabled.</p>
    <tc:tabGroup id="tg1">
      <tc:tab id="t11" label="One">
        First tab.
      </tc:tab>
      <tc:tab id="t12" label="Two" disabled="true">
        Second tab.
      </tc:tab>
      <tc:tab id="t13" label="Three">
        Third tab.
      </tc:tab>
    </tc:tabGroup>
  </tc:section>

  <tc:section label="Header">
    <p>This example show the different headers if the <code>label</code> or the <code>image</code> is used.</p>
    <tc:tabGroup id="tg2">
      <tc:tab id="t21" label="Only label">
        <p>Only a label is set.</p>
        <pre><code class="language-markup">&lt;tc:tab label="Only label"/></code></pre>
      </tc:tab>
      <tc:tab id="t22" label="Label with image" image="#{request.contextPath}/image/feather-leaf.png">
        <p>A label and an image are set.</p>
        <pre><code
                class="language-markup">&lt;tc:tab label="Label with image" image="\#{request.contextPath}/image/feather-leaf.png"></code></pre>
      </tc:tab>
      <tc:tab id="t23" image="#{request.contextPath}/image/feather-leaf.png">
        <p>Only an image is set.</p>
        <pre><code class="language-markup">&lt;tc:tab image="\#{request.contextPath}/image/feather-leaf.png"></code></pre>
      </tc:tab>
      <tc:tab id="t24">
        <p>Neither a label or an image are set. In this case the header gets a label with the indexnumber of the tab in
          the tabgroup.</p>
      </tc:tab>
      <tc:tab id="t25">
        <f:facet name="label">
          <tc:out value="Once: " labelLayout="skip" compact="true"/>
          <tc:out value="#{dateController.once}" labelLayout="skip" compact="true">
            <f:convertDateTime dateStyle="short" type="date"/>
          </tc:out>
        </f:facet>
        <p>
          It's also possible to set the label via a label facet. So you can use e. g. converters.
        </p>
        <p>
          If using this, don't forget to set <code>labelLayout="skip" compact="true"</code> to switch off
          the layout and boxes of the components.
        </p>
      </tc:tab>
    </tc:tabGroup>
  </tc:section>
</ui:composition>