Repository: flex-asjs Updated Branches: refs/heads/develop bde25ebea -> 8b1093013
Update MDL Example - MDL Grid should have at least one MDL GridCell Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/65b7eb99 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/65b7eb99 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/65b7eb99 Branch: refs/heads/develop Commit: 65b7eb99497532dadd8bd91f9932e3904ef6987b Parents: d526a4a Author: piotrz <pio...@apache.org> Authored: Sun Aug 20 23:47:21 2017 +0200 Committer: piotrz <pio...@apache.org> Committed: Sun Aug 20 23:47:21 2017 +0200 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Badges.mxml | 53 +++--- .../MDLExample/src/main/flex/Buttons.mxml | 176 ++++++++++--------- .../flexjs/MDLExample/src/main/flex/Chips.mxml | 19 +- .../MDLExample/src/main/flex/Dialogs.mxml | 14 +- .../MDLExample/src/main/flex/DropDownList.mxml | 5 +- .../MDLExample/src/main/flex/Footers.mxml | 10 +- .../flexjs/MDLExample/src/main/flex/Grids.mxml | 5 - .../flexjs/MDLExample/src/main/flex/Icons.mxml | 58 +++--- .../flexjs/MDLExample/src/main/flex/Lists.mxml | 171 +++++++----------- .../flexjs/MDLExample/src/main/flex/Menus.mxml | 37 ++-- .../MDLExample/src/main/flex/Sliders.mxml | 11 +- .../MDLExample/src/main/flex/Snackbar.mxml | 13 +- .../flexjs/MDLExample/src/main/flex/Tables.mxml | 123 ++++++------- .../flexjs/MDLExample/src/main/flex/Tabs.mxml | 4 +- .../MDLExample/src/main/flex/TextFields.mxml | 116 ++++++------ .../MDLExample/src/main/flex/Toggles.mxml | 90 +++++----- 16 files changed, 443 insertions(+), 462 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Badges.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Badges.mxml b/examples/flexjs/MDLExample/src/main/flex/Badges.mxml index 11ee536..581f41b 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Badges.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Badges.mxml @@ -32,30 +32,35 @@ limitations under the License. <js:ContainerDataBinding/> </mdl:beads> - <mdl:Grid width="50" style="margin:20px"> - <js:Div style="color: rgba(0, 0, 0, 0.24);" className="material-icons" text="{MaterialIconType.ACCOUNT_BOX}"> - <js:beads> - <mdl:Badge dataBadge="2" overlap="true"/> - </js:beads> - </js:Div> - - <js:Span text="Inbox" style="color: rgba(0, 0, 0, 0.24);" className="mdl-badge"> - <js:beads> - <mdl:Badge dataBadge="4"/> - </js:beads> - </js:Span> - - <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org";> - <js:beads> - <mdl:Badge dataBadge="1"/> - </js:beads> - </js:A> - - <js:A text="Badge No Background" href="http://flex.apache.org";> - <js:beads> - <mdl:Badge dataBadge="5" noBackground="true"/> - </js:beads> - </js:A> + <mdl:Grid> + <mdl:style> + <js:AllCSSStyles maxWidth="500"/> + </mdl:style> + <mdl:GridCell column="12"> + <js:Div style="color: rgba(0, 0, 0, 0.24);" className="material-icons" text="{MaterialIconType.ACCOUNT_BOX}"> + <js:beads> + <mdl:Badge dataBadge="2" overlap="true"/> + </js:beads> + </js:Div> + + <js:Span text="Inbox" style="color: rgba(0, 0, 0, 0.24);" className="mdl-badge"> + <js:beads> + <mdl:Badge dataBadge="4"/> + </js:beads> + </js:Span> + + <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org";> + <js:beads> + <mdl:Badge dataBadge="1"/> + </js:beads> + </js:A> + + <js:A text="Badge No Background" href="http://flex.apache.org";> + <js:beads> + <mdl:Badge dataBadge="5" noBackground="true"/> + </js:beads> + </js:A> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml index 1f99688..9131d53 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Buttons.mxml @@ -33,92 +33,96 @@ limitations under the License. </mdl:beads> <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> - <mdl:Grid width="100"> - - <mdl:Button className="mdlbtn"/> - - <!-- Fab button --> - <mdl:Button id="mybtn" fab="true" colored="true"> - <mdl:beads> - <mdl:Tooltip text="A simple tooltip"/> - </mdl:beads> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.ADD}"/> - </mdl:materialIcon> - </mdl:Button> - - <mdl:Button fab="true" colored="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_DOWN}"/> - </mdl:materialIcon> - </mdl:Button> - - <!-- Fab with Ripple --> - <mdl:Button fab="true" ripple="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.FACE}"/> - </mdl:materialIcon> - </mdl:Button> - - <!-- Raised button --> - <mdl:Button text="COLORED" raised="true" colored="true"/> - - <!-- Raised button with ripple --> - <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/> - - <!-- Raised disabled button--> - <mdl:Button text="DISABLED" raised="true"> - <mdl:beads> - <mdl:Disabled/> - </mdl:beads> - </mdl:Button> - - <!-- Flat button --> - <mdl:Button text="Flat"/> - - <!-- Flat button with ripple --> - <mdl:Button text="Ripple" ripple="true"/> - - <!-- Disabled flat button --> - <mdl:Button text="Disabled"> - <mdl:beads> - <mdl:Disabled/> - </mdl:beads> - </mdl:Button> - - <!-- Primary-colored flat button --> - <mdl:Button text="primary" primary="true"/> - - <!-- Accent-colored flat button --> - <mdl:Button text="accent" accent="true"/> - - <!-- Icon button --> - <mdl:Button icon="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/> - </mdl:materialIcon> - </mdl:Button> - - <!-- Colored icon button --> - <mdl:Button icon="true" colored="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/> - </mdl:materialIcon> - </mdl:Button> - - <!-- Mini FAB button --> - <mdl:Button fab="true" minifab="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.ADD}"/> - </mdl:materialIcon> - </mdl:Button> - - <!-- Colored mini FAB button --> - <mdl:Button fab="true" minifab="true" colored="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.ADD}"/> - </mdl:materialIcon> - </mdl:Button> + <mdl:Grid> + <mdl:style> + <js:AllCSSStyles maxWidth="150"/> + </mdl:style> + <mdl:GridCell column="12"> + <mdl:Button className="mdlbtn"/> + + <!-- Fab button --> + <mdl:Button id="mybtn" fab="true" colored="true"> + <mdl:beads> + <mdl:Tooltip text="A simple tooltip"/> + </mdl:beads> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.ADD}"/> + </mdl:materialIcon> + </mdl:Button> + + <mdl:Button fab="true" colored="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.KEYBOARD_ARROW_DOWN}"/> + </mdl:materialIcon> + </mdl:Button> + + <!-- Fab with Ripple --> + <mdl:Button fab="true" ripple="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.FACE}"/> + </mdl:materialIcon> + </mdl:Button> + + <!-- Raised button --> + <mdl:Button text="COLORED" raised="true" colored="true"/> + + <!-- Raised button with ripple --> + <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/> + + <!-- Raised disabled button--> + <mdl:Button text="DISABLED" raised="true"> + <mdl:beads> + <mdl:Disabled/> + </mdl:beads> + </mdl:Button> + + <!-- Flat button --> + <mdl:Button text="Flat"/> + + <!-- Flat button with ripple --> + <mdl:Button text="Ripple" ripple="true"/> + + <!-- Disabled flat button --> + <mdl:Button text="Disabled"> + <mdl:beads> + <mdl:Disabled/> + </mdl:beads> + </mdl:Button> + + <!-- Primary-colored flat button --> + <mdl:Button text="primary" primary="true"/> + + <!-- Accent-colored flat button --> + <mdl:Button text="accent" accent="true"/> + + <!-- Icon button --> + <mdl:Button icon="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/> + </mdl:materialIcon> + </mdl:Button> + + <!-- Colored icon button --> + <mdl:Button icon="true" colored="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.MOOD}"/> + </mdl:materialIcon> + </mdl:Button> + + <!-- Mini FAB button --> + <mdl:Button fab="true" minifab="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.ADD}"/> + </mdl:materialIcon> + </mdl:Button> + + <!-- Colored mini FAB button --> + <mdl:Button fab="true" minifab="true" colored="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.ADD}"/> + </mdl:materialIcon> + </mdl:Button> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Chips.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml index 287a235..bc1f5d0 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml @@ -31,12 +31,15 @@ limitations under the License. <js:ContainerDataBinding/> </mdl:beads> - <mdl:Grid width="120"> - + <mdl:Grid> + <mdl:style> + <js:AllCSSStyles maxWidth="120"/> + </mdl:style> + <mdl:GridCell column="12"> <mdl:Chip text="Basic Chip" /> - + <mdl:ButtonChip text="Button Chip" /> - + <mdl:Chip text="Deletable Chip"> <mdl:beads> <mdl:DeletableChip /> @@ -45,7 +48,7 @@ limitations under the License. <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/> </mdl:materialIcon> </mdl:Chip> - + <mdl:ButtonChip text="Deletable Button Chip"> <mdl:beads> <mdl:DeletableChip /> @@ -54,7 +57,7 @@ limitations under the License. <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/> </mdl:materialIcon> </mdl:ButtonChip> - + <mdl:Chip text="Contact Chip"> <mdl:beads> <mdl:MdlColor color="teal" /> @@ -62,7 +65,7 @@ limitations under the License. <mdl:ContactChip contactText="A" /> </mdl:beads> </mdl:Chip> - + <mdl:Chip text="Contact Chip"> <mdl:beads> <mdl:MdlColor color="teal" /> @@ -84,6 +87,6 @@ limitations under the License. <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/> </mdl:materialIcon> </mdl:Chip> - + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml b/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml index d739141..a97a8ac 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml @@ -18,8 +18,8 @@ limitations under the License. --> <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:js="library://ns.apache.org/flexjs/basic" - xmlns:mdl="library://ns.apache.org/flexjs/mdl"> + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns:js="library://ns.apache.org/flexjs/basic"> <fx:Script> <![CDATA[ @@ -37,9 +37,11 @@ limitations under the License. </fx:Script> <mdl:Grid> - - <mdl:Button text="Show Modal Dialog" raised="true" click="showModalDialog()"/> - + <mdl:style> + <js:AllCSSStyles maxWidth="150"/> + </mdl:style> + <mdl:GridCell column="12"> + <mdl:Button text="Show Modal Dialog" raised="true" click="showModalDialog()"/> + </mdl:GridCell> </mdl:Grid> - </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml index 8dcf568..9905520 100644 --- a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml @@ -20,9 +20,8 @@ limitations under the License. <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:mdl="library://ns.apache.org/flexjs/mdl" - xmlns="http://www.w3.org/1999/xhtml"; xmlns:models="models.*" - xmlns:models2="org.apache.flex.html.beads.models.*"> - + xmlns="http://www.w3.org/1999/xhtml"; + xmlns:models="models.*"> <mdl:beads> <js:ContainerDataBinding /> </mdl:beads> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Footers.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Footers.mxml b/examples/flexjs/MDLExample/src/main/flex/Footers.mxml index 166b3ee..e5c3a54 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Footers.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Footers.mxml @@ -28,7 +28,8 @@ limitations under the License. </mdl:model> <mdl:Grid> - <mdl:Footer mini="true" width="500"> + <mdl:GridCell column="6"> + <mdl:Footer mini="true"> <mdl:FooterLeftSection> <mdl:FooterLogo text="Mini-Footer"/> @@ -48,8 +49,9 @@ limitations under the License. <mdl:FooterSocialButton>3</mdl:FooterSocialButton> </mdl:FooterRightSection> </mdl:Footer> - - <mdl:Footer width="600"> + </mdl:GridCell> + <mdl:GridCell column="6"> + <mdl:Footer> <mdl:FooterTopSection> @@ -116,7 +118,7 @@ limitations under the License. </mdl:FooterBottomSection> </mdl:Footer> - + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Grids.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml index 226b994..a67a428 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml @@ -21,11 +21,8 @@ limitations under the License. xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml";> - <js:Div className="demo-grid"> - <mdl:Grid> - <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> @@ -50,8 +47,6 @@ limitations under the License. <mdl:GridCell column="6" columnTablet="8"><mdl:beads><js:InnerHTML text="6 (8 Tablet)"/></mdl:beads></mdl:GridCell> <mdl:GridCell column="4" columnTablet="6"><mdl:beads><js:InnerHTML text="4 (6 Tablet)"/></mdl:beads></mdl:GridCell> <mdl:GridCell column="2" columnPhone="4"><mdl:beads><js:InnerHTML text="2 (4 Phone)"/></mdl:beads></mdl:GridCell> - </mdl:Grid> - </js:Div> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Icons.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Icons.mxml b/examples/flexjs/MDLExample/src/main/flex/Icons.mxml index bc67529..b149537 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Icons.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Icons.mxml @@ -32,33 +32,39 @@ limitations under the License. </mdl:beads> <mdl:Grid> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="18"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="24"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="36"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="48"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" dark="true"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}"> - <mdl:beads> - <mdl:MdlTextColor textColor="teal" /> - </mdl:beads> - </mdl:MaterialIcon> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/> - <mdl:MaterialIcon text="{MaterialIconType.BOOK}"/> - <mdl:MaterialIcon text="{MaterialIconType.FACE}"/> - + <mdl:GridCell column="12"> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="18"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="24"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="36"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" size="48"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" dark="true"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}"> + <mdl:beads> + <mdl:MdlTextColor textColor="teal" /> + </mdl:beads> + </mdl:MaterialIcon> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/> + <mdl:MaterialIcon text="{MaterialIconType.BOOK}"/> + <mdl:MaterialIcon text="{MaterialIconType.FACE}"/> + </mdl:GridCell> </mdl:Grid> - <mdl:Grid style="backgroundColor:'#000';"> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" light="true"/> - <mdl:MaterialIcon text="{MaterialIconType.ACCESSIBILITY}" size="48" light="true"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true" light="true"/> - <mdl:MaterialIcon text="{MaterialIconType.ADD}"> - <mdl:beads> - <mdl:MdlTextColor textColor="teal" /> - </mdl:beads> - </mdl:MaterialIcon> - <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/> - <mdl:MaterialIcon text="{MaterialIconType.BOOK}" light="true"/> + <mdl:Grid> + <mdl:style> + <js:SimpleCSSStyles backgroundColor="#000"/> + </mdl:style> + <mdl:GridCell column="12"> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" light="true"/> + <mdl:MaterialIcon text="{MaterialIconType.ACCESSIBILITY}" size="48" light="true"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" inactive="true" light="true"/> + <mdl:MaterialIcon text="{MaterialIconType.ADD}"> + <mdl:beads> + <mdl:MdlTextColor textColor="teal" /> + </mdl:beads> + </mdl:MaterialIcon> + <mdl:MaterialIcon text="{MaterialIconType.ADD}" className="orange600"/> + <mdl:MaterialIcon text="{MaterialIconType.BOOK}" light="true"/> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Lists.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml index c4b44a5..efb416e 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml @@ -28,116 +28,65 @@ limitations under the License. </mdl:model> <mdl:Grid> - <mdl:List> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="things" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - <mdl:List labelField="actorName" className="actorNameListItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="actors" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - <mdl:List labelField="actorName" className="actorNameAndIconListItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="actors" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - <mdl:List labelField="actorName" className="avatarAndActionListItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="actors" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - <mdl:List labelField="actorName" className="avatarAndActionTwoLineListItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="actors" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - <mdl:List labelField="actorName" className="avatarAndActionThreeLineListItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="actors" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - + <mdl:GridCell> + <mdl:List> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="things" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:GridCell> + <mdl:GridCell> + <mdl:List labelField="actorName" className="actorNameListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:GridCell> + <mdl:GridCell> + <mdl:List labelField="actorName" className="actorNameAndIconListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:GridCell> + <mdl:GridCell> + <mdl:List labelField="actorName" className="avatarAndActionListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:GridCell> + <mdl:GridCell> + <mdl:List labelField="actorName" className="avatarAndActionTwoLineListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:GridCell> + <mdl:GridCell column="12"> + <mdl:List labelField="actorName" className="avatarAndActionThreeLineListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:GridCell> </mdl:Grid> - - <!-- - <mdl:List labelField="label" className="customListItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="productNames" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:List> - - - xmlns:ui="org.apache.flex.core.*" - xmlns:models="org.apache.flex.html.beads.models.*" - xmlns:beads="org.apache.flex.html.beads.*" - xmlns:controllers="org.apache.flex.html.beads.controllers.*" - xmlns:layout="org.apache.flex.html.beads.layouts.*" - xmlns:support="org.apache.flex.html.supportClasses.*" - <ui:ListBase> - <ui:beads> - <models:ArraySelectionModel labelField="label"> - <js:dataProvider> - <fx:Array> - <fx:Object label="Install SIM Card"/> - <fx:Object label="Install SIM Card 1"/> - <fx:Object label="Install SIM Card 2"/> - </fx:Array> - </js:dataProvider> - </models:ArraySelectionModel> - - <models:ViewportModel/> - - <support:DataGroup/> - - <support:ScrollingViewport/> - - <beads:ListView/> - - <controllers:ListSingleSelectionMouseController/> - <layout:VerticalLayout/> - <ui:ItemRendererClassFactory> - <ui:itemRendererFactory> - <fx:Component> - <support:StringItemRenderer> - <support:beads> - <controllers:ItemRendererMouseController /> - </support:beads> - </support:StringItemRenderer> - </fx:Component> - </ui:itemRendererFactory> - </ui:ItemRendererClassFactory> - <beads:TextItemRendererFactoryForArrayData/> - </ui:beads> - </ui:ListBase>--> - - </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Menus.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Menus.mxml b/examples/flexjs/MDLExample/src/main/flex/Menus.mxml index b6e4ee7..226ff1d 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Menus.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Menus.mxml @@ -42,21 +42,26 @@ limitations under the License. <models:MenuModel id="menuModel"/> </mdl:model> - <mdl:Grid width="100"> - <mdl:Button id="menu_btn" icon="true"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.MORE_VERT}"/> - </mdl:materialIcon> - </mdl:Button> - - <mdl:Menu id="myMenu" dataMdlFor="menu_btn" ripple="true" bottom="true" left="false" change="onMyMenuChange(event)" - labelField="label" className="customMenuItemRenderer"> - <mdl:beads> - <js:ConstantBinding - sourceID="menuModel" - sourcePropertyName="menuItems" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:Menu> + <mdl:Grid> + <mdl:style> + <js:AllCSSStyles maxWidth="100"/> + </mdl:style> + <mdl:GridCell column="12"> + <mdl:Button id="menu_btn" icon="true"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.MORE_VERT}"/> + </mdl:materialIcon> + </mdl:Button> + + <mdl:Menu id="myMenu" dataMdlFor="menu_btn" ripple="true" bottom="true" left="false" change="onMyMenuChange(event)" + labelField="label" className="customMenuItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="menuModel" + sourcePropertyName="menuItems" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:Menu> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml index 0b3831e..1373485 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml @@ -18,14 +18,12 @@ limitations under the License. --> <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns:js="library://ns.apache.org/flexjs/basic" initComplete="initTextBoxes(event)"> <fx:Script> <![CDATA[ - import org.apache.flex.events.Event; - private function initTextBoxes(event:Event):void { slider1_txt.text = "Slider 1 Value: " + slider1.value; @@ -46,7 +44,10 @@ limitations under the License. </fx:Script> <mdl:Grid> - + <mdl:style> + <js:AllCSSStyles maxWidth="300"/> + </mdl:style> + <mdl:GridCell column="12"> <mdl:Card className="demo-card-slider" shadow="2"> <mdl:CardTitle> <mdl:CardTitleText id="slider1_txt"/> @@ -77,7 +78,7 @@ limitations under the License. </mdl:Slider> </mdl:CardSupportingText> </mdl:Card> - + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml b/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml index 6589d9a..f843253 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Snackbar.mxml @@ -18,14 +18,18 @@ limitations under the License. --> <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; - xmlns:mdl="library://ns.apache.org/flexjs/mdl"> + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns:js="library://ns.apache.org/flexjs/basic"> <mdl:Grid> - <mdl:GridCell column="1" width="200"> + <mdl:style> + <js:AllCSSStyles maxWidth="500"/> + </mdl:style> + <mdl:GridCell column="6"> <mdl:Button id="showToast" click="onShowToastClick(event)" text="Show Toast!" width="180" accent="true" colored="true" raised="true"/> <mdl:Toast id="toast" message="Toast message" timeout="3000"/> </mdl:GridCell> - <mdl:GridCell column="2" width="200"> + <mdl:GridCell column="6"> <mdl:Button id="showSnackbar" click="onShowSnackbarClick(event)" text="Show Snackbar!" width="180" accent="true" colored="true" raised="true"/> <mdl:Snackbar id="snackbar" message="Snackbar message" actionText="Undo" timeout="3000" @@ -33,9 +37,6 @@ limitations under the License. </mdl:GridCell> </mdl:Grid> <fx:Script><![CDATA[ - import org.apache.flex.events.Event; - import org.apache.flex.events.MouseEvent; - private function onShowToastClick(event:MouseEvent):void { toast.show(); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Tables.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Tables.mxml b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml index 1f29d9a..e6bb690 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Tables.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml @@ -27,36 +27,12 @@ limitations under the License. <models:TablesModel/> </mdl:model> - <mdl:Grid width="450" className="center-items"> - - <mdl:Table shadow="2" selectable="true" className="customTableRowItemRenderer"> - <mdl:columns> - <mdl:TableColumn headerText="Material"/> - <mdl:TableColumn headerText="Quantity"> - <mdl:beads> - <mdl:TableNumericColumnEnable /> - </mdl:beads> - </mdl:TableColumn> - <mdl:TableColumn headerText="Unit price"> - <mdl:beads> - <mdl:TableNumericColumnEnable /> - </mdl:beads> - </mdl:TableColumn> - </mdl:columns> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="materials" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:Table> - - <mdl:Card shadow="2" width="450"> - <mdl:CardTitle expand="true"> - <mdl:CardTitleText text="Card Header"/> - </mdl:CardTitle> - - <mdl:Table className="customTableRowItemRenderer" width="100%"> + <mdl:Grid className="center-items"> + <mdl:style> + <js:AllCSSStyles maxWidth="450"/> + </mdl:style> + <mdl:GridCell column="12"> + <mdl:Table shadow="2" selectable="true" className="customTableRowItemRenderer"> <mdl:columns> <mdl:TableColumn headerText="Material"/> <mdl:TableColumn headerText="Quantity"> @@ -77,41 +53,68 @@ limitations under the License. destinationPropertyName="dataProvider" /> </mdl:beads> </mdl:Table> - - <mdl:CardActions style="display:flex; "> - <mdl:Spacer/> - <mdl:Button text="Get Started" ripple="true" colored="true"/> - </mdl:CardActions> - </mdl:Card> - <mdl:Table shadow="8" className="tableRowItemRendererWithIcons"> - <mdl:columns> - <mdl:TableColumn headerText="Material"/> - <mdl:TableColumn headerText="Quantity"> - <mdl:beads> - <mdl:TableNumericColumnEnable /> - </mdl:beads> - </mdl:TableColumn> - <mdl:TableColumn headerText="Unit price"> - <mdl:beads> - <mdl:TableNumericColumnEnable /> - </mdl:beads> - </mdl:TableColumn> - <mdl:TableColumn headerText="Mood"> + <mdl:Card shadow="2" width="450"> + <mdl:CardTitle expand="true"> + <mdl:CardTitleText text="Card Header"/> + </mdl:CardTitle> + + <mdl:Table className="customTableRowItemRenderer" width="100%"> + <mdl:columns> + <mdl:TableColumn headerText="Material"/> + <mdl:TableColumn headerText="Quantity"> + <mdl:beads> + <mdl:TableNumericColumnEnable /> + </mdl:beads> + </mdl:TableColumn> + <mdl:TableColumn headerText="Unit price"> + <mdl:beads> + <mdl:TableNumericColumnEnable /> + </mdl:beads> + </mdl:TableColumn> + </mdl:columns> <mdl:beads> - <mdl:TableNumericColumnEnable /> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="materials" + destinationPropertyName="dataProvider" /> </mdl:beads> - </mdl:TableColumn> - </mdl:columns> + </mdl:Table> - <mdl:beads> - <js:ConstantBinding - sourceID="model" - sourcePropertyName="materials" - destinationPropertyName="dataProvider" /> - </mdl:beads> - </mdl:Table> + <mdl:CardActions style="display:flex; "> + <mdl:Spacer/> + <mdl:Button text="Get Started" ripple="true" colored="true"/> + </mdl:CardActions> + </mdl:Card> + <mdl:Table shadow="8" className="tableRowItemRendererWithIcons"> + <mdl:columns> + <mdl:TableColumn headerText="Material"/> + <mdl:TableColumn headerText="Quantity"> + <mdl:beads> + <mdl:TableNumericColumnEnable /> + </mdl:beads> + </mdl:TableColumn> + <mdl:TableColumn headerText="Unit price"> + <mdl:beads> + <mdl:TableNumericColumnEnable /> + </mdl:beads> + </mdl:TableColumn> + <mdl:TableColumn headerText="Mood"> + <mdl:beads> + <mdl:TableNumericColumnEnable /> + </mdl:beads> + </mdl:TableColumn> + </mdl:columns> + + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="materials" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:Table> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml index abcb43d..5a2b87f 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml @@ -28,7 +28,7 @@ limitations under the License. </mdl:model> <mdl:Grid> - <mdl:GridCell column="1" percentWidth="100"> + <mdl:GridCell column="12"> <mdl:Tabs width="400" selectedIndex="1" tabIdField="tabId" labelField="label" className="customTabBarPanelItemRenderer"> <mdl:beads> <js:ConstantBinding @@ -38,7 +38,7 @@ limitations under the License. </mdl:beads> </mdl:Tabs> </mdl:GridCell> - <mdl:GridCell column="1" percentWidth="100"> + <mdl:GridCell column="12"> <mdl:NavigationLayout width="600"> <mdl:Header> <mdl:TabBar selectedIndex="0" tabIdField="tabId" labelField="label" className="customTabBarSetup"> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml index 8c50fc2..bbb99ba 100644 --- a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml @@ -22,71 +22,75 @@ limitations under the License. xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml";> - <mdl:Grid width="300"> - - <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> - <js:Form action="#"> + <mdl:Grid> + <mdl:style> + <js:AllCSSStyles maxWidth="300"/> + </mdl:style> + <mdl:GridCell column="12"> + <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> + <js:Form action="#"> - <mdl:TextField id="mdlti" change="mdlfloatingti.text = mdlti.text" width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Normal Text Field..."/> - <mdl:Tooltip text="A simple tooltip in a TextField"/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField id="mdlti" change="mdlfloatingti.text = mdlti.text" width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Normal Text Field..."/> + <mdl:Tooltip text="A simple tooltip in a TextField"/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField width="100%"> - <mdl:beads> - <mdl:Disabled/> - <mdl:TextPrompt prompt="Disabled..."/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField width="100%"> + <mdl:beads> + <mdl:Disabled/> + <mdl:TextPrompt prompt="Disabled..."/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField id="mdlfloatingti" floatingLabel= "true" width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Floating Label"/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField id="mdlfloatingti" floatingLabel= "true" width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Floating Label"/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Letters and spaces..."/> - <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Letters and spaces..."/> + <mdl:Restrict pattern="[A-Z,a-z, ]*" error="Letters and spaces only"/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField floatingLabel="true" width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Numbers..."/> - <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField floatingLabel="true" width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Numbers..."/> + <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Expandible..."/> - <mdl:ExpandableSearch/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Expandible..."/> + <mdl:ExpandableSearch/> + </mdl:beads> + </mdl:TextField> - <mdl:TextField floatingLabel="true" width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Floating and Expandible..."/> - <mdl:ExpandableSearch/> - </mdl:beads> - </mdl:TextField> + <mdl:TextField floatingLabel="true" width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Floating and Expandible..."/> + <mdl:ExpandableSearch/> + </mdl:beads> + </mdl:TextField> - <mdl:TextArea width="100%"> - <mdl:beads> - <mdl:TextPrompt prompt="Text lines..."/> - </mdl:beads> - </mdl:TextArea> + <mdl:TextArea width="100%"> + <mdl:beads> + <mdl:TextPrompt prompt="Text lines..."/> + </mdl:beads> + </mdl:TextArea> - <mdl:TextArea floatingLabel="true" width="100%" rows="5" maxrows="8" isInvalid="true"> - <mdl:beads> - <mdl:TextPrompt prompt="Floating, maxrows 8, invalid on load"/> - </mdl:beads> - </mdl:TextArea> - </js:Form> + <mdl:TextArea floatingLabel="true" width="100%" rows="5" maxrows="8" isInvalid="true"> + <mdl:beads> + <mdl:TextPrompt prompt="Floating, maxrows 8, invalid on load"/> + </mdl:beads> + </mdl:TextArea> + </js:Form> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/65b7eb99/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml index 74927e8..c6f7e21 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Toggles.mxml @@ -24,7 +24,6 @@ limitations under the License. <fx:Script> <![CDATA[ - import org.apache.flex.events.MouseEvent; import org.apache.flex.mdl.materialIcons.MaterialIconType; [Bindable] @@ -55,50 +54,53 @@ limitations under the License. <js:ContainerDataBinding/> </mdl:beads> - <mdl:Grid width="250"> - - <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> - <mdl:CheckBox id="mdlchk" text="Disabled at start" value="CheckBox Description" change="counter++"/> - <js:Label text="Chebox throw 'change' event {counter} times"/> - <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> - - <mdl:IconToggle dataMdlFor="mdlBoldIcon" click="counter2++"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.FORMAT_BOLD}"/> - </mdl:materialIcon> - </mdl:IconToggle> - - <js:Label text="IconToggle throw 'click' event {counter2} times"/> - - <mdl:IconToggle dataMdlFor="mdlItalicIcon" change="counter3++"> - <mdl:materialIcon> - <mdl:MaterialIcon text="{MaterialIconType.FORMAT_ITALIC}"/> - </mdl:materialIcon> - </mdl:IconToggle> - - <js:Label text="IconToggle throw 'change' event {counter3} times"/> - - <mdl:Button raised="true" text="Change Switch Text Label" colored="true" click="s1.text = 'hello'"/> - <mdl:Switch id="s1" text="Switch" ripple="true" selected="true" change="counter4++" textChange="trace('hello?')"/> - - <js:Label text="Switch throw 'click' event {counter4} times"/> - - <mdl:Switch id="s2" text="Switch" click="counter5++"/> - - <js:Label text="Switch throw 'click' event {counter5} times"/> - - <mdl:RadioButton groupName="g1" text="Ripple 1" value="Test 1" ripple="true" change="counter6++"/> - <mdl:RadioButton groupName="g1" text="Ripple 2" value="Test 2" ripple="true" change="counter6++"/> - <mdl:RadioButton groupName="g1" text="Ripple 3" value="Test 3" ripple="true" change="counter6++"/> - - <js:Label text="RadioButtons throw 'change' event {counter6} times"/> - - <mdl:RadioButton groupName="g2" text="Black" click="counter7++"/> - <mdl:RadioButton groupName="g2" text="White" click="counter7++"/> - <mdl:RadioButton groupName="g2" text="Red" click="counter7++"/> - - <js:Label text="RadioButtons throw 'click' event {counter7} times"/> + <mdl:Grid> + <mdl:style> + <js:AllCSSStyles maxWidth="250"/> + </mdl:style> + <mdl:GridCell column="12"> + <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> + <mdl:CheckBox id="mdlchk" text="Disabled at start" value="CheckBox Description" change="counter++"/> + <js:Label text="Chebox throw 'change' event {counter} times"/> + <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> + + <mdl:IconToggle dataMdlFor="mdlBoldIcon" click="counter2++"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.FORMAT_BOLD}"/> + </mdl:materialIcon> + </mdl:IconToggle> + + <js:Label text="IconToggle throw 'click' event {counter2} times"/> + + <mdl:IconToggle dataMdlFor="mdlItalicIcon" change="counter3++"> + <mdl:materialIcon> + <mdl:MaterialIcon text="{MaterialIconType.FORMAT_ITALIC}"/> + </mdl:materialIcon> + </mdl:IconToggle> + + <js:Label text="IconToggle throw 'change' event {counter3} times"/> + + <mdl:Button raised="true" text="Change Switch Text Label" colored="true" click="s1.text = 'hello'"/> + <mdl:Switch id="s1" text="Switch" ripple="true" selected="true" change="counter4++" textChange="trace('hello?')"/> + + <js:Label text="Switch throw 'click' event {counter4} times"/> + + <mdl:Switch id="s2" text="Switch" click="counter5++"/> + + <js:Label text="Switch throw 'click' event {counter5} times"/> + + <mdl:RadioButton groupName="g1" text="Ripple 1" value="Test 1" ripple="true" change="counter6++"/> + <mdl:RadioButton groupName="g1" text="Ripple 2" value="Test 2" ripple="true" change="counter6++"/> + <mdl:RadioButton groupName="g1" text="Ripple 3" value="Test 3" ripple="true" change="counter6++"/> + + <js:Label text="RadioButtons throw 'change' event {counter6} times"/> + + <mdl:RadioButton groupName="g2" text="Black" click="counter7++"/> + <mdl:RadioButton groupName="g2" text="White" click="counter7++"/> + <mdl:RadioButton groupName="g2" text="Red" click="counter7++"/> + <js:Label text="RadioButtons throw 'click' event {counter7} times"/> + </mdl:GridCell> </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file
