tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/Bar.xhtml

<?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"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

  <p><code class="language-markup">&lt;tc:bar/></code> is a container which display elements in one single line
    as long as there is enough space.
    If space is too narrow, the bar collapse. Hidden items are accessible by clicking on the bar-icon.</p>
  <p>Additionally the facet <code class="language-markup">&lt;f:facet name="brand"/></code> can be added.
    It shows the 'brand', a logo, text or both on the left site of the bar.</p>
  <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
           link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/bar.html"/>

  <tc:section label="Example">
    <p>This example show a dark bar with a 'brand' facet, a menu and right side content inside an 'after' facet.</p>
    <p>The bar should collapse on large size, so the markup <code>large</code> is added.</p>
    <demo-highlight language="markup">&lt;tc:bar markup="large, dark">
  &lt;tc:style customClass="bg-dark"/>
  &lt;f:facet name="brand">
    &lt;tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
  &lt;/f:facet>
  &lt;tc:links>
    &lt;tc:link label="Link One"/>
    &lt;tc:link label="Link Two"/>
  &lt;/tc:links>
  &lt;f:facet name="after">
    &lt;tc:flexLayout columns="1fr  auto">
      &lt;tc:in placeholder="Search" labelLayout="skip"/>
      &lt;tc:button label="Go"/>
    &lt;/tc:flexLayout>
  &lt;/f:facet>
&lt;/tc:bar></demo-highlight>
    <tc:bar markup="large, dark">
      <tc:style customClass="bg-dark"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:in placeholder="Search" labelLayout="skip"/>
          <tc:button label="Go"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
  </tc:section>

  <tc:section label="Centered Menu Example">
    <p>This example shows how to center content.</p>
    <demo-highlight language="markup">&lt;tc:bar markup="large, dark">
  &lt;tc:style customClass="bg-dark"/>
  &lt;f:facet name="brand">
    &lt;tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
  &lt;/f:facet>
  &lt;div class="ml-auto">
    // centered content
  &lt;/div>
  &lt;f:facet name="after">
    // right side content
  &lt;/f:facet>
&lt;/tc:bar></demo-highlight>
    <tc:bar markup="large, dark">
      <tc:style customClass="bg-dark"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <div class="ml-auto">
        <tc:links>
          <tc:link label="Link One"/>
          <tc:link label="Link Two"/>
        </tc:links>
      </div>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:button label="Button"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
  </tc:section>

  <tc:section label="Bar with dropdown">
    <p>An example of a dropdown menu with radio entries.</p>
    <tc:bar markup="dark">
      <tc:style customClass="bg-dark"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link omit="true" label="Radio">
          <tc:selectOneRadio value="#{currencyController.radioValue}">
            <tc:selectItems value="#{currencyController.currencyItems}"
                            var="currency" itemValue="#{currency.currencyCode}" itemLabel="#{currency.displayName}"
                            itemImage="#{request.contextPath}/data/#{currency.currencyCode}-14.png"/>
          </tc:selectOneRadio>
        </tc:link>
      </tc:links>
    </tc:bar>
  </tc:section>

  <tc:section id="backgroundColor" label="Background Color">
    <p>Some examples with different background colors.</p>
    <p>For dark backgrounds, add the <code>dark</code> markup value.<br/>
      For light background choose <code>light</code> markup.</p>
    <demo-highlight language="markup">&lt;tc:bar markup="large, dark">
  &lt;tc:style customClass="bg-dark"/>
  ...
&lt;/tc:bar>
&lt;tc:bar markup="large, light">
  &lt;tc:style customClass="bg-light"/>
  ...
&lt;/tc:bar>
&lt;tc:bar markup="large, dark">
  &lt;tc:style customClass="bg-danger"/>
  ...
&lt;/tc:bar>
&lt;tc:bar markup="large, dark">
  &lt;tc:style customClass="bg-primary"/>
  ...
&lt;/tc:bar>
&lt;tc:bar markup="large, light">
  &lt;tc:style customClass="bg-warning"/>
  ...
&lt;/tc:bar></demo-highlight>
    <tc:bar markup="large, dark">
      <tc:style customClass="bg-dark"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:in placeholder="Search" labelLayout="skip"/>
          <tc:button label="Go"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
    <tc:bar markup="large, light">
      <tc:style customClass="bg-light"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:in placeholder="Search" labelLayout="skip"/>
          <tc:button label="Go"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
    <tc:bar markup="large, dark">
      <tc:style customClass="bg-danger"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:in placeholder="Search" labelLayout="skip"/>
          <tc:button label="Go"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
    <tc:bar markup="large, dark">
      <tc:style customClass="bg-primary"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:in placeholder="Search" labelLayout="skip"/>
          <tc:button label="Go"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
    <tc:bar markup="large, light">
      <tc:style customClass="bg-warning"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
      <f:facet name="after">
        <tc:flexLayout columns="1fr  auto">
          <tc:in placeholder="Search" labelLayout="skip"/>
          <tc:button label="Go"/>
        </tc:flexLayout>
      </f:facet>
    </tc:bar>
  </tc:section>

  <tc:section label="Expand Sizes">
    <p>Examples for the different expand sizes.<br/>
      Markup values are: <code>small</code>, <code>medium</code>, <code>large</code>, <code>extraLarge</code></p>
    <p>If no markup is set, the bar never collapse.</p>
    <demo-highlight language="markup">&lt;tc:bar markup="light">
  ...
&lt;/tc:bar>
&lt;tc:bar markup="small, light">
  ...
&lt;/tc:bar>
&lt;tc:bar markup="medium, light">
  ...
&lt;/tc:bar>
&lt;tc:bar markup="large, light">
  ...
&lt;/tc:bar>
&lt;tc:bar markup="extraLarge, light">
  ...
&lt;/tc:bar></demo-highlight>
    <tc:bar markup="light">
      <tc:style customClass="bg-light"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
    </tc:bar>
    <tc:bar markup="small, light">
      <tc:style customClass="bg-light"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
    </tc:bar>
    <tc:bar markup="medium, light">
      <tc:style customClass="bg-light"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
    </tc:bar>
    <tc:bar markup="large, light">
      <tc:style customClass="bg-light"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
    </tc:bar>
    <tc:bar markup="extraLarge, light">
      <tc:style customClass="bg-light"/>
      <f:facet name="brand">
        <tc:link label="BRAND" outcome="/content/10-intro/Intro.xhtml"/>
      </f:facet>
      <tc:links>
        <tc:link label="Link One"/>
        <tc:link label="Link Two"/>
      </tc:links>
    </tc:bar>
  </tc:section>
</ui:composition>