tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/Collapsible.xhtml

<!--
 * 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"
                xmlns:demo="http://myfaces.apache.org/tobago/example/demo">

  <p>
    <span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_DANGER')}">Warning!</span>
    <b>This feature is preliminary and may be subject of change in later versions!</b>
  </p>

  <p>The collapsible concept is the base for
    <tc:link label="Box" outcome="/content/20-component/050-container/10-box/Box.xhtml"/>,
    <tc:link label="Popup" outcome="/content/20-component/060-popup/Popup.xhtml"/>,
    <tc:link label="Panel" outcome="/content/20-component/050-container/20-panel/Panel.xhtml"/>
    and
    <tc:link label="Section"
             outcome="/content/20-component/050-container/40-section/Section.xhtml"/>.
    It determines how parts or whole components are shown or hidden.
    For example, a popup is hidden completely while for box only the content
    could be hidden.</p>

  <tc:section label="States">
    <p>There are four possible states - visible, hidden, absent and none.<br/>
    The value 'none' deactivate this feature and is the default for box, panel and section.</p>
    <p>The (not-'none') states are explained using the following boxes.</p>
    <p>The 'visible' state show the content of the box like you expected.
      <br/>
      The 'hidden' state hide the content via CSS. You can see is still in the source code.
      This also means that hidden content would be validated when submitted, e. g. a required input field.
      <br/>
      The 'absent' state don't even render the content of the box.</p>
    <tc:segmentLayout medium="4seg 4seg 4seg">
      <tc:box label="Visible" collapsed="false">
        <p>Content</p>
      </tc:box>
      <tc:box label="Hidden" collapsed="true" collapsedMode="hidden">
        <p>Content</p>
      </tc:box>
      <tc:box label="Absent" collapsed="true" collapsedMode="absent">
        <p>Content</p>
      </tc:box>
    </tc:segmentLayout>
  </tc:section>

  <tc:section label="Attributes">
    <p>The state can be changed by the server with the attributes
      <code>collapsed</code> and <code>collapsedMode</code>.</p>
    <tc:section label="collapsed">
      <p>The <code>collapsed</code> attribute is of type boolean. The default value is 'false'.</p>
      <ul>
        <li><code>false</code> (default): The state is 'visible'.</li>
        <li><code>true</code>: The state is 'hidden' or 'absent', depending on the
          <code>collapsedMode</code> attribute.
        </li>
      </ul>
    </tc:section>
    <tc:section label="collapsedMode">
      <p>The attribute <code>collapsedMode</code> determine the behavior of a hidden component.
        Possible values are <code>absent</code> which is the default and <code>hidden</code>.
        It has only an effect if <code>collapsed="true"</code>.</p>
      <ul>
        <li><code>absent</code> (default for popup): Hidden components have the state 'hidden'.</li>
        <li><code>hidden</code>: Hidden components have the state 'absent'.</li>
      </ul>
    </tc:section>
  </tc:section>

  <tc:section label="Operation">
    <demo-highlight language="markup">&lt;tc:operation name="show|hide" for="[ID]"/></demo-highlight>
    <p>Operations can be used to change the state client side. It can be placed
      within a <code class="language-markup">&lt;tc:button/></code> tag or a
      <code class="language-markup">&lt;tc:link/></code> tag.
      The name of the transition can be set in the <code>name</code> attribute. Values are 'show' and 'hide'.</p>
    <ul>
      <li><code>show</code>: Change the state to 'visible'.</li>
      <li><code>hide</code>: Set the state to 'absent' or 'hidden', depending on <code>collapsedMode</code>.</li>
    </ul>
    <p>The <code>for</code> attribute has to contain the ID of the component
      on which the transition should be executed.
      Both attributes are mandatory.</p>
  </tc:section>
</ui:composition>