Fxiaoke Developer Manual
Table of Contents

Switch

# FxSwitch

A toggle switch that represents the transition between two opposing states, commonly used for triggering "on/off" scenarios.

# Basic Usage

Bind v-model to a Boolean variable. Use active-color and inactive-color properties to set the background colors.

<fx-switch
  v-model="value">
</fx-switch>
<fx-switch
  v-model="value"
  size="medium"
  tip="Tooltip text">
</fx-switch>
<fx-switch
  v-model="value"
  size="small">
</fx-switch>
<fx-switch
  v-model="value"
  size="mini"
  active-color="#13ce66"
  inactive-color="#ff4949">
</fx-switch>

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

# Text Description

Use active-text and inactive-text properties to set descriptive text.

<fx-switch
  v-model="value1"
  active-text="Monthly payment"
  inactive-text="Annual payment">
</fx-switch>
<fx-switch
  style="display: block"
  v-model="value2"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="Monthly payment"
  inactive-text="Annual payment">
</fx-switch>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: true
      }
    }
  };
</script>
Expand Copy

# Extended Value Types

Set active-value and inactive-value properties to accept Boolean, String or Number values.

<fx-tooltip :content="'Switch value: ' + value" placement="top">
  <fx-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </fx-switch>
</fx-tooltip>

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

# Disabled State

Set disabled property with a Boolean value to disable the switch.

<fx-switch
  v-model="value1"
  disabled>
</fx-switch>
<fx-switch
  v-model="value2"
  disabled>
</fx-switch>
<script>
  export default {
    data() {
      return {
        value1: true,
        value2: false
      }
    }
  };
</script>
Expand Copy

# Attributes

Attribute Description Type Options Default Platform Support
value / v-model Binding value boolean / string / number — — PC/Mobile
disabled Whether disabled boolean — false PC/Mobile
width Switch width (px) number — 40 (52 for mobile) PC/Mobile
height Switch height (px) number — 32 Mobile only
active-icon-class Icon class when active (overrides active-text) string — — PC only
inactive-icon-class Icon class when inactive (overrides inactive-text) string — — PC only
active-text Text description when active string — — PC only
inactive-text Text description when inactive string — — PC only
active-value Value when active boolean / string / number — true PC only
inactive-value Value when inactive boolean / string / number — false PC only
active-color Background color when active string — #409EFF PC only
inactive-color Background color when inactive string — #C0CCDA PC only
name Native name attribute string — — PC only
validate-event Whether to trigger form validation when state changes boolean - true PC only
size Component size string medium / small / mini — PC only
tip Tooltip text on hover string — — PC only

# Events

Event Name Description Callback Parameters Platform Support
change Triggered when state changes New state value PC/Mobile

# Methods

Method Description Parameters Platform Support
focus Focus the Switch component - PC only
Cascader
Time Picker

← Time Picker→