radio component

This commit is contained in:
cookfront 2017-02-28 16:50:09 +08:00
parent f2260deaa3
commit 5235ba42be
4 changed files with 31 additions and 3 deletions

View File

@ -63,6 +63,27 @@ export default {
</script> </script>
``` ```
### 与Cell组件一起使用
```html
<z-radio-group v-model="radio4">
<z-cell-group>
<z-cell><z-radio name="1">单选框1</z-radio></z-cell>
<z-cell><z-radio name="2">单选框2</z-radio></z-cell>
</z-cell-group>
</z-radio-group>
<script>
export default {
data() {
return {
radio4: '1'
}
}
};
</script>
```
### Radio API ### Radio API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |

View File

@ -9,7 +9,10 @@
<span class="z-cell__label" v-if="label" v-text="label"></span> <span class="z-cell__label" v-if="label" v-text="label"></span>
</slot> </slot>
</div> </div>
<div class="z-cell__value" :class="{ 'is-link' : isLink }"> <div class="z-cell__value" :class="{
'is-link': isLink,
'is-alone': !title && !label
}">
<slot> <slot>
<span v-text="value"></span> <span v-text="value"></span>
</slot> </slot>

View File

@ -52,6 +52,10 @@
@when link { @when link {
margin-right: 20px; margin-right: 20px;
} }
@when alone {
float: left;
}
} }
.zui-icon-arrow { .zui-icon-arrow {

View File

@ -2,8 +2,6 @@
@component-namespace z { @component-namespace z {
@b radio { @b radio {
margin: 10px 0;
@when disabled { @when disabled {
.zui-icon { .zui-icon {
color: #d1dbe5; color: #d1dbe5;
@ -33,6 +31,8 @@
.zui-icon { .zui-icon {
font-size: 22px; font-size: 22px;
line-height: 1; line-height: 1;
position: relative;
top: 1px;
} }
.zui-icon-checked { .zui-icon-checked {