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 2020/09/01 18:58:31 UTC
[royale-asjs] branch develop updated: tour de jewel: tabbat mobile
layout example
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 aca880b tour de jewel: tabbat mobile layout example
aca880b is described below
commit aca880b2b2badd2c16216deb60d5e989c1e58fe9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Sep 1 20:58:21 2020 +0200
tour de jewel: tabbat mobile layout example
---
.../src/main/royale/TabBarPlayGround.mxml | 63 ++++++++++++++++++++--
1 file changed, 58 insertions(+), 5 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/TabBarPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
index 1cb4cf1..2a407c2 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
@@ -50,11 +50,23 @@ limitations under the License.
private function updateTabBarData():void
{
tabBarData = new ArrayList([
- new TabBarButtonVO("Other 1", "tab1", MaterialIconType.MORE),
- new TabBarButtonVO("Other 2", "tab2", MaterialIconType.PAGES),
- new TabBarButtonVO("Other 3", "tab3", MaterialIconType.ZOMM_IN)
+ new TabBarButtonVO("Other Tab 1", "tab1", MaterialIconType.MORE),
+ new TabBarButtonVO("Other Tab 2", "tab2", MaterialIconType.PAGES),
+ new TabBarButtonVO("Other Tab 3", "tab3", MaterialIconType.ZOMM_IN)
]);
}
+
+ private var _tabBarDataOptional:ArrayList = new ArrayList([
+ new TabBarButtonVO("Other Tab 1", "tab1", MaterialIconType.MORE),
+ new TabBarButtonVO("Other Tab 2", "tab2", MaterialIconType.PAGES),
+ new TabBarButtonVO("Other Tab 3", "tab3", MaterialIconType.ZOMM_IN)
+ ]);
+
+ [Bindable]
+ public function get tabBarDataOptional():ArrayList
+ {
+ return _tabBarDataOptional;
+ }
private var _scrolltabBarData:ArrayList = new ArrayList([
new TabBarButtonVO("Tab One", "tabone", MaterialIconType.ACCESSIBILITY),
@@ -237,10 +249,10 @@ limitations under the License.
</j:CardHeader>
<j:CardPrimaryContent width="100%" height="100%">
<j:Label multiline="true">
- <j:html><![CDATA[This <b>TabBar</b> layout the buttons vertically. We add the tab content to the right side.]]></j:html>
+ <j:html><![CDATA[This <b>TabBar</b> layout the buttons vertically. We add the tab content to the right side. Also use restricted indicator to content.]]></j:html>
</j:Label>
<j:HGroup gap="3" width="100%" height="100%">
- <j:TabBar className="tabBarHorizontalIconItemRenderer" dataProvider="{tabBarData}"
+ <j:TabBar className="tabBarVerticalIconItemRenderer" dataProvider="{tabBarDataOptional}"
localId="vtabbar" selectedIndex="2">
<j:beads>
<j:VerticalLayout/>
@@ -365,6 +377,47 @@ limitations under the License.
</j:Card>
</j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Mobile Layout (Bottom position and indicator on top)"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent itemsHorizontalAlign="itemsCenter">
+ <j:Label multiline="true" width="100%">
+ <j:html><![CDATA[This <b>TabBar</b> is positioned below the content and the indicator is configured to be on top.]]></j:html>
+ </j:Label>
+
+ <j:VGroup width="400" height="600">
+ <j:TabBarContent selectedContent="{(bottomTabbar.selectedItem as TabBarButtonVO).hash}"
+ className="side-tab-content" width="100%" height="100%">
+ <j:beads>
+ <j:Paddings padding="15"/>
+ </j:beads>
+ <j:SectionContent name="tab1" width="100%" height="200">
+ <j:Label text="Tab Content 1"/>
+ </j:SectionContent>
+ <j:SectionContent name="tab2" width="100%" height="200">
+ <j:Label text="Tab Content 2"/>
+ </j:SectionContent>
+ <j:SectionContent name="tab3" width="100%" height="200">
+ <j:Label text="Tab Content 3"/>
+ </j:SectionContent>
+ <j:SectionContent name="tab4" width="100%" height="200">
+ <j:Label text="Tab Content 4"/>
+ </j:SectionContent>
+ </j:TabBarContent>
+ <j:TabBar localId="bottomTabbar" selectedIndex="1" width="100%"
+ className="tabBarVerticalIconItemRenderer" dataProvider="{tabBarData}">
+ <j:beads>
+ <j:TabBarPresentationModel indicatorToOppositeSide="true"/>
+ </j:beads>
+ </j:TabBar>
+ </j:VGroup>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
</j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>