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

omi-cli - update weui template

This commit is contained in:
张磊 2018-12-04 10:09:08 +08:00
parent 5409fafbee
commit 9484e3f8ff
12 changed files with 408 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/omi-cli/template/weui/package.json
View File

@ -36,7 +36,7 @@
"node-sass": "^4.10.0",
"object-assign": "4.1.1",
"omi": "latest",
"omi-weui": "0.0.2",
"omi-weui": "latest",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"prettier": "^1.14.3",

17
packages/omi-cli/template/weui/src/elements/app/_index.css
View File

@ -7,6 +7,23 @@ body {
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif
}
* {
margin: 0;
padding: 0;
}
.weui-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.weui-flex__item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
ul {
list-style: none
}

BIN
packages/omi-cli/template/weui/src/elements/app/icon_footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
packages/omi-cli/template/weui/src/elements/app/icon_nav_feedback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 924 B

BIN
packages/omi-cli/template/weui/src/elements/app/icon_nav_form.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 B

BIN
packages/omi-cli/template/weui/src/elements/app/icon_nav_layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 B

BIN
packages/omi-cli/template/weui/src/elements/app/icon_nav_nav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 579 B

BIN
packages/omi-cli/template/weui/src/elements/app/icon_nav_search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
packages/omi-cli/template/weui/src/elements/app/icon_nav_z-index.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 B

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

@ -1,25 +1,24 @@
import { define, WeElement } from 'omi'
import style from './_index.css'
import logo from './logo.png'
import '../app-intro'
import 'omi-weui/button'
import iconFooter from './icon_footer.png'
import iconNavForm from './icon_nav_form.png'
import iconNavLayout from './icon_nav_layout.png'
import iconNavFeedback from './icon_nav_feedback.png'
import iconNavNav from './icon_nav_nav.png'
import iconNavSearch from './icon_nav_search.png'
import iconNavZIndex from './icon_nav_z-index.png'
import 'omi-weui/cells'
define('my-app', class extends WeElement {
static get data() {
return { name: '' }
}
clickHandler = () => {
this.store.rename('Omi V5.0')
}
css() {
return style
}
render(props, data, store) {
render() {
return (
<div class="page">
<div class="page home">
<div class="page__hd">
<h1 class="page__title">
<img src={logo} alt="WeUI" style="height:21px;" />
@ -31,207 +30,87 @@ define('my-app', class extends WeElement {
<li>
<div class="weui-flex js_category">
<p class="weui-flex__item">表单</p>
<img src="./images/icon_nav_form.png" alt="" />
<img src={iconNavForm} alt="" />
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="button" href="javascript:;">
<div class="weui-cell__bd">
<p>Button</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="input" href="javascript:;">
<div class="weui-cell__bd">
<p>Input</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="list" href="javascript:;">
<div class="weui-cell__bd">
<p>List</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="slider" href="javascript:;">
<div class="weui-cell__bd">
<p>Slider</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="uploader" href="javascript:;">
<div class="weui-cell__bd">
<p>Uploader</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<ow-cells>
<ow-cell>Button</ow-cell>
<ow-cell>Input</ow-cell>
<ow-cell>List</ow-cell>
<ow-cell>Slider</ow-cell>
<ow-cell>Uploader</ow-cell>
</ow-cells>
</div>
</li>
<li>
<div class="weui-flex js_category">
<p class="weui-flex__item">基础组件</p>
<img src="./images/icon_nav_layout.png" alt="" />
<img src={iconNavLayout} alt="" />
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="article" href="javascript:;">
<div class="weui-cell__bd">
<p>Article</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="badge" href="javascript:;">
<div class="weui-cell__bd">
<p>Badge</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="flex" href="javascript:;">
<div class="weui-cell__bd">
<p>Flex</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="footer" href="javascript:;">
<div class="weui-cell__bd">
<p>Footer</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="gallery" href="javascript:;">
<div class="weui-cell__bd">
<p>Gallery</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="grid" href="javascript:;">
<div class="weui-cell__bd">
<p>Grid</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="icons" href="javascript:;">
<div class="weui-cell__bd">
<p>Icons</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="loadmore" href="javascript:;">
<div class="weui-cell__bd">
<p>Loadmore</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="panel" href="javascript:;">
<div class="weui-cell__bd">
<p>Panel</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="preview" href="javascript:;">
<div class="weui-cell__bd">
<p>Preview</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="progress" href="javascript:;">
<div class="weui-cell__bd">
<p>Progress</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<ow-cells>
<ow-cell>Article</ow-cell>
<ow-cell>Badge</ow-cell>
<ow-cell>Flex</ow-cell>
<ow-cell>Footer</ow-cell>
<ow-cell>Gallery</ow-cell>
<ow-cell>Grid</ow-cell>
<ow-cell>Icons</ow-cell>
<ow-cell>Loadmore</ow-cell>
<ow-cell>Panel</ow-cell>
<ow-cell>Preview</ow-cell>
<ow-cell>Progress</ow-cell>
</ow-cells>
</div>
</li>
<li>
<div class="weui-flex js_category">
<p class="weui-flex__item">操作反馈</p>
<img src="./images/icon_nav_feedback.png" alt="" />
<img src={iconNavFeedback} alt="" />
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="actionsheet" href="javascript:;">
<div class="weui-cell__bd">
<p>Actionsheet</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="dialog" href="javascript:;">
<div class="weui-cell__bd">
<p>Dialog</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="msg" href="javascript:;">
<div class="weui-cell__bd">
<p>Msg</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="picker" href="javascript:;">
<div class="weui-cell__bd">
<p>Picker</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="toast" href="javascript:;">
<div class="weui-cell__bd">
<p>Toast</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<ow-cells>
<ow-cell>Actionsheet</ow-cell>
<ow-cell>Dialog</ow-cell>
<ow-cell>Msg</ow-cell>
<ow-cell>Picker</ow-cell>
<ow-cell>Toast</ow-cell>
</ow-cells>
</div>
</li>
<li>
<div class="weui-flex js_category">
<p class="weui-flex__item">导航相关</p>
<img src="./images/icon_nav_nav.png" alt="" />
<img src={iconNavNav} alt="" />
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="navbar" href="javascript:;">
<div class="weui-cell__bd">
<p>Navbar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="tabbar" href="javascript:;">
<div class="weui-cell__bd">
<p>Tabbar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<ow-cells>
<ow-cell>Navbar</ow-cell>
<ow-cell>Tabbar</ow-cell>
</ow-cells>
</div>
</li>
<li>
<div class="weui-flex js_category">
<p class="weui-flex__item">搜索相关</p>
<img src="./images/icon_nav_search.png" alt="" />
<img src={iconNavSearch} alt="" />
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="searchbar" href="javascript:;">
<div class="weui-cell__bd">
<p>Search Bar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<ow-cells>
<ow-cell>Search Bar</ow-cell>
</ow-cells>
</div>
</li>
<li>
<div class="weui-flex js_item" data-id="layers">
<p class="weui-flex__item">层级规范</p>
<img src="./images/icon_nav_z-index.png" alt="" />
<img src={iconNavZIndex} alt="" />
</div>
</li>
</ul>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer.png" /></a>
<a href="javascript:home()"><img src={iconFooter} /></a>
</div>
</div>
)

303
packages/omi-weui/src/components/cells/_index.css Normal file
View File

@ -0,0 +1,303 @@
a{
text-decoration: none;
}
.weui-cells{
margin-top:1.17647059em;
background-color:#FFFFFF;
line-height:1.47058824;
font-size:17px;
overflow:hidden;
position:relative;
}
.weui-cells:before{
content:" ";
position:absolute;
left:0;
top:0;
right:0;
height:1px;
border-top:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
z-index:2;
}
.weui-cells:after{
content:" ";
position:absolute;
left:0;
bottom:0;
right:0;
height:1px;
border-bottom:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
z-index:2;
}
.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;
}
.weui-cells__tips{
margin-top:.3em;
color:#808080;
padding-left:15px;
padding-right:15px;
font-size:14px;
}
.weui-cell{
padding:10px 15px;
position:relative;
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
}
.weui-cell:before{
content:" ";
position:absolute;
left:0;
top:0;
right:0;
height:1px;
border-top:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
left:15px;
z-index:2;
}
.weui-cell:first-child:before{
display:none;
}
.weui-cell_primary{
-webkit-box-align:start;
-webkit-align-items:flex-start;
align-items:flex-start;
}
.weui-cell__bd{
-webkit-box-flex:1;
-webkit-flex:1;
flex:1;
}
.weui-cell__ft{
text-align:right;
color:#808080;
}
.weui-cell_swiped{
display:block;
padding:0;
}
.weui-cell_swiped > .weui-cell__bd{
position:relative;
z-index:1;
background-color:#FFFFFF;
}
.weui-cell_swiped > .weui-cell__ft{
position:absolute;
right:0;
top:0;
bottom:0;
display:-webkit-box;
display:-webkit-flex;
display:flex;
color:#FFFFFF;
}
.weui-cells_radio .weui-cell__ft{
padding-left:0.35em;
}
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
display:block;
content:'\EA08';
color:#09BB07;
font-size:16px;
}
.weui-cells_checkbox .weui-cell__hd{
padding-right:0.35em;
}
.weui-cells_checkbox .weui-icon-checked:before{
content:'\EA01';
color:#C9C9C9;
font-size:23px;
display:block;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before{
content:'\EA06';
color:#09BB07;
}
.weui-cells_form .weui-cell__ft{
font-size:0;
}
.weui-cells_form .weui-icon-warn{
display:none;
}
.weui-cells_form input,
.weui-cells_form textarea,
.weui-cells_form label[for]{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
.weui-cell_warn{
color:#E64340;
}
.weui-cell_warn .weui-icon-warn{
display:inline-block;
}
.weui-media-box_small-appmsg .weui-cells{
margin-top:0;
}
.weui-media-box_small-appmsg .weui-cells:before{
display:none;
}
.weui-cell_select-before{
padding-right:15px;
}
.weui-cell_select-before .weui-select{
width:105px;
box-sizing:border-box;
}
.weui-cell_select-before .weui-cell__hd{
position:relative;
}
.weui-cell_select-before .weui-cell__hd:after{
content:" ";
position:absolute;
right:0;
top:0;
width:1px;
bottom:0;
border-right:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform:scaleX(0.5);
transform:scaleX(0.5);
}
.weui-cell_select-before .weui-cell__hd:before{
content:" ";
display:inline-block;
height:6px;
width:6px;
border-width:2px 2px 0 0;
border-color:#C8C8CD;
border-style:solid;
-webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position:relative;
top:-2px;
position:absolute;
top:50%;
right:15px;
margin-top:-4px;
}
.weui-cell_select-before .weui-cell__bd{
padding-left:15px;
}
.weui-cell_select-before .weui-cell__bd:after{
display:none;
}
.weui-cell_select-after{
padding-left:15px;
}
.weui-cell_select-after .weui-select{
padding-left:0;
}
.weui-cell_vcode{
padding-top:0;
padding-right:0;
padding-bottom:0;
}
.weui-cell_switch{
padding-top:6.5px;
padding-bottom:6.5px;
}
.weui-cell_select{
padding:0;
}
.weui-cell_select .weui-select{
padding-right:30px;
}
.weui-cell_select .weui-cell__bd:after{
content:" ";
display:inline-block;
height:6px;
width:6px;
border-width:2px 2px 0 0;
border-color:#C8C8CD;
border-style:solid;
-webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position:relative;
top:-2px;
position:absolute;
top:50%;
right:15px;
margin-top:-4px;
}
.weui-cell_access{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
color:inherit;
}
.weui-cell_access:active{
background-color:#ECECEC;
}
.weui-cell_access .weui-cell__ft{
padding-right:13px;
position:relative;
}
.weui-cell_access .weui-cell__ft:after{
content:" ";
display:inline-block;
height:6px;
width:6px;
border-width:2px 2px 0 0;
border-color:#C8C8CD;
border-style:solid;
-webkit-transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform:matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position:relative;
top:-2px;
position:absolute;
top:50%;
margin-top:-4px;
right:2px;
}
.weui-cell_link{
color:#586C94;
font-size:14px;
}
.weui-cell_link:first-child:before{
display:block;
}
.weui-cell_warn .weui-textarea-counter{
color:#E64340;
}

35
packages/omi-weui/src/components/cells/index.js Normal file
View File

@ -0,0 +1,35 @@
import { define, WeElement, getHost } from 'omi'
import style from './_index.css'
define('ow-cells', class extends WeElement {
css() {
return style + getHost(this).css()
}
render() {
return (
<div class="weui-cells">
<slot></slot>
</div>
)
}
})
define('ow-cell', class extends WeElement {
css() {
return style
}
render() {
return (
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p><slot></slot></p>
</div>
<div class="weui-cell__ft">
</div>
</a>
)
}
})