DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add selection to weui

This commit is contained in:
张磊 2018-12-06 16:40:56 +08:00
parent df42e8f2f6
commit 79eb351596
8 changed files with 144 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/omi-cli/template/weui/src/elements/app/index.js
View File

@ -17,6 +17,7 @@ import '../icon-panel'
import '../loading-panel'
import '../msg-panel'
import '../toptip-panel'
import '../selection-panel'
import route from 'omi-router'
define('my-app', class extends WeElement {
@ -52,6 +53,11 @@ define('my-app', class extends WeElement {
this.data.atHome = false
})
route('/selection', () => {
this.data.tag = 'selection-panel'
this.data.atHome = false
})
route('/toptip', () => {
this.data.tag = 'toptip-panel'
this.data.atHome = false
@ -129,7 +135,7 @@ define('my-app', class extends WeElement {
<div class="page__category js_categoryInner">
<ow-cells class="page__category-content">
<ow-cell href="#/button">Button</ow-cell>
<ow-cell href="#/input">Input</ow-cell>
<ow-cell href="#/selection">Selection</ow-cell>
<ow-cell href="#/list">List</ow-cell>
<ow-cell href="#/slider">Slider</ow-cell>
<ow-cell href="#/uploader">Uploader</ow-cell>

26
packages/omi-cli/template/weui/src/elements/selection-panel/_index.css Normal file
View File

@ -0,0 +1,26 @@
.page__title {
text-align: left;
font-size: 20px;
font-weight: 400;
margin-left:40px ;
}
.page__desc {
margin-top: 5px;
color: #888;
text-align: left;
font-size: 14px;
margin-left:40px ;
}
.weui-cells__title{
margin-top:.77em;
margin-bottom:.3em;
padding-left:15px;
padding-right:15px;
color:#808080;
font-size:14px;
}
.weui-cells__title + .weui-cells{
margin-top:0;
}

36
packages/omi-cli/template/weui/src/elements/selection-panel/index.js Normal file
View File

@ -0,0 +1,36 @@
import { define, WeElement } from 'omi'
import style from './_index.css'
import '../../weui/selection'
define('selection-panel', class extends WeElement {
css() {
return style
}
render(props, data) {
return (
<div>
<div class="page__hd">
<h1 class="page__title">Selection</h1>
<p class="page__desc">选择</p>
</div>
<div>
<div class="weui-cells__title">单选列表项</div>
<ow-selection items={[
{ text: 'item1' },
{ text: 'item2' },
{ text: 'item3' }
]} single></ow-selection>
<div class="weui-cells__title">多选列表项</div>
<ow-selection items={[
{ text: 'item1' },
{ text: 'item2' },
{ text: 'item3' }
]} ></ow-selection>
</div>
</div>
)
}
})

12
packages/omi-cli/template/weui/src/weui/selection/_index.css Normal file
View File

@ -0,0 +1,12 @@
.weui-check__label{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
.weui-check__label:active{
background-color:#ECECEC;
}
.weui-check{
position:absolute;
left:-9999em;
}

60
packages/omi-cli/template/weui/src/weui/selection/index.js Normal file
View File

@ -0,0 +1,60 @@
import { define, WeElement } from 'omi'
import style from './_index.css'
import cellStyle from '../cells/_index.css'
import '../icon/font-face.css'
import fontStyle from '../icon/_font.scss'
define('ow-selection', class extends WeElement {
css() {
return style + cellStyle + fontStyle
}
render(props) {
if (props.single) {
return (
<div class="weui-cells weui-cells_radio">
{props.items.map((item, index) => (
<label class="weui-cell weui-check__label" for={`x_${this.__elementId}_${index}`}>
<div class="weui-cell__bd">
<p>{item.text}</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id={`x_${this.__elementId}_${index}`} />
<span class="weui-icon-checked"></span>
</div>
</label>
))}
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
)
} else {
return (
<div class="weui-cells weui-cells_checkbox">
{props.items.map((item, index) => (
<label class="weui-cell weui-check__label" for={`x_${this.__elementId}_${index}`}>
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id={`x_${this.__elementId}_${index}`} checked="checked" />
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
))}
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
)
}
}
})

2
packages/omi-router/README.CN.md
View File

@ -108,7 +108,7 @@ render(<my-app />, "#container")
| 模式 | 匹配路径 | route.params |
|---------|------|--------|
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: js }` |
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
## 另一种携带查询参数方法

2
packages/omi-router/README.KR.md
View File

@ -107,7 +107,7 @@ render(<my-app />, "#container")
| Rule | Path | route.params |
|---------|------|--------|
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: js }` |
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
## With Query Parameter

2
packages/omi-router/README.md
View File

@ -107,7 +107,7 @@ render(<my-app />, "#container")
| Rule | Path | route.params |
|---------|------|--------|
| /user/:name | /user/dntzhang | `{ name: 'dntzhang' }` |
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: js }` |
| /user/:name/category/:category | /user/dntzhang/category/js | `{ name: 'dntzhang', category: 'js' }` |
## With Query Parameter