Badge

<?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:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://java.sun.com/jsf/facelets">
  <ui:param name="title" value="#{demoBundle.badge}"/>
  <p>A simple badge can be created with <code class="language-markup">&lt;tc:badge/></code>.<br/>
    Buttons can be displayed as a badge with the <code>badge</code> markup.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:badge/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{demoBundle.tagDocUrl}/#{info.stableVersion}/tld/tc/badge.html"/>
    |
    <tc:link label="&lt;tc:button/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{demoBundle.tagDocUrl}/#{info.stableVersion}/tld/tc/button.html"/></p>

  <tc:section label="Basics">
    <p>A simple badge rendered with <code class="language-markup">&lt;tc:badge value="Simple Badge"/></code>.</p>
    <tc:badge value="Simple Badge"/>

    <tc:separator/>
    <p>Badges can placed inside buttons.</p>
    <pre><code class="language-markup">&lt;tc:button label="Unreaded Messages" omit="true" markup="primary">
  &lt;tc:badge value="9" markup="light"/>
&lt;/tc:button></code></pre>
    <tc:button label="Unreaded Messages" omit="true" markup="primary">
      <tc:badge value="9" markup="light"/>
    </tc:button>

    <tc:separator/>
    <p>Badges can be placed inside button groups. So it's possible to use them together with buttons. </p>
    <pre><code class="language-markup">&lt;tc:buttons>
  &lt;tc:badge value="badge" markup="warning"/>
  &lt;tc:button image="fa-times" markup="badge" tip="remove" omit="true"/>
&lt;/tc:buttons></code></pre>
    <tc:buttons>
      <tc:badge value="badge" markup="warning"/>
      <tc:button image="fa-times" markup="badge" tip="remove" omit="true"/>
    </tc:buttons>
    <p/>
  </tc:section>

  <tc:section label="Markups">
    <p>Colors can be set with markups. Markup <code>none</code> unset the color.
      Markup <code>pill</code> make the shape more rounded.
      If no markup is set, the secondary theme color will be applied.</p>
    <pre><code class="language-markup">&lt;tc:badge value="primary" markup="primary"/>
&lt;tc:badge value="secondary" markup="secondary"/>
&lt;tc:badge value="danger" markup="danger"/>
&lt;tc:badge value="warning" markup="warning"/>
&lt;tc:badge value="success" markup="success"/>
&lt;tc:badge value="info" markup="info"/>
&lt;tc:badge value="light" markup="light"/>
&lt;tc:badge value="dark" markup="dark"/>
&lt;tc:badge value="none" markup="none"/>
&lt;tc:badge value="pill" markup="pill"/></code></pre>

    <tc:badge value="primary" markup="primary"/>
    <tc:badge value="secondary" markup="secondary"/>
    <tc:badge value="danger" markup="danger"/>
    <tc:badge value="warning" markup="warning"/>
    <tc:badge value="success" markup="success"/>
    <tc:badge value="info" markup="info"/>
    <tc:badge value="light" markup="light"/>
    <tc:badge value="dark" markup="dark"/>
    <tc:badge value="none" markup="none"/>
    <tc:badge value="pill" markup="pill"/>

    <p/>
  </tc:section>

  <tc:section label="Buttons">
    <p>If you need badges with the functionality of buttons use the <code>badge</code> markup.</p>

    <pre><code class="language-markup">&lt;tc:button label="Badge Button" markup="badge" omit="true"/>
&lt;tc:button label="Pill" markup="badge pill" omit="true"/>
&lt;tc:button label="Warning" markup="badge warning" omit="true"/>
&lt;tc:button label="Link" markup="badge" link="https://www.apache.org/"/>
&lt;tc:button label="Disabled" markup="badge" disabled="true"/></code></pre>

    <tc:button label="Badge Button" markup="badge" omit="true"/>
    <tc:button label="Pill" markup="badge pill" omit="true"/>
    <tc:button label="Warning" markup="badge warning" omit="true"/>
    <tc:button label="Link" markup="badge" link="https://www.apache.org/"/>
    <tc:button label="Disabled" markup="badge" disabled="true"/>

    <p/>
  </tc:section>

  <tc:section label="Button group">
    <p>This example shows multiple button groups with a badge and a button.
      Clicking the button will remove the current group.</p>
    <pre><code class="language-markup">&lt;tc:buttons>
  &lt;tc:badge value="label" markup="warning"/>
  &lt;tc:button image="fa-times" markup="badge secondary"/>
&lt;/tc:buttons></code></pre>

    <tc:button label="Reset" action="#{badgeController.reset}">
      <f:ajax render="badgesButtonGroup"/>
    </tc:button>
    <tc:panel id="badgesButtonGroup">
      <c:forEach var="item" items="#{badgeController.badges}">
        <span>
          <tc:buttons>
            <tc:badge value="#{item}" markup="#{item}"/>
            <tc:button image="fa-times" markup="badge secondary" action="#{badgeController.remove(item)}">
              <f:ajax render="badgesButtonGroup"/>
            </tc:button>
          </tc:buttons>
        </span>
      </c:forEach>
    </tc:panel>
  </tc:section>
</ui:composition>