forked from opentiny/tiny-vue
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="title">按钮形式尺寸：</div>
|
||
<tiny-radio-group v-model="value" size="medium">
|
||
<tiny-radio-button label="1">选项一</tiny-radio-button>
|
||
<tiny-radio-button label="2">选项二</tiny-radio-button>
|
||
</tiny-radio-group>
|
||
|
||
<div class="mt-20">
|
||
<tiny-radio-group v-model="value" size="small">
|
||
<tiny-radio-button label="1">选项一</tiny-radio-button>
|
||
<tiny-radio-button label="2">选项二</tiny-radio-button>
|
||
</tiny-radio-group>
|
||
</div>
|
||
|
||
<div class="mt-20">
|
||
<tiny-radio-group v-model="value" size="mini">
|
||
<tiny-radio-button label="1">选项一</tiny-radio-button>
|
||
<tiny-radio-button label="2">选项二</tiny-radio-button>
|
||
</tiny-radio-group>
|
||
</div>
|
||
|
||
<div class="title mt-20">带边框尺寸：</div>
|
||
<tiny-radio-group v-model="value" size="medium">
|
||
<tiny-radio label="1" border>选项一</tiny-radio>
|
||
<tiny-radio label="2" border>选项二</tiny-radio>
|
||
</tiny-radio-group>
|
||
|
||
<div class="mt-20">
|
||
<tiny-radio-group v-model="value" size="small">
|
||
<tiny-radio label="1" border>选项一</tiny-radio>
|
||
<tiny-radio label="2" border>选项二</tiny-radio>
|
||
</tiny-radio-group>
|
||
</div>
|
||
|
||
<div class="mt-20">
|
||
<tiny-radio-group v-model="value" size="mini">
|
||
<tiny-radio label="1" border>选项一</tiny-radio>
|
||
<tiny-radio label="2" border>选项二</tiny-radio>
|
||
</tiny-radio-group>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Radio, RadioButton, RadioGroup } from '@opentiny/vue'
|
||
|
||
export default {
|
||
components: {
|
||
TinyRadio: Radio,
|
||
TinyRadioButton: RadioButton,
|
||
TinyRadioGroup: RadioGroup
|
||
},
|
||
data() {
|
||
return {
|
||
value: '1'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mt-20 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|