docs: reorganize radio documentation (#22144)

docs/en-US/component/radio.md

@@ -51,13 +51,21 @@ radio/disabled
 
 :::
 
-## Radio button group
+## Radio Group
 
 Suitable for choosing from some mutually exclusive options.
 
 :::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
-radio/radio-button-group
+radio/radio-group
+
+:::
+
+## With borders
+
+:::demo The `border` attribute adds a border to Radios.
+
+radio/with-borders
 
 :::
 
@@ -69,31 +77,13 @@ radio/options
 
 :::
 
-## Button style
+## Radio Button
 
-Radio with button styles.
+Radio with button group visual effect.
 
-:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
+:::demo You just need to change `el-radio` element into `el-radio-button` element. You can also set the style of the button when it is active by using `fill` and `text-color`.
 
-radio/button-style
-
-:::
-
-## Button style
-
-Radio with button styles.
-
-:::demo You can set the style of the button when it is active by using `fill` and `text-color`.
-
-radio/button-fill-textcolor
-
-:::
-
-## With borders
-
-:::demo The `border` attribute adds a border to Radios.
-
-radio/with-borders
+radio/radio-button
 
 :::
 

docs/examples/radio/button-style.vue

@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <el-radio-group v-model="radio1" size="large">
-      <el-radio-button label="New York" value="New York" />
-      <el-radio-button label="Washington" value="Washington" />
-      <el-radio-button label="Los Angeles" value="Los Angeles" />
-      <el-radio-button label="Chicago" value="Chicago" />
-    </el-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <el-radio-group v-model="radio2">
-      <el-radio-button label="New York" value="New York" />
-      <el-radio-button label="Washington" value="Washington" />
-      <el-radio-button label="Los Angeles" value="Los Angeles" />
-      <el-radio-button label="Chicago" value="Chicago" />
-    </el-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <el-radio-group v-model="radio3" size="small">
-      <el-radio-button label="New York" value="New York" />
-      <el-radio-button label="Washington" value="Washington" disabled />
-      <el-radio-button label="Los Angeles" value="Los Angeles" />
-      <el-radio-button label="Chicago" value="Chicago" />
-    </el-radio-group>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const radio1 = ref('New York')
-const radio2 = ref('New York')
-const radio3 = ref('New York')
-</script>

docs/examples/radio/radio-button.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-radio-group v-model="radio1" size="large" fill="#6cf">
+    <el-radio-group v-model="radio" size="large" fill="#6cf">
       <el-radio-button label="New York" value="New York" />
       <el-radio-button label="Washington" value="Washington" />
       <el-radio-button label="Los Angeles" value="Los Angeles" />
@@ -9,7 +9,7 @@
   </div>
   <div style="margin-top: 20px">
     <el-radio-group
-      v-model="radio2"
+      v-model="radio"
       text-color="#626aef"
       fill="rgb(239, 240, 253)"
     >
@@ -20,7 +20,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio3" size="small">
+    <el-radio-group v-model="radio" size="small">
       <el-radio-button label="New York" value="New York" />
       <el-radio-button label="Washington" value="Washington" disabled />
       <el-radio-button label="Los Angeles" value="Los Angeles" />
@@ -32,7 +32,5 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const radio1 = ref('New York')
-const radio2 = ref('New York')
-const radio3 = ref('New York')
+const radio = ref('New York')
 </script>