drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Checkbox UI

Browse source 
add Checkbox UI
This commit is contained in:
梁灏 2016-09-20 22:00:16 +08:00
parent 4925f85fea
commit 6c5fbd8b04
13 changed files with 216 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/styles/iview.all.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

40
local/routers/radio.vue
View file

@ -74,12 +74,41 @@
<Radio value="爪哇犀牛"></Radio>
<Radio value="印度黑羚"></Radio>
</Radio-group>
<br><br><br><br>
<Checkbox :checked.sync="radio">Checkbox</Checkbox>
<br><br>
<Checkbox-group :model="social">
<Checkbox value="twitter">
<Icon type="social-twitter"></Icon>
<span>Twitter</span>
</Checkbox>
<Checkbox value="facebook">
<Icon type="social-facebook"></Icon>
<span>Facebook</span>
</Checkbox>
<Checkbox value="github">
<Icon type="social-github"></Icon>
<span>Github</span>
</Checkbox>
<Checkbox value="snapchat">
<Icon type="social-snapchat"></Icon>
<span>Snapchat</span>
</Checkbox>
</Checkbox-group>
<br><br>
<Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
<Checkbox-group :model="disabledGroup">
<Checkbox value="香蕉" disabled></Checkbox>
<Checkbox value="苹果" disabled></Checkbox>
<Checkbox value="西瓜"></Checkbox>
</Checkbox-group>
</template>
<script>
import { Radio, Alert, Icon, Collapse, Button } from 'iview';
import { Radio, Alert, Icon, Collapse, Button, Checkbox } from 'iview';
const RadioGroup = Radio.Group;
const Panel = Collapse.Panel;
const CheckboxGroup = Checkbox.Group;
export default {
components: {
@ -89,7 +118,9 @@
Icon,
Collapse,
Panel,
Button
Button,
Checkbox,
CheckboxGroup
},
props: {
@ -100,7 +131,10 @@
radioGroup: '段模',
activeKey: [1,2],
phone: 'apple',
animal: '爪哇犀牛'
animal: '爪哇犀牛',
social: ['facebook', 'github'],
disabledSingle: true,
disabledGroup: ['苹果']
}
},
computed: {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.0.12",
"version": "0.0.13",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

2
styles/common/base.less
View file

@ -46,7 +46,7 @@ a {
text-decoration: none;
outline: none;
cursor: pointer;
transition: color @transition-time ease;
.transition(color @transition-time ease);
&:hover {
color: @link-hover-color;

2
styles/components/button.less
View file

@ -54,7 +54,7 @@
content: '';
border-radius: inherit;
z-index: 1;
.transition(opacity @animation-time);
.transition(opacity @transition-time);
pointer-events: none;
display: none;
}

1
styles/components/checkbox.less Normal file
View file

@ -0,0 +1 @@
.checkboxFn();

1
styles/components/index.less
View file

@ -10,3 +10,4 @@
@import "message";
@import "notice";
@import "radio";
@import "checkbox";

10
styles/components/radio.less
View file

@ -41,7 +41,7 @@
background-color: #fff;
border: 1px solid @border-color-base;
border-radius: 50%;
.transition(all @animation-time @ease-in-out);
.transition(all @transition-time @ease-in-out);
&:after {
position: absolute;
@ -56,7 +56,7 @@
content: ' ';
background-color: @primary-color;
opacity: 0;
.transition(all @animation-time @ease-in-out);
.transition(all @transition-time @ease-in-out);
.transform(scale(0));
}
}
@ -80,7 +80,7 @@
&:after {
opacity: 1;
.transform(scale(1));
.transition(all @animation-time @ease-in-out);
.transition(all @transition-time @ease-in-out);
}
}
}
@ -126,7 +126,7 @@ span.@{radio-prefix-cls} + * {
line-height: 26px;
color: @btn-default-color;
display: inline-block;
.transition(all @animation-time ease-in-out);
.transition(all @transition-time ease-in-out);
cursor: pointer;
border: 1px solid @border-color-base;
border-left: 0;
@ -145,7 +145,7 @@ span.@{radio-prefix-cls} + * {
left: -1px;
background: @border-color-base;
visibility: hidden;
.transition(all @animation-time ease-in-out);
.transition(all @transition-time ease-in-out);
}
&:first-child {

2
styles/mixins/button.less
View file

@ -93,7 +93,7 @@
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
.transform(translate3d(0, 0, 0));
.transition(all @animation-time linear);
.transition(all @transition-time linear);
> .@{css-prefix-iconfont} {
line-height: 1;

158
styles/mixins/checkbox.less Normal file
View file

@ -0,0 +1,158 @@
.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
// 普通状态
.@{checkbox-prefix-cls} {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
outline: none;
line-height: 1;
position: relative;
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: #bcbcbc;
}
}
&-inner {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 0;
left: 0;
border: 1px solid @border-color-base;
border-radius: 3px;
background-color: #fff;
.transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
&:after {
content: '';
display: table;
width: 5px;
height: 8px;
position: absolute;
top: 2px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
.transform(rotate(45deg) scale(0));
.transition(all @transition-time @ease-in-out);
}
}
&-input {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
}
}
// 选中状态
.@{checkbox-prefix-cls}-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
}
}
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
background-color: @primary-color;
&:after {
content: '';
display: table;
width: 5px;
height: 8px;
position: absolute;
top: 2px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
.transform(rotate(45deg) scale(1));
.transition(all @transition-time @ease-in-out .1s);
}
}
}
// 禁用
.@{checkbox-prefix-cls}-disabled {
&.@{checkbox-prefix-cls}-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{checkbox-inner-prefix-cls} {
background-color: #f3f3f3;
border-color: @border-color-base;
&:after {
animation-name: none;
border-color: #ccc;
}
}
}
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
background-color: #f3f3f3;
&:after {
animation-name: none;
border-color: #f3f3f3;
}
}
.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}
& + span {
color: #ccc;
cursor: @cursor-disabled;
}
}
.@{checkbox-prefix-cls}-wrapper {
cursor: pointer;
font-size: @font-size-base;
display: inline-block;
& + & {
margin-left: 8px;
}
}
.@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span {
margin-left: 8px;
margin-right: 8px;
}
.@{checkbox-prefix-cls}-group {
font-size: @font-size-base;
&-item {
display: inline-block;
}
}
}

1
styles/mixins/index.less
View file

@ -8,3 +8,4 @@
@import "size";
@import "loading";
@import "close";
@import "checkbox";

5
styles/mixins/transition.less
View file

@ -3,3 +3,8 @@
-moz-transition: @string;
transition: @string;
}
.transition2 (@string1, @string2) {
-webkit-transition: @string1 , @string2;
-moz-transition: @string1 , @string2;
transition: @string1 , @string2;
}