You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/04/01 06:03:12 UTC
[07/50] [abbrv] incubator-weex git commit: + [example] update index,
list add box shadow demo
+ [example] update index, list add box shadow demo
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/109162bf
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/109162bf
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/109162bf
Branch: refs/heads/dev
Commit: 109162bf390dd6f104b12518520a959e092ddc0b
Parents: 5721b58
Author: kfeagle <su...@163.com>
Authored: Tue Mar 28 11:36:03 2017 +0800
Committer: kfeagle <su...@163.com>
Committed: Tue Mar 28 11:36:03 2017 +0800
----------------------------------------------------------------------
examples/component/input-demo.we | 253 ++++++++++++++++++-----------
examples/include/example-list-item.we | 30 +++-
examples/index.we | 4 +-
examples/showcase/boxshadow.we | 46 ++++++
4 files changed, 234 insertions(+), 99 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/109162bf/examples/component/input-demo.we
----------------------------------------------------------------------
diff --git a/examples/component/input-demo.we b/examples/component/input-demo.we
index 7056218..950805a 100644
--- a/examples/component/input-demo.we
+++ b/examples/component/input-demo.we
@@ -3,127 +3,180 @@
<div>
<text style="font-size: 40px">oninput: {{txtInput}}</text>
<text style="font-size: 40px">onchange: {{txtChange}}</text>
+ <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ <text style="font-size: 40px">onrange: {{txtRange}}</text>
</div>
<scroller>
- <wxc-panel title="input type = text" type="primary">
- <input
- type="text"
- placeholder="Input Text"
- class="input"
- autofocus="{{autofocus}}"
- value=""
- onchange="onchange"
- oninput="oninput"
- />
- </wxc-panel>
-
- <wxc-panel title="input type = password" type="primary">
- <input
- type="password"
- placeholder="Input Password"
- class="input"
- onchange="onchange"
- oninput="oninput"
- />
- </wxc-panel>
-
- <wxc-panel title="input type = url" type="primary">
- <input
- type="url"
- placeholder="Input URL"
- class="input"
- onchange="onchange"
- oninput="oninput"
- />
- </wxc-panel>
-
- <wxc-panel title="input type = email" type="primary">
- <input
- type="email"
- placeholder="Input Email"
- class="input"
- onchange="onchange"
- oninput="oninput"
- />
- </wxc-panel>
-
- <wxc-panel title="input type = tel" type="primary">
- <input
- type="tel"
- placeholder="Input Tel"
- class="input"
- onchange="onchange"
- oninput="oninput"
- />
- </wxc-panel>
-
- <wxc-panel title="input type = time" type="primary">
- <input
- type="time"
- placeholder="Input Time"
- class="input"
- onchange="onchange"
- oninput="oninput"
- />
- </wxc-panel>
-
- <wxc-panel title="input type = date" type="primary">
- <input
- type="date"
- placeholder="Input Date"
- class="input"
- onchange="onchange"
- oninput="oninput"
- max="2017-12-12"
- min="2015-01-01"
- />
- </wxc-panel>
-
- <wxc-panel title="function focus() & blur()" type="primary">
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
+ </div>
+ <input type="text" placeholder="Input Text" class="input" :autofocus="autofocus" value="" onchange="onchange" oninput="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
+ </div>
+ <input type="password" placeholder="Input Password" class="input" onchange="onchange" oninput="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
+ </div>
+ <input type="url" placeholder="Input URL" class="input" onchange="onchange" oninput="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
+ </div>
+ <input type="email" placeholder="Input Email" class="input" onchange="onchange" oninput="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
+ </div>
+ <input type="tel" placeholder="Input Tel" class="input" onchange="onchange" oninput="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
+ </div>
+ <input type="time" placeholder="Input Time" class="input" onchange="onchange" oninput="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
+ </div>
+ <input type="date" placeholder="Input Date" class="input" onchange="onchange" oninput="oninput" max="2017-12-12" min="2015-01-01"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = default</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="default" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = go</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="go" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = next</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="next" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = search</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="search" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = send</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="send" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = done</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="done" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput" />
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
+ </div>
<div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
- <wxc-button value="Focus" type="primary" onclick="{{focus}}"></wxc-button>
- <wxc-button value="Blur" type="primary" onclick="{{blur}}"></wxc-button>
- </div>
-
- <input
- type="text"
- placeholder="Input1"
- class="input"
- value=""
- id="input1"
- />
- </wxc-panel>
+ <text class="button" value="Focus" type="primary" onclick="focus"></text>
+ <text class="button" value="Blur" type="primary" onclick="blur"></text>
+ </div>
+
+ <input type="text" placeholder="Input1" class="input" value="" id="input1"/>
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="setRange" type="primary" onclick="setRange"></text>
+ <text class="button" value="getRange" type="primary" onclick="getRange"></text>
+ </div>
+ <input type="text" id="inputselection" placeholder="please input" value="123456789" class="input" onchange="onchange" onreturn = "onreturn" oninput="oninput"/>
+ </div>
+
+
+
</scroller>
</div>
</template>
-<style>
+<style scoped>
.input {
font-size: 60px;
height: 80px;
width: 750px;
}
+ .button {
+ font-size: 36;
+ width: 200;
+ color: #41B883;
+ text-align: center;
+ padding-top: 10;
+ padding-bottom: 10;
+ border-width: 2;
+ border-style: solid;
+ margin-right: 20;
+ border-color: rgb(162, 217, 192);
+ background-color: rgba(162, 217, 192, 0.2);
+ }
</style>
<script>
- require('weex-components');
module.exports = {
- data: {
- txtInput: '',
- txtChange: '',
- autofocus: false,
+ data: function () {
+ return {
+ txtInput: '',
+ txtChange: '',
+ txtReturnType: '',
+ txtSelection:'',
+ autofocus: false,
+ txtRange:''
+ };
},
methods: {
- ready : function () {
+ ready: function () {
var self = this;
setTimeout(function () {
self.autofocus = true;
- },1000);
+ }, 1000);
},
onchange: function (event) {
this.txtChange = event.value;
console.log('onchange', event.value);
},
+ onreturn: function (event) {
+ this.txtReturnType = event.returnKeyType;
+ console.log('onreturn', event.type);
+ },
oninput: function (event) {
this.txtInput = event.value;
console.log('oninput', event.value);
@@ -133,6 +186,16 @@
},
blur: function () {
this.$el('input1').blur();
+ },
+ setRange: function() {
+ console.log(this.$el["inputselection"]);
+ this.$el("inputselection").setSelectionRange(2, 6);
+ },
+ getRange: function() {
+ var self = this;
+ this.$el("inputselection").getSelectionRange(function(e) {
+ self.txtRange = e.selectionStart + '-'+e.selectionEnd;
+ });
}
}
};
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/109162bf/examples/include/example-list-item.we
----------------------------------------------------------------------
diff --git a/examples/include/example-list-item.we b/examples/include/example-list-item.we
index 2bd0a72..3b1f6e2 100644
--- a/examples/include/example-list-item.we
+++ b/examples/include/example-list-item.we
@@ -1,7 +1,7 @@
<template>
- <wxc-list-item onclick="{{redirect}}">
+ <div class="item" style="background-color:{{bgColor}};" onclick="{{redirect}}">
<text class="item-txt">{{ title }}</text>
- </wxc-list-item>
+ </div>
</template>
<style>
@@ -9,6 +9,29 @@
font-size: 48px;
color: #555;
}
+ .item {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ padding-left: 35px;
+ padding-right: 35px;
+ height: 160px;
+ justify-content: center;
+ /*margin-bottom: 1px; FUTURE */
+ border-bottom-width: 1px;
+ border-color: #dddddd;
+ }
+ .item:active {
+ padding-top: 25px;
+ padding-bottom: 25px;
+ padding-left: 35px;
+ padding-right: 35px;
+ height: 160px;
+ justify-content: center;
+ /*margin-bottom: 1px; FUTURE */
+ background-color: #00BDFF;
+ border-bottom-width: 1px;
+ border-color: #dddddd;
+ }
</style>
<script>
@@ -16,7 +39,8 @@
module.exports = {
data: {
title: '',
- url: ''
+ url: '',
+ bgColor: '#ffffff'
},
methods: {
redirect: function() {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/109162bf/examples/index.we
----------------------------------------------------------------------
diff --git a/examples/index.we b/examples/index.we
index 54feddc..e0b1a9f 100644
--- a/examples/index.we
+++ b/examples/index.we
@@ -27,6 +27,7 @@
{name: 'component/list/list-demo', title: 'List (Advanced)'},
{name: 'component/slider/index', title: 'Slider'},
{name: 'component/slider-neighbor/index', title: 'Slider Neighbor'},
+ {name: 'component/slider-tab', title: 'Slider Tab'},
{name: 'component/a-demo', title: 'A'},
{name: 'component/video-demo', title: 'Video'},
{name: 'component/countdown-demo', title: 'Countdown'},
@@ -52,7 +53,8 @@
{name: 'showcase/minesweeper', title: 'Minesweeper'},
{name: 'showcase/ui', title: 'UI Gallery'},
{name: 'showcase/dropdown/dropdown-demo', title: 'Dropdown'},
- {name: 'showcase/pseudo-class', title: 'PseudoClass'}
+ {name: 'showcase/pseudo-class', title: 'PseudoClass'},
+ {name: 'showcase/boxshadow', title: 'boxshadow'}
]
}
}
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/109162bf/examples/showcase/boxshadow.we
----------------------------------------------------------------------
diff --git a/examples/showcase/boxshadow.we b/examples/showcase/boxshadow.we
new file mode 100644
index 0000000..16e86cc
--- /dev/null
+++ b/examples/showcase/boxshadow.we
@@ -0,0 +1,46 @@
+
+<template>
+ <div class="wrapper" onclick="update">
+ <div style=" height:60px;background-color: #FFE4C4; box-shadow:{{bs}};width:{{w}};">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ </div>
+</template>
+
+<style>
+ .wrapper {align-items: center; margin-top: 120px;}
+ .title {font-size: 48px;}
+</style>
+
+<script>
+ module.exports = {
+ data: {
+ logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
+ target: 'World',
+ w:'400',
+ bs:'20px 10px 5px rgb(255, 69, 0)'
+ },
+ methods: {
+ update: function (e) {
+ this.target = 'Weex';
+ this.w = 600;
+ this.bs='inset 20px 10px 5px rgba(0, 0, 0, 0.5)';
+ }
+ }
+ }
+</script>