You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/04/25 18:26:42 UTC
[royale-asjs] branch develop updated: tourdejewel: add a tabbar
example with icon and label in horizontal layout
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new c23a2a8 tourdejewel: add a tabbar example with icon and label in horizontal layout
c23a2a8 is described below
commit c23a2a8c118c9885344036cfbcb18a077921c9e7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Apr 25 20:26:35 2019 +0200
tourdejewel: add a tabbar example with icon and label in horizontal layout
---
.../src/main/resources/jewel-example-styles.css | 14 ++++++++++----
.../TourDeJewel/src/main/royale/TabBarPlayGround.mxml | 6 +++---
.../components/ExampleAndSourceCodeTabbedSectionContent.as | 2 +-
...Renderer.mxml => TabBarHorizontalIconItemRenderer.mxml} | 4 ++--
...emRenderer.mxml => TabBarVerticalIconItemRenderer.mxml} | 0
5 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
index 69a8455..7305a00 100644
--- a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -50,16 +50,22 @@
{
IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
}
-.tabBarIconItemRenderer
-{
- IItemRenderer: ClassReference("itemRenderers.TabBarIconItemRenderer");
-}
.navIconLinkItemRenderer .fonticon
{
margin-right: 24px;
}
+.tabBarVerticalIconItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.TabBarVerticalIconItemRenderer");
+}
+
+.tabBarHorizontalIconItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.TabBarHorizontalIconItemRenderer");
+}
+
.jewel.drawerheader::before
{
/*padding-top: 9 / 16 * 100%;*/
diff --git a/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
index 09b6e26..bde8257 100644
--- a/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
@@ -92,10 +92,10 @@ limitations under the License.
<html:H3 text="Jewel TabBar"/>
<j:Label multiline="true">
- <j:html><![CDATA[This Tab Bar has an <strong>ItemRenderer</strong> composed by an icon and a label. the ItemRenderer is asigned vía className <strong>tabBarIconItemRenderer</strong>.]]></j:html>
+ <j:html><![CDATA[This Tab Bar has an <strong>ItemRenderer</strong> composed by an icon and a label. the ItemRenderer is asigned vía className <strong>tabBarVerticalIconItemRenderer</strong>.]]></j:html>
</j:Label>
- <j:TabBar localId="tabbar" width="100%" className="tabBarIconItemRenderer"
+ <j:TabBar localId="tabbar" width="100%" className="tabBarVerticalIconItemRenderer"
dataProvider="{tabBarData}">
<j:beads>
<j:AssignTabContent selectedContentProperty="href">
@@ -138,7 +138,7 @@ limitations under the License.
<j:Label text="This Tab Bar has an ItemRenderer composed by just a label."/>
- <j:TabBar localId="tabbar2" selectedIndex="2">
+ <j:TabBar localId="tabbar2" selectedIndex="2" className="tabBarHorizontalIconItemRenderer">
<j:beads>
<js:ConstantBinding sourcePropertyName="tabBarData" destinationPropertyName="dataProvider"/>
</j:beads>
diff --git a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
index f92f1a5..b1bfbe1 100644
--- a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
+++ b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
@@ -88,7 +88,7 @@ package components
]);
tabbar = new TabBar();
- tabbar.className = "tabBarIconItemRenderer";
+ tabbar.className = "tabBarVerticalIconItemRenderer";
tabbar.addEventListener(Event.CHANGE, changeHandler);
tabbar.dataProvider = tabBarNavigation;
$addElement(tabbar);
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
similarity index 95%
copy from examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
copy to examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
index 8c8e370..0d37d24 100644
--- a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarHorizontalIconItemRenderer.mxml
@@ -39,11 +39,11 @@ limitations under the License.
<js:ItemRendererDataBinding />
</j:beads>
- <j:VGroup itemsHorizontalAlign="itemsCentered">
+ <j:HGroup gap="4" itemsHorizontalAlign="itemsCentered">
<js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true"
visible="{tabButton ? tabButton.icon != null : false}"/>
<html:Span text="{tabButton ? tabButton.label : ''}"/>
- </j:VGroup>
+ </j:HGroup>
</j:TabBarButtonInidicatorRestrictedToContentItemRenderer>
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
similarity index 100%
rename from examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
rename to examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml