forked from fanruan/fineui
windy
7 years ago
11 changed files with 283 additions and 0 deletions
@ -0,0 +1,52 @@
|
||||
/** |
||||
* Created by Windy on 2018/2/1. |
||||
*/ |
||||
/** |
||||
* guy |
||||
* 复选框item |
||||
* @type {*|void|Object} |
||||
*/ |
||||
BI.Switch = BI.inherit(BI.BasicButton, { |
||||
|
||||
props: { |
||||
extraCls: "bi-switch", |
||||
height: 22, |
||||
width: 44, |
||||
logic: { |
||||
dynamic: false |
||||
} |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.absolute", |
||||
ref: function () { |
||||
self.layout = this; |
||||
}, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "circle-button bi-card" |
||||
}, |
||||
width: 18, |
||||
height: 18, |
||||
top: 2, |
||||
left: this.options.selected ? 24 : 2 |
||||
}] |
||||
} |
||||
}, |
||||
|
||||
setSelected: function (v) { |
||||
BI.Switch.superclass.setSelected.apply(this, arguments); |
||||
this.layout.attr("items")[0].left = v ? 24 : 2; |
||||
this.layout.resize(); |
||||
}, |
||||
|
||||
doClick: function () { |
||||
BI.Switch.superclass.doClick.apply(this, arguments); |
||||
this.fireEvent(BI.Switch.EVENT_CHANGE); |
||||
} |
||||
}); |
||||
BI.Switch.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.switch", BI.Switch); |
@ -0,0 +1,15 @@
|
||||
.bi-switch { |
||||
-webkit-border-radius: 40px 40px 40px 40px; |
||||
-moz-border-radius: 40px 40px 40px 40px; |
||||
border-radius: 40px 40px 40px 40px; |
||||
background-color: #d4dadd; |
||||
} |
||||
.bi-switch:active, |
||||
.bi-switch.active { |
||||
background-color: #3f8ce8; |
||||
} |
||||
.bi-switch .circle-button { |
||||
-webkit-border-radius: 9px 9px 9px 9px; |
||||
-moz-border-radius: 9px 9px 9px 9px; |
||||
border-radius: 9px 9px 9px 9px; |
||||
} |
@ -0,0 +1,12 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-switch{ |
||||
.border-radius(40px 40px 40px 40px); |
||||
background-color: @background-color-dark; |
||||
&:active, &.active { |
||||
background-color: @color-bi-background-highlight; |
||||
} |
||||
& .circle-button{ |
||||
.border-radius(9px 9px 9px 9px); |
||||
} |
||||
} |
Loading…
Reference in new issue