Repository: flex-asjs Updated Branches: refs/heads/develop 6ab2498a3 -> 7982279f1
More Card 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/8a2610f3 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8a2610f3 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8a2610f3 Branch: refs/heads/develop Commit: 8a2610f3a69da98ef03c484dc94661acb7346f46 Parents: 47aded4 Author: Carlos Rovira <[email protected]> Authored: Fri Nov 11 14:07:42 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Sat Nov 12 10:06:54 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 78 +++++++++++++------ .../src/main/resources/assets/dog.png | Bin 0 -> 9020 bytes .../src/main/resources/assets/image_card.jpg | Bin 0 -> 117457 bytes .../src/main/resources/mdl-styles.css | 12 ++- 4 files changed, 66 insertions(+), 24 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/flex/App.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml index 783281a..f68673a 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -82,10 +82,6 @@ limitations under the License. <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/> <mdl:RadioButton groupName="g1" text="Red"/> - <mdl:Slider className="mdlsl_example"/> - - <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> - <js:VContainer> <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);"> <js:beads> @@ -113,25 +109,61 @@ limitations under the License. </js:VContainer> - <mdl:Card width="512" shadow="2"> - <mdl:CardTitle className="cardTitle" style="color: #fff;"> - <js:H2 text="Welcome" className="mdl-card__title-text"/> - </mdl:CardTitle> - <mdl:CardSupportingText> - <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/> - </mdl:CardSupportingText> - <mdl:CardActions border="true"> - <mdl:Button text="Get Started" ripple="true" colored="true"/> - </mdl:CardActions> - <mdl:CardMenu> - <mdl:Button icon="true" ripple="true" style="color: #fff;"> - <i class="material-icons">share</i> - </mdl:Button> - </mdl:CardMenu> - </mdl:Card> - - - <!--<mdl:CardMedia> + <js:HContainer> + <mdl:Card width="512" shadow="2" style="margin:10;"> + <mdl:CardTitle className="cardTitle"> + <js:H2 text="Welcome" className="mdl-card__title-text"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/> + </mdl:CardSupportingText> + <mdl:CardActions border="true"> + <mdl:Button text="Get Started" ripple="true" colored="true"/> + </mdl:CardActions> + <mdl:CardMenu> + <mdl:Button icon="true" ripple="true" style="color: #fff;"> + <i class="material-icons">share</i> + </mdl:Button> + </mdl:CardMenu> + </mdl:Card> + + <mdl:Slider className="mdlsl_example"/> + <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> + + <mdl:Card width="320" height="320" shadow="2" style="margin:10;"> + <mdl:CardTitle className="dogTitle" style="color: #fff;"> + <js:H2 text="Update" className="mdl-card__title-text"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/> + </mdl:CardSupportingText> + <mdl:CardActions border="true"> + <mdl:Button colored="true" ripple="true" text="View Updates"/> + </mdl:CardActions> + </mdl:Card> + + <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover"> + <mdl:CardTitle/> + <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);"> + <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/> + </mdl:CardActions> + </mdl:Card> + </js:HContainer> + + + <!-- + <mdl:Spacer/> + <mdl:Button id="demo_menu" icon="true"> + <i class="material-icons">more_vert</i> + </mdl:Button> + + <mdl:Menu ripple="true" dataMdlFor="demo_menu"> + <mdl:MenuItem text="Some Action"/> + <mdl:MenuItem text="Another Action"/> + </mdl:Menu> + + + <mdl:CardMedia> <js:Image url="assets/Unknown.jpg" height="176"/> </mdl:CardMedia>--> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/assets/dog.png ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/assets/dog.png b/examples/flexjs/MDLExample/src/main/resources/assets/dog.png new file mode 100644 index 0000000..1aace48 Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/assets/dog.png differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg b/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg new file mode 100644 index 0000000..ef94dfd Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/assets/image_card.jpg differ http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8a2610f3/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css index d87e38c..5d5fae4 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -42,10 +42,20 @@ Image .cardTitle { - color: #fff; + color: #ffffff; height: 176px; background-image:url('assets/Unknown.jpg'); /*center / cover;*/ background-size: cover; background-position: 50% 50%; background-repeat: initial initial; +} + +.dogTitle +{ + color: #fff; + height: 176px; + background-image: url('assets/dog.png'); /*bottom right 15% no-repeat #46B6AC*/ + background-position: right 15% bottom 0%; + background-repeat: no-repeat no-repeat; + background-color: rgb(70, 182, 172); } \ No newline at end of file
