You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2017/09/14 10:42:22 UTC
[myfaces-tobago] branch master updated: TOBAGO-1759 Update
Bootstrap to 4.0.0 beta 1 (from alpha 6) * update demo
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new e7dc83a TOBAGO-1759 Update Bootstrap to 4.0.0 beta 1 (from alpha 6) * update demo
e7dc83a is described below
commit e7dc83a968b72b2e59b9e818a0d61c083a1614f4
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Sep 14 12:38:07 2017 +0200
TOBAGO-1759 Update Bootstrap to 4.0.0 beta 1 (from alpha 6)
* update demo
---
.../20-component/050-container/60-bar/bar.xhtml | 193 +++++++++++++++++++--
1 file changed, 177 insertions(+), 16 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
index 0afb53b..fa93b39 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/050-container/60-bar/bar.xhtml
@@ -33,8 +33,11 @@
link="#{demoBundle.tagDocUrl}/#{info.stableVersion}/tld/tc/bar.html"/>
<tc:section label="Example">
- <p>This example show a Bar with a 'brand' facet, a menu and right sided content inside an 'after' facet.</p>
+ <p>This example show a dark bar with a 'brand' facet, a menu and right sided content inside an 'after' facet.</p>
+ <p>You need to set the CSS class <code class="language-css">.navbar-expand{-sm|-md|-lg|-xl}</code> with the
+ <code class="language-markup"><tc:style></code> attribute.</p>
<pre><code class="language-markup"><tc:bar>
+ <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" link="/"/>
</f:facet>
@@ -50,6 +53,7 @@
</f:facet>
</tc:bar></code></pre>
<tc:bar>
+ <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
</f:facet>
@@ -69,6 +73,7 @@
<tc:section label="Centered Menu Example">
<p>This example shows how to center content.</p>
<pre><code class="language-markup"><tc:bar>
+ <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" link="/"/>
</f:facet>
@@ -80,6 +85,7 @@
</f:facet>
</tc:bar></code></pre>
<tc:bar>
+ <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
</f:facet>
@@ -100,32 +106,118 @@
<tc:section label="Bar with dropdown">
<p>An example of a dropdown menu with radio entries.</p>
<tc:bar>
+ <tc:style customClass="navbar-dark bg-dark navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml"/>
</f:facet>
- <tc:link omit="true" label="Radio">
- <tc:selectOneRadio value="#{demoController.radioValue}">
- <tc:selectItems value="#{demoController.currencyItems}"
- var="currency" itemValue="#{currency.currencyCode}" itemLabel="#{currency.displayName}"
- itemImage="#{request.contextPath}/data/#{currency.currencyCode}-14.png"/>
- </tc:selectOneRadio>
- </tc:link>
+ <tc:links>
+ <tc:link omit="true" label="Radio">
+ <tc:selectOneRadio value="#{demoController.radioValue}">
+ <tc:selectItems value="#{demoController.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 label="Styles">
- <p>You can use bootstrap classes to style the bar.</p>
+ <p>Some examples to style the bar.</p>
<pre><code class="language-markup"><tc:bar>
- <tc:style customClass="navbar-light bg-faded" />
- <f:facet name="brand">
- <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
- <tc:style customClass="navbar-brand"/>
- </tc:link>
- </f:facet>
+ <tc:style customClass="navbar-dark bg-dark bg navbar-expand-lg"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-lg"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-dark bg-primary navbar-expand-lg"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-light bg-warning navbar-expand-lg"/>
...
</tc:bar></code></pre>
<tc:bar>
- <tc:style customClass="navbar-light bg-faded" />
+ <tc:style customClass="navbar-dark bg-dark bg navbar-expand-lg"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:in placeholder="Search" labelLayout="skip"/>
+ <tc:button label="Go"/>
+ </tc:flexLayout>
+ </f:facet>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-lg"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:in placeholder="Search" labelLayout="skip"/>
+ <tc:button label="Go"/>
+ </tc:flexLayout>
+ </f:facet>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:in placeholder="Search" labelLayout="skip"/>
+ <tc:button label="Go"/>
+ </tc:flexLayout>
+ </f:facet>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-dark bg-primary navbar-expand-lg"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ <f:facet name="after">
+ <tc:flexLayout columns="*; auto">
+ <tc:in placeholder="Search" labelLayout="skip"/>
+ <tc:button label="Go"/>
+ </tc:flexLayout>
+ </f:facet>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-light bg-warning navbar-expand-lg"/>
<f:facet name="brand">
<tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
<tc:style customClass="navbar-brand"/>
@@ -143,4 +235,73 @@
</f:facet>
</tc:bar>
</tc:section>
+
+ <tc:section label="Expand Sizes">
+ <p>Examples for the different expand sizes.</p>
+
+ <pre><code class="language-markup"><tc:bar>
+ <tc:style customClass="navbar-dark bg-dark bg navbar-expand-sm"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-md"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-dark bg-danger navbar-expand-lg"/>
+ ...
+</tc:bar>
+<tc:bar>
+ <tc:style customClass="navbar-dark bg-primary navbar-expand-xl"/>
+ ...
+</tc:bar></code></pre>
+ <tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-sm"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-md"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-lg"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ </tc:bar>
+ <tc:bar>
+ <tc:style customClass="navbar-light bg-light navbar-expand-xl"/>
+ <f:facet name="brand">
+ <tc:link label="BRAND" outcome="/content/10-intro/intro.xhtml">
+ <tc:style customClass="navbar-brand"/>
+ </tc:link>
+ </f:facet>
+ <tc:links>
+ <tc:link label="Link One"/>
+ <tc:link label="Link Two"/>
+ </tc:links>
+ </tc:bar>
+ </tc:section>
</ui:composition>
--
To stop receiving notification emails like this one, please contact
['"commits@myfaces.apache.org" <co...@myfaces.apache.org>'].