MDL Sliders panel with examples
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/a73aec3a Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/a73aec3a Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/a73aec3a Branch: refs/heads/feature/fontawesome Commit: a73aec3a9f12b41a6829afe5c5ecdaf1b20b59f4 Parents: 23e8320 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Wed Dec 28 18:40:55 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Wed Dec 28 18:40:55 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Cards.mxml | 15 +--- .../src/main/flex/MainNavigation.mxml | 6 +- .../MDLExample/src/main/flex/Sliders.mxml | 82 ++++++++++++++++++++ 3 files changed, 88 insertions(+), 15 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/a73aec3a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml index e81715d..afb3a82 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml @@ -21,17 +21,7 @@ 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";> - - <fx:Script> - <![CDATA[ - private function onValueChange(event:Event):void - { - trace("value change:", slider.value); - mycard.shadow = slider.value - } - ]]> -</fx:Script> - + <mdl:Grid className="center-items"> <mdl:Card id="mycard" className="demo-card-wide" shadow="2"> @@ -47,8 +37,7 @@ limitations under the License. </mdl:CardSupportingText> <mdl:CardActions border="true"> <mdl:Button text="Get Started" ripple="true" colored="true"/> - <mdl:Slider id="slider" minimum="0" maximum="16" value="2" stepSize="1" width="200" - valueChange="onValueChange(event)"/> + </mdl:CardActions> <mdl:CardMenu> <mdl:Button icon="true" ripple="true"> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/a73aec3a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml index a73559d..e93cc70 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -37,6 +37,7 @@ limitations under the License. <mdl:TabBar ripple="true"> <mdl:TabBarButton text="Cards" href="#cards_panel" isActive="true"/> <mdl:TabBarButton text="Chips" href="#chips_panel"/> + <mdl:TabBarButton text="Sliders" href="#sliders_panel"/> <mdl:TabBarButton text="Grids" href="#grids_panel"/> <mdl:TabBarButton text="Tabs" href="#tabs_panel"/> <mdl:TabBarButton text="Buttons" href="#buttons_panel" /> @@ -68,6 +69,8 @@ limitations under the License. <local:Cards id="cards_panel" isActive="true"/> <local:Chips id="chips_panel" /> + + <local:Sliders id="sliders_panel" /> <local:Grids id="grids_panel"/> @@ -116,6 +119,7 @@ limitations under the License. <mdl:MaterialIconMoreVert/> </mdl:materialIcon> </mdl:Button> + <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> <mdl:MenuItem text="Some Action"/> <mdl:MenuItem text="Another Action"/> @@ -128,8 +132,6 @@ limitations under the License. <mdl:MenuItem text="Separated Action"/> </mdl:Menu> - <mdl:Slider className="mdlsl_example"/> - <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> </mdl:TabBarPanel> </mdl:NavigationLayoutContent> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/a73aec3a/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 new file mode 100644 index 0000000..025bca8 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml @@ -0,0 +1,82 @@ +<?xml version="1.0"?> +<!-- + +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. + +--> +<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" + 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; + slider2_txt.text = "Slider 2 Value: " + slider2.value; + slider3_txt.text = "Disabled"; + } + + private function onValueChange1(event:Event):void + { + trace("value 1 change: " + slider1.value); + slider1_txt.text = "Slider 1 Value: " + slider1.value; + } + + private function onValueChange2(event:Event):void + { + trace("value 2 change: " + slider2.value); + slider2_txt.text = "Slider 2 Value: " + slider2.value; + } + ]]> + </fx:Script> + + <mdl:Grid> + <mdl:GridCell> + <mdl:Slider id="slider1" className="mdlsl_example" valueChange="onValueChange1(event)"/> + <!--<mdl:Slider id="slider1" minimum="0" maximum="16" value="2" stepSize="1" width="200" + valueChange="onValueChange(event)"/>--> + </mdl:GridCell> + <mdl:GridCell> + <mdl:Slider id="slider2" minimum="0" maximum="10" value="2" stepSize="2" width="200" + valueChange="onValueChange2(event)"/> + </mdl:GridCell> + + <mdl:GridCell> + <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"> + <mdl:beads> + <mdl:Disabled/> + </mdl:beads> + </mdl:Slider> + </mdl:GridCell> + + <mdl:GridCell> + <js:Span id="slider1_txt"/> + </mdl:GridCell> + + <mdl:GridCell> + <js:Span id="slider2_txt"/> + </mdl:GridCell> + + <mdl:GridCell> + <js:Span id="slider3_txt"/> + </mdl:GridCell> + </mdl:Grid> + +</mdl:TabBarPanel>
