界面组件 UI Components

开关 Toggle

  1. 默认开关
  2. 图标开关
  3. 应用场景
  4. Vue.js Reference
  5. React Native Reference

开关是快速在两种状态间切换的控件，通常用于打开或关闭某项功能。用户点击开关后，立即触发切换动作。

适用情况

  • 用户点击后立即打开或关闭功能。
  • 当同一页面中有多个开关时，应将其置于列表中并竖向排列。

不适用情况

  • 用户需要二次确认是否打开或者关闭该功能。
  • 当同一页面中有多个开关时，将其横向排列。

默认开关

此图示为云闪付系统中的默认开关，让用户快速打开或关闭某项功能。 切换动作应于用户点击后立即触发，无需用户二次确认。

<up-toggle @onChange="onChange"></up-toggle>

<script>
export default {
	methods:{
		onChange(ev){},
	}
}
</script>

import {Toggle} from 'up-qp-dls';

<Toggle checked={this.state.toggleDefault} onChange={value => this.setState({toggleDefault: value})} />

图标开关

图标开关是开关按钮的另一种风格表现，用户透过图标样式快速识别与联系其功能。 此处以收藏图标按钮为例，图标应易于理解，能让用户将样式（心状）和其功能（收藏）联系在一起。

<up-toggle
	checked-icon='up_iconsys_collection'
	unchecked-icon="up_iconsys_collection"
	checked-icon-color-class='has-text-primary'
	unchecked-icon-color-class='has-text-gray2'
	@onChange="onChange">
</up-toggle>
<script>
export default {
	methods:{
		onChange(ev){},
	}
}
</script>

import {Toggle} from 'up-qp-dls';
<Toggle
            type="icon"
            checked={this.state.toggleImage}
            onChange={value => this.setState({toggleImage: value})}
            checkedIcon = {require('../icons/toggleOnRedHeart.png')}
            uncheckedIcon = {require('../icons/toggleOffGrayHeart.png')}
            />

应用场景

  • 使用开关 (Toggle) 来打开/关闭功能，请勿使用单选框。

  • 当一组开关性质的选项之间有优先级时，请勿使用开关，使用多选框 (Checkbox)。

Vue.js Reference

属性 说明 类型 可选值 默认值
v-model 开关状态，双向数据绑定 Boolean - false
checked-icon 打开状态下的图标类名 String - -
unchecked-icon 关闭状态下的图标类名 String - -
checked-icon-color-class 打开状态下图标的颜色类 String 已定义的色盘颜色text class值 -
unchecked-icon-color-class 关闭状态下图标的颜色类 String 已定义的色盘颜色text class值 -
disabled 是否禁用 Boolean - false
事件 说明 参数
onChange 状态发生变化时触发 status: Boolean

React Native Reference

属性 说明 类型 可选值 默认值
checked 开关状态 Boolean - false
checkedIcon 选中状态下的图标资源，不填则为默认状态 String - -
uncheckedIcon 未选中状态下的图标资源 String - -
disabled 是否禁用 Boolean - false
名称 说明
onChange 状态发生变化时触发