62 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
			
		
		
	
	
			62 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
| <docs>
 | |
| ---
 | |
| order: 2
 | |
| title:
 | |
|   zh-CN: æéŽæ ˇåŧ
 | |
|   en-US: radio style
 | |
| ---
 | |
| 
 | |
| ## zh-CN
 | |
| 
 | |
| æéŽæ ˇåŧįåéįģåã
 | |
| 
 | |
| ## en-US
 | |
| 
 | |
| The combination of radio button style.
 | |
| 
 | |
| </docs>
 | |
| <template>
 | |
|   <div>
 | |
|     <div>
 | |
|       <a-radio-group v-model:value="value1">
 | |
|         <a-radio-button value="a">Hangzhou</a-radio-button>
 | |
|         <a-radio-button value="b">Shanghai</a-radio-button>
 | |
|         <a-radio-button value="c">Beijing</a-radio-button>
 | |
|         <a-radio-button value="d">Chengdu</a-radio-button>
 | |
|       </a-radio-group>
 | |
|     </div>
 | |
|     <div :style="{ marginTop: '16px' }">
 | |
|       <a-radio-group v-model:value="value2">
 | |
|         <a-radio-button value="a">Hangzhou</a-radio-button>
 | |
|         <a-radio-button value="b" disabled>Shanghai</a-radio-button>
 | |
|         <a-radio-button value="c">Beijing</a-radio-button>
 | |
|         <a-radio-button value="d">Chengdu</a-radio-button>
 | |
|       </a-radio-group>
 | |
|     </div>
 | |
|     <div :style="{ marginTop: '16px' }">
 | |
|       <a-radio-group v-model:value="value3" disabled>
 | |
|         <a-radio-button value="a">Hangzhou</a-radio-button>
 | |
|         <a-radio-button value="b">Shanghai</a-radio-button>
 | |
|         <a-radio-button value="c">Beijing</a-radio-button>
 | |
|         <a-radio-button value="d">Chengdu</a-radio-button>
 | |
|       </a-radio-group>
 | |
|     </div>
 | |
|   </div>
 | |
| </template>
 | |
| <script lang="ts">
 | |
| import { defineComponent, ref } from 'vue';
 | |
| export default defineComponent({
 | |
|   setup() {
 | |
|     const value1 = ref<string>('a');
 | |
|     const value2 = ref<string>('a');
 | |
|     const value3 = ref<string>('a');
 | |
| 
 | |
|     return {
 | |
|       value1,
 | |
|       value2,
 | |
|       value3,
 | |
|     };
 | |
|   },
 | |
| });
 | |
| </script>
 |