sync omi-weui
This commit is contained in:
张磊
parent
d3bc559129
commit
db614049e0
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omi-weui",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"description": "> weui for Omi",
|
||||
"main": "dist/index.js",
|
||||
"directories": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omi-weui",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"description": "> weui for Omi",
|
||||
"main": "dist/index.js",
|
||||
"directories": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
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
|
||||
}
|
||||
|
||||
onTapMore = () => {
|
||||
this.fire('tapmore')
|
||||
}
|
||||
|
||||
onSelectSingle = (index) => {
|
||||
this.props.selectedIndex = index
|
||||
this.fire('select', { index: index })
|
||||
}
|
||||
|
||||
|
||||
onSelect = (index) => {
|
||||
this.props.items[index].selected = !this.props.items[index].selected
|
||||
|
||||
const arr = []
|
||||
this.props.items.map((item, index) => {
|
||||
if (item.selected) {
|
||||
arr.push(index)
|
||||
}
|
||||
})
|
||||
this.fire('select', { indexs: arr })
|
||||
}
|
||||
|
||||
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}`} ontap={() => {
|
||||
this.onSelectSingle(index)
|
||||
}}>
|
||||
<div class="weui-cell__bd">
|
||||
<p>{item.text}</p>
|
||||
</div>
|
||||
<div class="weui-cell__ft">
|
||||
<input type="radio" class="weui-check" checked={props.selectedIndex === index} name="radio1" id={`x_${this.__elementId}_${index}`} />
|
||||
<span class="weui-icon-checked"></span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
|
||||
{props.onTapMore && <a href="javascript:void(0);" ontap={this.onTapMore} 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}`} ontap={() => {
|
||||
this.onSelect(index)
|
||||
}}>
|
||||
<div class="weui-cell__hd">
|
||||
<input type="checkbox" class="weui-check" name="checkbox1" id={`x_${this.__elementId}_${index}`} checked={item.selected} />
|
||||
<i class="weui-icon-checked"></i>
|
||||
</div>
|
||||
<div class="weui-cell__bd">
|
||||
<p>standard is dealt for u.</p>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
{props.more && <a href="javascript:void(0);" class="weui-cell weui-cell_link">
|
||||
<div class="weui-cell__bd">添加更多</div>
|
||||
</a>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.weui-slider{
|
||||
padding:15px 18px;
|
||||
-webkit-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
.weui-slider__inner{
|
||||
position:relative;
|
||||
height:2px;
|
||||
background-color:#E9E9E9;
|
||||
}
|
||||
.weui-slider__track{
|
||||
height:2px;
|
||||
background-color:#1AAD19;
|
||||
width:0;
|
||||
}
|
||||
.weui-slider__handler{
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:50%;
|
||||
width:28px;
|
||||
height:28px;
|
||||
margin-left:-14px;
|
||||
margin-top:-14px;
|
||||
border-radius:50%;
|
||||
background-color:#FFFFFF;
|
||||
box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.weui-slider-box{
|
||||
display:-webkit-box;
|
||||
display:-webkit-flex;
|
||||
display:flex;
|
||||
-webkit-box-align:center;
|
||||
-webkit-align-items:center;
|
||||
align-items:center;
|
||||
}
|
||||
.weui-slider-box .weui-slider{
|
||||
-webkit-box-flex:1;
|
||||
-webkit-flex:1;
|
||||
flex:1;
|
||||
}
|
||||
.weui-slider-box__value{
|
||||
margin-left:.5em;
|
||||
min-width:24px;
|
||||
color:#808080;
|
||||
text-align:center;
|
||||
font-size:14px;
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import style from './_index.css'
|
||||
|
||||
define('ow-slider', class extends WeElement {
|
||||
css() {
|
||||
return style
|
||||
}
|
||||
|
||||
onChange = () => {
|
||||
this.fire('change', this.percentage)
|
||||
}
|
||||
|
||||
installed() {
|
||||
this._width = this._ele.getBoundingClientRect().width
|
||||
}
|
||||
|
||||
start = (evt) => {
|
||||
this._x = evt.touches[0].pageX
|
||||
document.addEventListener('touchmove', this.move)
|
||||
document.addEventListener('touchend', this.end)
|
||||
}
|
||||
|
||||
move = (evt) => {
|
||||
this.props.percentage += (evt.touches[0].pageX - this._x) / this._width * 100
|
||||
this.props.percentage < 0 && (this.props.percentage = 0)
|
||||
this.props.percentage > 100 && (this.props.percentage = 100)
|
||||
this.update()
|
||||
this._x = evt.touches[0].pageX
|
||||
}
|
||||
|
||||
end = () => {
|
||||
document.removeEventListener('touchmove', this.move)
|
||||
document.removeEventListener('touchend', this.end)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
|
||||
if (props.disabled) {
|
||||
return (
|
||||
<div class="weui-slider">
|
||||
<div ref={e => { this._ele = e }} class="weui-slider__inner">
|
||||
<div style="width: 0;" class="weui-slider__track"></div>
|
||||
<div style="left: 0;" class="weui-slider__handler"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="weui-slider-box" onTouchStart={this.start} >
|
||||
<div class="weui-slider">
|
||||
<div ref={e => { this._ele = e }} class="weui-slider__inner">
|
||||
<div id="sliderTrack" style={`width: ${props.percentage}%;`} class="weui-slider__track"></div>
|
||||
<div id="sliderHandler" ref={e => { this._handler = e }} style={`left: ${props.percentage}%;`} class="weui-slider__handler"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sliderValue" class="weui-slider-box__value">{Math.round(props.percentage)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
.weui-switch{
|
||||
-webkit-appearance:none;
|
||||
appearance:none;
|
||||
}
|
||||
.weui-switch,
|
||||
.weui-switch-cp__box{
|
||||
position:relative;
|
||||
width:52px;
|
||||
height:32px;
|
||||
border:1px solid #DFDFDF;
|
||||
outline:0;
|
||||
border-radius:16px;
|
||||
box-sizing:border-box;
|
||||
background-color:#DFDFDF;
|
||||
-webkit-transition:background-color 0.1s, border 0.1s;
|
||||
transition:background-color 0.1s, border 0.1s;
|
||||
}
|
||||
.weui-switch:before,
|
||||
.weui-switch-cp__box:before{
|
||||
content:" ";
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:50px;
|
||||
height:30px;
|
||||
border-radius:15px;
|
||||
background-color:#FDFDFD;
|
||||
-webkit-transition:-webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
|
||||
transition:-webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
|
||||
transition:transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
|
||||
transition:transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
|
||||
}
|
||||
.weui-switch:after,
|
||||
.weui-switch-cp__box:after{
|
||||
content:" ";
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:30px;
|
||||
height:30px;
|
||||
border-radius:15px;
|
||||
background-color:#FFFFFF;
|
||||
box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
-webkit-transition:-webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
|
||||
transition:-webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
|
||||
transition:transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
|
||||
transition:transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
|
||||
}
|
||||
.weui-switch:checked,
|
||||
.weui-switch-cp__input:checked ~ .weui-switch-cp__box{
|
||||
border-color:#1AAD19;
|
||||
background-color:#1AAD19;
|
||||
}
|
||||
.weui-switch:checked:before,
|
||||
.weui-switch-cp__input:checked ~ .weui-switch-cp__box:before{
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0);
|
||||
}
|
||||
.weui-switch:checked:after,
|
||||
.weui-switch-cp__input:checked ~ .weui-switch-cp__box:after{
|
||||
-webkit-transform:translateX(20px);
|
||||
transform:translateX(20px);
|
||||
}
|
||||
.weui-switch-cp__input{
|
||||
position:absolute;
|
||||
left:-9999px;
|
||||
}
|
||||
.weui-switch-cp__box{
|
||||
display:block;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { define, WeElement } from 'omi'
|
||||
import style from './_index.css'
|
||||
|
||||
define('ow-switch', class extends WeElement {
|
||||
css() {
|
||||
return style
|
||||
}
|
||||
|
||||
onChange = ()=>{
|
||||
this.fire('change', this._ele.checked)
|
||||
}
|
||||
render(props) {
|
||||
|
||||
if (props.checked) {
|
||||
return (
|
||||
|
||||
<label for={`x_${this.__elementId}`} class="weui-switch-cp">
|
||||
<input id={`x_${this.__elementId}`} ref={(e)=>{this._ele = e}} class="weui-switch-cp__input" type="checkbox" onChange={this.onChange} checked="checked" />
|
||||
<div class="weui-switch-cp__box"></div>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return <input class="weui-switch" type="checkbox" ref={(e)=>{this._ele = e}} onChange={this.onChange} ></input>
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
$primary-color: #1aad19;
|
||||
$warn-color: #e64340;
|
||||
|
||||
|
||||
.ow-toptip{
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue