Radio

The radio button has a selection and the user can only select one of the scenarios.

platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

This component needs to be used with the radioGroup component, so that the user can get the selection status of the current radio group when operating Bind a variable to the radioGroup component through v-model, and the corresponding name will be selected

vue

<template>
  <wu-radio-group
    v-model="radiovalue1"
    placement="column"
    @change="groupChange"
  >
    <wu-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radiolist1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </wu-radio>
  </wu-radio-group>
</template>

<script>
export default {
	data() {
		return {
          // Basic case data
          radiolist1: [
            {
                name: 'JavaScript',
                disabled: false
            },
            {
                name: 'Python',
                disabled: false
            },
            {
                name: 'Java',
                disabled: false
            }, {
                name: 'C++',
                disabled: false
            }
          ],
          // If the v-model binding value of wu-radio-group is set to the name of a certain radio, it will be selected by default.
          radiovalue1: 'JavaScript',
		};
	},
	methods: {
      groupChange(n) {
        console.log('groupChange', n);
      },
      radioChange(n) {
        console.log('radioChange', n);
      }
	}
};
</script>

<template>
  <wu-radio-group
    v-model="radiovalue1"
    placement="column"
    @change="groupChange"
  >
    <wu-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radiolist1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </wu-radio>
  </wu-radio-group>
</template>

<script>
export default {
	data() {
		return {
          // Basic case data
          radiolist1: [
            {
                name: 'JavaScript',
                disabled: false
            },
            {
                name: 'Python',
                disabled: false
            },
            {
                name: 'Java',
                disabled: false
            }, {
                name: 'C++',
                disabled: false
            }
          ],
          // If the v-model binding value of wu-radio-group is set to the name of a certain radio, it will be selected by default.
          radiovalue1: 'JavaScript',
		};
	},
	methods: {
      groupChange(n) {
        console.log('groupChange', n);
      },
      radioChange(n) {
        console.log('radioChange', n);
      }
	}
};
</script>

Custom shape

You can set the radio box to be a square or a circle by setting shape to square or circle

html

<wu-radio-group v-model="value">
	<wu-radio shape="circle" label="围棋赌酒到天明"></wu-radio>
</wu-radio-group>

<wu-radio-group v-model="value">
	<wu-radio shape="circle" label="围棋赌酒到天明"></wu-radio>
</wu-radio-group>

disable radio

Set disabled to true to disable a component so that users cannot click it

html

<wu-radio-group v-model="value">
    <wu-radio :disabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group>

<wu-radio-group v-model="value">
    <wu-radio :disabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group>

Whether to prohibit clicking the prompt to select the radio

Set labelDisabled to true to disable clicking on the prompt to select the radio

html

<wu-radio-group v-model="value">
    <wu-radio :labelDisabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group>

<wu-radio-group v-model="value">
    <wu-radio :labelDisabled="true" label="把酒问青天"></wu-radio>
</wu-radio-group>

Custom Colors

The color referred to here is the background color when radio is selected, and the parameter is activeColor

html

<wu-radio-group v-model="value">
	<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>

<wu-radio-group v-model="value">
	<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>

Horizontal arrangement

You can set the radioes to be arranged horizontally or vertically by setting placement to row or column

html

<wu-radio-group 
    v-model="value"
    placement="row">
	<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>

<wu-radio-group 
    v-model="value"
    placement="row">
	<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>

Horizontal two ends arrangement form

You can set the alignment of the radio icon to be left or right by setting iconPlacement to left or right

html

<wu-radio-group 
    v-model="value"
    iconPlacement="right">
	<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>

<wu-radio-group 
    v-model="value"
    iconPlacement="right">
	<wu-radio activeColor="red" label="一日不见兮，思之如狂"></wu-radio>
</wu-radio-group>

API

Radio Props

Note: Among radio and radio-group parameters with the same name, the radio parameter has a higher priority.

property name	description	type	default value	optional values
name	the name of the radio	String / Number	-	-
shape	shape, square is a square, circle is a circle	String	square	square / circle
disabled	Whether to disable	Boolean	-	-
labelDisabled	Whether to disable clicking on the prompt to select the radio	String / Boolean	-	-
activeColor	The color in the selected state, if this value is set, it will override the parent's activeColor value	String	-	-
inactiveColor	inactive color	String	-	-
iconSize	The size of the icon, in px	String / Number	-	-
labelSize	font size of the label, in px	String / Number	-	-
label	label prompt text, because under nvue, the text directly slotted in, due to the special structure, the style cannot be modified	String / Number	-	-
size	overall size	String / Number	-	-
iconColor	icon color	String	-	-
labelColor	the color of the label	String	-	-

RadioGroup Props

property name	description	type	default value	optional values
value / modelValue	Binding value	String / Number / Boolean	''	-
disabled	Whether to disable all radios	Boolean	false	true
shape	shape, circle-circle, square-square	String	circle	circle / square
activeColor	The color in the selected state, if the child `radio` component sets this value, it will overwrite this value	String	#2979ff	-
inactiveColor	Inactive color	String	#c8c9cc	-
name	identifier	String	-	-
size	The size of the entire component, default px	String / Number	18	-
placement	layout method, row-horizontal, column-vertical	String	row	column
label	text	String	-	-
labelColor	font color of label	String	#303133	-
labelSize	font size of the label, in px	String / Number	14	-
labelDisabled	Whether to disable clicking on the text	Boolean	false	true / false
iconColor	icon color	String	#ffffff	-
iconSize	The size of the icon, in px	String / Number	12	-
borderBottom	Whether to display an underline when vertically arranging columns	Boolean	false	true / false
iconPlacement	The alignment of the check icon, left-left, right-right	String	left	left / right

Radio Event

method name	description	callback parameters
change	Triggered when a `radio` state changes (selected state)	name: `name` value passed through `props`

RadioGroup Event

method name	description	callback parameters
change	Triggered when any `radio` state changes	name: The value is the `name` value passed by `radio` through `props`

Radio ​

platform compatibility ​

Basic usage ​

Custom shape ​

disable radio ​

Whether to prohibit clicking the prompt to select the radio ​

Custom Colors ​

Horizontal arrangement ​

Horizontal two ends arrangement form ​

API ​

Radio Props ​

RadioGroup Props ​

Radio Event ​

RadioGroup Event ​

Radio

platform compatibility

Basic usage

Custom shape

disable radio

Whether to prohibit clicking the prompt to select the radio

Custom Colors

Horizontal arrangement

Horizontal two ends arrangement form

API

Radio Props

RadioGroup Props

Radio Event

RadioGroup Event