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/06/23 15:42:24 UTC
[royale-asjs] branch develop updated: tourdejewel: add DateField
sizing examples
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 a7a15a5 tourdejewel: add DateField sizing examples
a7a15a5 is described below
commit a7a15a543c9327380356a7556923c063fad86f0d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jun 23 17:42:12 2020 +0200
tourdejewel: add DateField sizing examples
---
.../src/main/royale/DateComponentsPlayGround.mxml | 83 +++++++++++++++++++++-
1 file changed, 82 insertions(+), 1 deletion(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
index 9865bae..c35f090 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/DateComponentsPlayGround.mxml
@@ -161,7 +161,7 @@ limitations under the License.
<j:Label multiline="true" html="<strong>DateChooser selected date:</strong> {dateChooserSelectedDate.selectedDate}" width="275"/>
</j:Card>
</j:GridCell>
-
+
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel DateField Disabled"/>
@@ -180,6 +180,87 @@ limitations under the License.
</j:DateChooser>
</j:Card>
</j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Sizing" className="secondary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Following <b>DateField</b> size is not set, so it defaults to 200px.</p>]]></j:html>
+ </j:Label>
+ <j:DateField>
+ <j:beads>
+ <j:DateFieldTextPrompt prompt="{promptText}"/>
+ </j:beads>
+ </j:DateField>
+
+ <html:Hr width="100%"/>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Following <b>DateField</b> size is set to 140 pixels.</p>]]></j:html>
+ </j:Label>
+ <j:DateField width="140">
+ <j:beads>
+ <j:DateFieldTextPrompt prompt="{promptText}"/>
+ </j:beads>
+ </j:DateField>
+
+ <html:Hr width="100%"/>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Following <b>DateField</b> size is set to 100%.</p>]]></j:html>
+ </j:Label>
+ <j:DateField width="100%">
+ <j:beads>
+ <j:DateFieldTextPrompt prompt="{promptText}"/>
+ </j:beads>
+ </j:DateField>
+
+ <html:Hr width="100%"/>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Following <b>DateField</b> size is set to 50%.</p>]]></j:html>
+ </j:Label>
+ <j:DateField width="50%">
+ <j:beads>
+ <j:DateFieldTextPrompt prompt="{promptText}"/>
+ </j:beads>
+ </j:DateField>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Resizing" className="secondary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Following <b>DateField</b> width size is managed by a slider.</p>]]></j:html>
+ </j:Label>
+
+ <j:DateField localId="df3">
+ <j:beads>
+ <j:DateFieldTextPrompt prompt="{promptText}"/>
+ </j:beads>
+ </j:DateField>
+
+ </j:CardPrimaryContent>
+ <j:CardActions itemsVerticalAlign="itemsCenter">
+ <j:beads>
+ <j:VerticalLayout gap="3"/>
+ </j:beads>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
+ <j:Label text="width: {df3.width}px"/>
+ <j:HSlider width="250" value="200" minimum="100" maximum="400" valueChange="df3.width = event.target.value;"/>
+ </j:HGroup>
+ </j:CardActions>
+ </j:Card>
+ </j:GridCell>
</j:Grid>