You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2022/09/26 12:03:46 UTC
[myfaces-tobago] branch tobago-5.x updated: demo: hide components on small displays (#3276)
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/tobago-5.x by this push:
new e92e84d054 demo: hide components on small displays (#3276)
e92e84d054 is described below
commit e92e84d0549923236a14a9588933e78059a5622a
Author: Udo Schnurpfeil <gi...@schnurpfeil.de>
AuthorDate: Mon Sep 26 14:03:41 2022 +0200
demo: hide components on small displays (#3276)
issue: TOBAGO-1593
---
.../content/205-style/10-style/Style_Tag.xhtml | 52 +++++++++++++
.../content/205-style/20-bootstrap/Bootstrap.xhtml | 86 ++++++++++++++++++++++
.../main/webapp/content/205-style/Styling.xhtml | 41 +++++++++++
3 files changed, 179 insertions(+)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/10-style/Style_Tag.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/10-style/Style_Tag.xhtml
new file mode 100644
index 0000000000..8d9de4bd37
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/10-style/Style_Tag.xhtml
@@ -0,0 +1,52 @@
+<?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>
+ <tc:link label="Tag Library Documentation" image="#{request.contextPath}/image/feather-leaf.png"
+ link="#{apiController.tobagoTld}/tc/style.html"/>
+ </p>
+ <p>
+ The <code><tc:style></code> tag is used inside visual components (the component implements the
+ <tc:link label="Visual" image="#{request.contextPath}/image/feather-leaf.png"
+ link="#{apiController.apiBase}/latest/org/apache/myfaces/tobago/component/Visual.html"/>
+ interface).
+ </p>
+ <ul>
+ <li>
+ With the attribute <code>customClass</code> a CSS class can be set.
+ </li>
+ <li>
+ The attribute <code>file</code> includes a CSS file into the page.
+ </li>
+ <li>
+ Apart from the generic attributes <code>binding</code> and <code>id</code>
+ all other attributes are CSS properties. These properties will be set in
+ the parent component with respect to
+ <tc:link label="Content Security Policy"
+ outcome="/content/280-security/05-csp/Content_Security_Policy.xhtml"/> (CSP).
+ </li>
+ </ul>
+
+</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/20-bootstrap/Bootstrap.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/20-bootstrap/Bootstrap.xhtml
new file mode 100644
index 0000000000..241b21eb47
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/20-bootstrap/Bootstrap.xhtml
@@ -0,0 +1,86 @@
+<?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">
+
+ <tc:section label="Example: Classes for Displaying Dependent on Screen Size">
+
+ <tc:link label="Bootstrap: Display property" image="bi-bootstrap"
+ link="https://getbootstrap.com/docs/5.2/utilities/display/"/>
+
+ <demo-highlight language="markup"><tc:badge value="small">
+ <tc:style customClass="d-none d-sm-inline"/>
+ </tc:badge>
+ </demo-highlight>
+
+ <p>
+ Resizing the browser window shows and hides some components.
+ </p>
+
+ <tc:badge value="normal"/>
+ <tc:badge value="small">
+ <tc:style customClass="d-none d-sm-inline"/>
+ </tc:badge>
+ <tc:badge value="medium">
+ <tc:style customClass="d-none d-md-inline"/>
+ </tc:badge>
+ <tc:badge value="large">
+ <tc:style customClass="d-none d-lg-inline"/>
+ </tc:badge>
+ <tc:badge value="xl">
+ <tc:style customClass="d-none d-xl-inline"/>
+ </tc:badge>
+ <tc:badge value="xxl">
+ <tc:style customClass="d-none d-xxl-inline"/>
+ </tc:badge>
+
+ <tc:sheet id="sheet" value="#{sheetController.solarList}" var="object" rows="4">
+ <tc:style maxHeight="500px"/>
+ <tc:column label="normal">
+ <tc:out value="#{object.name}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="small">
+ <tc:style customClass="d-none d-sm-table-cell"/>
+ <tc:out value="#{object.orbit}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="medium">
+ <tc:style customClass="d-none d-md-table-cell"/>
+ <tc:out value="#{object.period}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="large">
+ <tc:style customClass="d-none d-lg-table-cell"/>
+ <tc:out value="#{object.distance}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="xl">
+ <tc:style customClass="d-none d-xl-table-cell"/>
+ <tc:out value="#{object.discoverer}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="xxl">
+ <tc:style customClass="d-none d-xxl-table-cell"/>
+ <tc:out value="#{object.discoverYear}" labelLayout="skip"/>
+ </tc:column>
+ </tc:sheet>
+
+ </tc:section>
+
+</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/Styling.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/Styling.xhtml
new file mode 100644
index 0000000000..0a01e0695d
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/205-style/Styling.xhtml
@@ -0,0 +1,41 @@
+<?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>
+ All themes shipped with Tobago based on
+ <tc:link label="Bootstrap" image="bi-bootstrap"/> (since Tobago 3).
+ </p>
+
+ <p>
+ To customize the styles, Bootstrap classes are preferred.
+ Tobago classes, application based classes or 3rd party classes and style may be used.
+ </p>
+
+ <p>
+ <tc:badge markup="warning" value="Warning:"/>
+ In general, style customization should be used sparingly to make major updates easier.
+ </p>
+
+</ui:composition>