Fxiaoke Developer Manual
Table of Contents

Radio

# FxRadio

Single selection among a set of options.

# Basic Usage

Since options are visible by default, they should not be too numerous. For cases with many options, consider using the Select component instead.

Option Option

To use the Radio component, simply bind a variable with v-model. The selected state corresponds to the Radio's label value, which can be String, Number, or Boolean.

<template>
  <fx-radio v-model="radio" label="1">Option</fx-radio>
  <fx-radio v-model="radio" label="2">Option</fx-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>
Expand Copy

# Disabled State

The disabled state of Radio.

Option Option

Set the disabled attribute on the el-radio element. It accepts a Boolean where true means disabled.

<template>
  <fx-radio disabled v-model="radio" label="Disabled">Option</fx-radio>
  <fx-radio disabled v-model="radio" label="Selected & Disabled">Option</fx-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: 'Selected & Disabled'
      };
    }
  }
</script>
Expand Copy

# Radio Group

For scenarios requiring selection among mutually exclusive options.

Option Option Option

Combine el-radio-group with child el-radio elements to create a radio group. Bind v-model to el-radio-group and set label for each el-radio. No need to bind variables individually. The change event is provided to handle value changes, receiving the selected value as parameter.

<template>
  <fx-radio-group v-model="radio">
    <fx-radio :label="3">Option</fx-radio>
    <fx-radio :label="6">Option</fx-radio>
    <fx-radio :label="9">Option</fx-radio>
  </fx-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: 3
      };
    }
  }
</script>
Expand Copy

# Button Style

Radio group with button-style appearance.

Replace el-radio elements with el-radio-button elements. The size attribute is also supported.

<template>
  <div>
    <fx-radio-group v-model="radio1">
      <fx-radio-button label="Shanghai"></fx-radio-button>
      <fx-radio-button label="Beijing"></fx-radio-button>
      <fx-radio-button label="Guangzhou"></fx-radio-button>
      <fx-radio-button label="Shenzhen"></fx-radio-button>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio2" size="medium">
      <fx-radio-button label="Shanghai"></fx-radio-button>
      <fx-radio-button label="Beijing"></fx-radio-button>
      <fx-radio-button label="Guangzhou"></fx-radio-button>
      <fx-radio-button label="Shenzhen"></fx-radio-button>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio3" size="small">
      <fx-radio-button label="Shanghai"></fx-radio-button>
      <fx-radio-button label="Beijing" disabled></fx-radio-button>
      <fx-radio-button label="Guangzhou"></fx-radio-button>
      <fx-radio-button label="Shenzhen"></fx-radio-button>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio4" disabled size="mini">
      <fx-radio-button label="Shanghai"></fx-radio-button>
      <fx-radio-button label="Beijing"></fx-radio-button>
      <fx-radio-button label="Guangzhou"></fx-radio-button>
      <fx-radio-button label="Shenzhen"></fx-radio-button>
    </fx-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: 'Shanghai',
        radio2: 'Shanghai',
        radio3: 'Shanghai',
        radio4: 'Shanghai'
      };
    }
  }
</script>
Expand Copy

# With Border

Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2

Set the border attribute to render Radio with border.

<template>
  <div>
    <fx-radio v-model="radio1" label="1" border>Option 1</fx-radio>
    <fx-radio v-model="radio1" label="2" border>Option 2</fx-radio>
  </div>
  <div style="margin-top: 20px">
    <fx-radio v-model="radio2" label="1" border size="medium">Option 1</fx-radio>
    <fx-radio v-model="radio2" label="2" border size="medium">Option 2</fx-radio>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio3" size="small">
      <fx-radio label="1" border>Option 1</fx-radio>
      <fx-radio label="2" border disabled>Option 2</fx-radio>
    </fx-radio-group>
  </div>
  <div style="margin-top: 20px">
    <fx-radio-group v-model="radio4" size="mini" disabled>
      <fx-radio label="1" border>Option 1</fx-radio>
      <fx-radio label="2" border>Option 2</fx-radio>
    </fx-radio-group>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1'
      };
    }
  }
</script>
Expand Copy

# Radio Attributes

Attribute Description Type Options Default PC/Mobile Support
value / v-model binding value string / number / boolean — — PC/Mobile
label Radio's value string / number / boolean — — PC/Mobile
disabled whether disabled boolean — false PC/Mobile
border whether to show border boolean — false PC only
size Radio size, works when border is true string medium / small / mini — PC only
name native name attribute string — — PC only

# Radio Events

Event Name Description Callback Parameters PC/Mobile Support
change triggers when binding value changes selected Radio label value PC/Mobile

# Radio-group Attributes

Attribute Description Type Options Default PC/Mobile Support
value / v-model binding value string / number / boolean — — PC/Mobile
size size of radio buttons, works when type is button or border is true string medium / small / mini — PC only
disabled whether disabled boolean — false PC/Mobile
text-color text color when button is active string — #ffffff PC only
fill fill and border color when button is active string — #409EFF PC only

# Radio-group Events

Event Name Description Callback Parameters PC/Mobile Support
change triggers when binding value changes selected Radio label value PC/Mobile

# Radio-button Attributes

Attribute Description Type Options Default PC/Mobile Support
label Radio's value string / number — — PC/Mobile
disabled whether disabled boolean — false PC/Mobile
name native name attribute string — — PC only
Button
Checkbox

← Checkbox→