| <?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: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"><tc:toolBar/></code> and |
| <code class="language-markup"><tc:toolBarCommand/></code> are deprecated. |
| To replace a toolbar in the header of a component use |
| <tc:link label="Buttons" |
| outcome="/content/20-component/040-command/20-buttons/Buttons.xhtml"/> or |
| <tc:link label="Links" |
| outcome="/content/20-component/040-command/25-links/Links.xhtml"/> instead. |
| To replace a plain toolbar, use |
| <tc:link label="Bar" |
| outcome="/content/20-component/050-container/60-bar/Bar.xhtml"/>.</p> |
| |
| <tc:section label="Content Box Header"> |
| <p>The first box show the deprecated version of a toolbar. |
| The second and the third one are solutions with buttons and links.</p> |
| |
| <p>Instead of <code class="language-markup"><f:facet name="toolBar"/></code> |
| use <code class="language-markup"><f:facet name="bar"/></code>.</p> |
| <p>Instead of <code class="language-markup"><tc:toolBar/></code> |
| use <code class="language-markup"><tc:buttons/></code> |
| or <code class="language-markup"><tc:links/></code>.</p> |
| <p>Instead of <code class="language-markup"><tc:toolBarCommand/></code> |
| use <code class="language-markup"><tc:button/></code> |
| or <code class="language-markup"><tc:link/></code>.</p> |
| |
| <tc:box label="Buttons"> |
| <f:facet name="bar"> |
| <tc:buttons> |
| <tc:button label="Text Button"/> |
| <tc:button label="Image Button" image="fa-cube"/> |
| <tc:button label="Dropdown" omit="true"> |
| <tc:link label="Action 1"/> |
| <tc:link label="Action 2"/> |
| <tc:link label="Action 3"/> |
| </tc:button> |
| </tc:buttons> |
| </f:facet> |
| <p>Content</p> |
| </tc:box> |
| <tc:box label="Links"> |
| <f:facet name="bar"> |
| <tc:links> |
| <tc:link label="Text Link"/> |
| <tc:link label="Image Link" image="fa-cube"/> |
| <tc:link label="Dropdown" omit="true"> |
| <tc:link label="Action 1"/> |
| <tc:link label="Action 2"/> |
| <tc:link label="Action 3"/> |
| </tc:link> |
| </tc:links> |
| </f:facet> |
| <p>Content</p> |
| </tc:box> |
| </tc:section> |
| |
| <tc:section label="Plain toolbar"> |
| <p>For a plain toolbar use the <code class="language-markup"><tc:bar/></code> tag.</p> |
| <tc:section label="Deprecated"> |
| <demo-highlight language="markup"><tc:toolBar> |
| <tc:toolBarCommand label="Text Button"/> |
| <tc:toolBarCommand label="Image Button" image="fa-cube"/> |
| <tc:in placeholder="Search"/> |
| </tc:toolBar></demo-highlight> |
| </tc:section> |
| |
| <tc:section label="Bar"> |
| <demo-highlight language="markup"><tc:bar> |
| <tc:buttons> |
| <tc:button label="Text Button"/> |
| <tc:button label="Image Button" image="fa-cube"/> |
| </tc:buttons> |
| <tc:flowLayout textAlign="right"> |
| <tc:button label="Dropdown" omit="true"> ... </tc:button> |
| <tc:in placeholder="Search"/> |
| </tc:flowLayout> |
| </tc:bar></demo-highlight> |
| <tc:bar> |
| <tc:buttons> |
| <tc:button label="Text Button"/> |
| <tc:button label="Image Button" image="fa-cube"/> |
| </tc:buttons> |
| <tc:flowLayout textAlign="right"> |
| <tc:button label="Dropdown" omit="true"> |
| <tc:link label="Action 1"/> |
| <tc:link label="Action 2"/> |
| <tc:link label="Action 3"/> |
| </tc:button> |
| <tc:in placeholder="Search"/> |
| </tc:flowLayout> |
| </tc:bar> |
| </tc:section> |
| </tc:section> |
| </ui:composition> |