element#

yo-badge( ) 3.0.0 #

描述: 构造提醒气泡的自定义使用方法，可以扩展为：tag,文字ico等形态

源码位置: ./style/lib/element/yo-badge.scss:28

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$padding Length 内补白 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0
$radius Length 圆角半径长度 3.0.0
$font-size Length 字号大小 3.0.0

yo-btn( ) 3.0.0 #

描述: 构造按钮的自定义使用方法，勿使用`input`标签，因为边框为`::after`实现

源码位置: ./style/lib/element/yo-btn.scss:41

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0
$touch-border-color Color 触点（鼠标，手指或其它）按下时边框色 3.0.0
$touch-bgcolor Color 触点（鼠标，手指或其它）按下时背景色 3.0.0
$touch-color Color 触点（鼠标，手指或其它）按下时文本色 3.0.0
$padding Length 内补白 3.0.0
$radius Length 圆角半径长度 3.0.0
$font-size Length 字号大小 3.0.0
$width Length 宽度 3.0.0
$height Length 高度 3.0.0

yo-checked( ) 3.0.0 #

描述: 构造单选多选的自定义使用方法，可同时作用于 checkbox 与 radio

源码位置: ./style/lib/element/yo-checked.scss:74

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$content String 标记符号（使用iconfont编码，可以是对勾，圆点或任意字符） 3.0.0
$size Length 元件大小 3.0.0
$font-size Length 标记符号大小 3.0.0
$border-width Length 元件边框厚度 3.0.0
$border-color Color 元件边框色 3.0.0
$bgcolor Color 元件背景色 3.0.0
$color Color 标记符号颜色 3.0.0
$on-border-color Color 选中时的元件边框色 3.0.0
$on-bgcolor Color 选中时的元件背景色 3.0.0
$on-color Color 选中时的标记符号颜色 3.0.0
$radius Length 元件外框圆角半径 3.0.0

yo-loading( ) 3.0.0 #

描述: 构造加载中的自定义使用方法

源码位置: ./style/lib/element/yo-loading.scss:30

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$ico-size Length loading的尺寸 3.0.0
$ico-color Color loading的颜色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本颜色 3.0.0
$font-size Length 文本字号 3.0.0
$content String loading的iconfont编码 3.0.0

yo-loadtip( ) 3.0.0 #

描述: 构造加载提示的自定义使用方法

源码位置: ./style/lib/element/yo-loadtip.scss:33

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$color Color 文本色 3.0.0
$font-size Length 字号大小 3.0.0
$ico-color Color ico颜色 3.0.0

yo-range( ) 3.0.0 #

描述: 构造区间选择的自定义使用方法

源码位置: ./style/lib/element/yo-range.scss:74

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$track-height Length 滑轴高度 3.0.0
$track-color Color 滑轴色 3.0.0
$on-track-color Color 选中滑轴色 3.0.0
$on-divide-color Color 选中刻度色 3.0.0
$thumb-height Length 滑球高度 3.0.0
$thumb-color Color 滑球色 3.0.0

yo-switch( ) 3.0.0 #

描述: 构造yo-switch的自定义使用方法

源码位置: ./style/lib/element/yo-switch.scss:65

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$on-bgcolor Color 定义switch激活背景色 3.0.0
$bgcolor Color 定义switch背景色 3.0.0
$follow-bgcolor Color 定义switch跟随背景色 3.0.0
$thumb-color Color 定义switch滑块色 3.0.0

fragment#

yo-actionsheet( ) 3.0.0 #

描述: 构造actionsheet的自定义使用方法

源码位置: ./style/lib/fragment/yo-actionsheet.scss:44

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$margin Length 外补白 3.0.0
$radius Length 圆角半径长度 3.0.0
$border-color Color 边线色 3.0.0
$bgcolor Color 背景色 3.0.0
$touch-bgcolor Color 点击反馈背景色 3.0.0
$item-height Length 子项高度 3.0.0
$item-font-size Length 子项字号 3.0.0
$item-color Color 子项文本色 3.0.0
$item-important-color Color 重要操作子项文本色 3.0.0

yo-breadcrumb( ) 3.0.0 #

描述: 构造面包屑的自定义使用方法

源码位置: ./style/lib/fragment/yo-breadcrumb.scss:28

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$height Length 面包屑高度 3.0.0
$bgcolor Color 面包屑背景色 3.0.0
$color Color 面包屑文本色 3.0.0
$arrow-color Color 面包屑间隔色 3.0.0
$arrow-content Color 面包屑间隔符号（可以是自定义的iconfont编码） 3.0.0
$item-space Length 面包屑子项间隙 3.0.0

yo-calendar( ) 3.0.0 #

描述: 构造yo-calendar的自定义使用方法

源码位置: ./style/lib/fragment/yo-calendar.scss:107

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$week-bar-height Length 定义星期bar高度 3.0.0
$week-bar-bgcolor Color 定义星期bar背景色 3.0.0
$week-bar-color Color 定义星期bar文本色 3.0.0
$week-bar-font-size Length 定义星期bar字号 3.0.0
$week-height Length 定义每行高度 3.0.0
$week-color Color 定义每行文本色 3.0.0
$day-height Length 定义每日高度 3.0.0
$day-margin Length 定义每日间距 3.0.0
$day-radius Length 定义每日圆角 3.0.0
$day-font-size Length 定义每日字号 3.0.0
$special-color Color 定义特殊日文本色 3.0.0
$weekend-color Color 定义周末文本色 3.0.0
$disabled-color Color 定义禁用日子文本色 3.0.0
$on-bgcolor Color 定义选中日期背景色 3.0.0
$on-color Color 定义选中日期文本色 3.0.0
$on-tip-color Color 定义选中日期提示语文本色 3.0.0
$on-tip-font-size Length 定义选中日期提示语字号 3.0.0
$range-bgcolor Color 选中日期段背景 3.0.0

yo-card( ) 3.0.0 #

描述: 构造卡片的自定义使用方法

源码位置: ./style/lib/fragment/yo-card.scss:94

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$margin Length 外边距 3.0.0
$radius Length 圆角半径长度 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框颜色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0
$font-size Length 文本字号 3.0.0
$hd-border-width Length 头部边框厚度 3.0.0
$hd-border-color Color 头部边框色 3.0.0
$ft-border-width Length 底部边框厚度 3.0.0
$ft-border-color Color 底部边框色 3.0.0

描述: 构造yo-carousel的自定义使用方法

源码位置: ./style/lib/fragment/yo-carousel.scss:62

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$btn-size Length 按钮大小 3.0.0
$btn-bgcolor Color 按钮背景色 3.0.0
$btn-color Color 按钮文本色 3.0.0
$touch-btn-bgcolor Color 按钮按下背景色 3.0.0
$touch-btn-color Color 按钮按下文本色 3.0.0
$index-size Length 索引大小 3.0.0
$index-bgcolor Color 索引背景色 3.0.0
$on-index-bgcolor Color 索引当前项背景色 3.0.0

yo-dialog( ) 3.0.0 #

描述: 构造yo-dialog的自定义使用方法

源码位置: ./style/lib/fragment/yo-dialog.scss:76

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$width Length 宽度 3.0.0
$height Length 高度 3.0.0
$radius Length 圆角半径长度 3.0.0
$border-color Color 边框色 3.0.0
$title-color Color 标题文本色 3.0.0
$title-font-size Length 标题字号 3.0.0
$bd-padding Length 主体内补白 3.0.0
$bd-font-size Length 主体字号 3.0.0

yo-group( ) 3.0.0 #

描述: 构造yo-group自定义使用方法

源码位置: ./style/lib/fragment/yo-group.scss:55

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$label-padding Length 组标题内补白 3.0.0
$label-bgcolor Color 组标题背景色 3.0.0
$label-font-size Length 组标题文本大小 3.0.0
$label-border-color Color 组标题边框色 3.0.0
$index-width Length 索引区域宽度 3.0.0
$index-color Color 索引文本色 3.0.0
$index-font-size Length 索引字号 3.0.0

yo-header( ) 3.0.0 #

描述: 构造头的自定义使用方法

源码位置: ./style/lib/fragment/yo-header.scss:49

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$height Length 高度 3.0.0
$item-width Length 两侧子项操作区宽度 3.0.0
$item-space Length 两侧子项离边界的间隙 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0
$font-size Length 字号大小 3.0.0
$item-color Color 两侧子项操作区文本色 3.0.0
$item-ico-color Color 两侧子项操作区ico色 3.0.0
$item-font-size Length 两侧子项操作区字号大小 3.0.0
$item-ico-size Length 两侧子项操作区ico大小 3.0.0

yo-list( ) 3.0.0 #

描述: 构造列表的自定义使用方法

源码位置: ./style/lib/fragment/yo-list.scss:151

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$margin Length 外边距 3.0.0
$radius Length 圆角半径长度 3.0.0
$border-width Length 外边框厚度 3.0.0
$border-color Color 边框色 3.0.0
$item-padding Length 子项的内补白 3.0.0
$label-padding Length 列表组头内补白 3.0.0
$label-bgcolor Color 列表组头背景色 3.0.0
$touch-bgcolor Color 子项点击反馈背景色 3.0.0
$on-bgcolor Color 子项选中背景色 3.0.0
$on-color Color 子项选中文本色 3.0.0
$item-border-color Color 子项边框色 3.0.0
$label-border-color Color 列表组头边框色 3.0.0
$item-font-size Length 子项字号 3.0.0
$label-font-size Length 列表组头字号 3.0.0
$item-border-space Length 子项边线左侧偏移量 3.0.0
$more-font-size Length 更多区域字号 3.0.0
$more-color Color 更多区域文本色 3.0.0

yo-modal( ) 3.0.0 #

描述: 构造yo-modal的自定义使用方法

源码位置: ./style/lib/fragment/yo-modal.scss:55

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$bgcolor Color 遮罩背景色 3.0.0
$cont-bgcolor Color 内容区背景色 3.0.0

yo-number( ) 3.0.0 #

描述: 构造列表的自定义使用方法

源码位置: ./style/lib/fragment/yo-number.scss:58

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$width Length 宽度 3.0.0
$height Length 高度 3.0.0
$radius Length 外边框圆角半径 3.0.0
$border-width Length 外边框厚度 3.0.0
$border-color Color 外边框色 3.0.0
$color Color 输入框文本色 3.0.0
$sign-radius Length 加减号区域边框圆角半径 3.0.0
$sign-border-width Length 加减号区域边框厚度 3.0.0
$sign-bgcolor Color 加减号区域背景色 3.0.0
$sign-color Color 加减号区域文本色 3.0.0
$font-size Length 输入框字号 3.0.0

yo-picker( ) 3.0.0 #

描述: 构造yo-picker的自定义使用方法

源码位置: ./style/lib/fragment/yo-picker.scss:73

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$item Integer 显示的子项个数 3.0.0
$item-height Length 子项高度 3.0.0
$border-color Color 边框色 3.0.0

yo-popup( ) 3.0.2 #

描述: 浮层的自定义使用方法

源码位置: ./style/lib/fragment/yo-popup.scss:27

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.2
$height Length 高度 3.0.2
$bgcolor Color 背景色 3.0.2

yo-proportion( ) 3.0.0 #

描述: 构造比例条的自定义使用方法

源码位置: ./style/lib/fragment/yo-proportion.scss:28

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$margin Length 外边距 3.0.0
$bgcolor Color 底色 3.0.0
$height Length 高度 3.0.0
$min-height Length 最小高度 3.0.0
$color Color 文本色 3.0.0
$font-size Color 文本字号 3.0.0
$inner-bgcolor Color 当前状态色 3.0.0

yo-rating( ) 3.0.0 #

描述: 构造yo-rating的自定义使用方法

源码位置: ./style/lib/fragment/yo-rating.scss:34

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$item-width Length 单个子项的宽度 3.0.0
$item-height Length 单个子项的高度 3.0.0
$item-space Length 子项间间隙 3.0.0
$url Color 分数图像url（注意：只需要配置文件名即可） 3.0.0

示例: 

假设你需要只读状态，可以这样：
<div class="yo-rating yo-rating-readonly">...</div>

描述: 构造搜索框的自定义使用方法

源码位置: ./style/lib/fragment/yo-search.scss:72

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$padding Length 搜索区内补白 3.0.0
$bgcolor Color 搜索区背景色 3.0.0
$font-size Length 搜索区字号 3.0.0
$input-height Length 输入框高度 3.0.0
$input-radius Length 输入框圆角半径 3.0.0
$input-bgcolor Color 输入框背景色 3.0.0
$input-color Color 输入框文本色 3.0.0
$placeholder-color Color 输入框placeholder文本色 3.0.0
$btn-bgcolor Color 搜索按钮底色 3.0.0
$btn-color Color 搜索按钮文本色 3.0.0
$cancel-width Length 取消按钮区域宽度 3.0.0
$cancel-color Color 取消按钮颜色 3.0.0

yo-suggest( ) 3.0.0 #

描述: 构造yo-suggest的自定义使用方法

源码位置: ./style/lib/fragment/yo-suggest.scss:111

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$padding Length 搜索区内补白 3.0.0
$border-color Color 搜索区边框色 3.0.0
$bgcolor Color 搜索区背景色 3.0.0
$font-size Length 搜索区字号 3.0.0
$input-height Length 输入框高度 3.0.0
$input-radius Length 输入框圆角半径 3.0.0
$input-bgcolor Color 输入框背景色 3.0.0
$input-color Color 输入框文本色 3.0.0
$placeholder-color Color 输入框placeholder文本色 3.0.0
$ico-color Color 输入框右侧图标颜色 3.0.0
$cancel-width Length 取消按钮区域宽度 3.0.0
$cancel-color Color 取消按钮颜色 3.0.0
$cont-bgcolor Color 内容区背景色 3.0.0
$mask-bgcolor Color 内容区背景色 3.0.0
$recommend-bgcolor Color 内容区背景色 3.0.0
$result-bgcolor Color 内容区背景色 3.0.0

yo-swipemenu( ) 3.0.0 #

描述: 构造yo-swipemenu的自定义使用方法

源码位置: ./style/lib/fragment/yo-swipemenu.scss:45

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$padding Length front区域内补白 3.0.0
$action-width Length action操作区宽度 3.0.0
$action-bgcolor Color action操作区背景色 3.0.0
$action-color Color action操作区文本色 3.0.0
$action-first-bgcolor Color action操作区第一个子项的背景色 3.0.0

yo-tab( ) 3.0.0 #

描述: 构造列表的自定义使用方法

源码位置: ./style/lib/fragment/yo-tab.scss:79

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$width Length 宽度 3.0.0
$height Length 高度 3.0.0
$radius Length 圆角半径长度 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0
$on-bgcolor Color 激活时背景色 3.0.0
$on-color Color 激活时文本色 3.0.0
$font-size Length 文本字号 3.0.0
$x-ico-size Length 子项内容为水平ico时，ico的大小 3.0.0
$y-ico-size Length 子项内容为垂直ico时，ico的大小 3.0.0
$only-ico-size Length 子项内容仅有ico时，ico的大小 3.0.0
$item-border-height Length 子项的间隔线高度 3.0.0
$item-border-color Color 子项的间隔线颜色 3.0.0

yo-table( ) 3.0.0 #

描述: 构造表格的自定义使用方法

源码位置: ./style/lib/fragment/yo-table.scss:52

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$width Length 宽度 3.0.0
$has-vertical-border Boolean 是否需要纵向边框 3.0.0
$thead-padding Length 头部内补白 3.0.0
$tbody-padding Length 主体内补白 3.0.0
$border-color Color 边框色 2.0.0
$thead-bgcolor Color 头部背景色 3.0.0
$odd-bgcolor Color 主体奇数行背景色 3.0.0
$even-bgcolor Color 主体偶数行背景色 3.0.0
$touch-bgcolor Color 主体激活背景色 3.0.0
$on-bgcolor Color 主体选中背景色 3.0.0

yo-timeline( ) 3.0.7 #

描述: 时间轴的自定义使用方法

源码位置: ./style/lib/fragment/yo-timeline.scss:55

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.7
$padding Length timeline元件内边距 3.0.7
$item-padding Color item底部间距 3.0.7
$side-width Length 时间区域宽度 3.0.7
$side-padding Length 时间区域右侧内边距 3.0.7
$side-margin Length 时间区域右侧外边距 3.0.7
$side-color Color 时间区域文本色 3.0.7
$point-top Length 时间轴上的关键帧顶部偏移距离 3.0.7
$point-size Length 时间轴上的关键帧尺寸大小 3.0.7
$point-border-width Length 时间轴上的关键帧边框厚度 3.0.7
$point-border-color Length 时间轴上的关键帧边框色 3.0.7
$border-width Length 时间轴线条边框厚度 3.0.7
$border-color Length 时间轴线条边框色 3.0.7
$first-item-color Length 时间轴首个子项文本颜色 3.0.7

yo-toast( ) 3.0.0 #

描述: 构造列表的自定义使用方法

源码位置: ./style/lib/fragment/yo-toast.scss:18

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$padding Length 内补白 3.0.0
$radius Length 圆角半径长度 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0

yo-toolbar( ) 3.0.0 #

描述: 构造工具条的自定义使用方法

源码位置: ./style/lib/fragment/yo-toolbar.scss:42

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$width Length 工具条固定宽度 3.0.0
$height Length 工具条固定高度 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框颜色 3.0.0
$bgcolor Color 背景色 3.0.0
$color Color 文本色 3.0.0
$on-bgcolor Color 选中时背景色 3.0.0
$on-color Color 选中时文本色 3.0.0
$item-padding Length 子项内补白 3.0.0
$radius Length 圆角半径长度 3.0.0
$font-size Length 文本字号 3.0.0

yo-vcode( ) 3.0.0 #

描述: 构造验证码/密码输入框的自定义使用方法

源码位置: ./style/lib/fragment/yo-vcode.scss:34

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$height Length 高度 3.0.0
$bgcolor Color 背景色 3.0.0
$radius Length 圆角半径长度 3.0.0
$font-size Length 字号大小 3.0.0
$border-width Length 边框厚度 3.0.0
$border-color Color 边框色 3.0.0

layout#

yo-align( ) 3.0.0 #

描述: 构造弹性布局内容对齐使用方法，可以是横向和纵向

源码位置: ./style/lib/layout/yo-align.scss:8

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$justify-content String 指定主轴对齐方式 3.0.0
$align-items String 指定侧轴对齐方式 3.0.0

yo-column( ) 3.0.0 #

描述: 构造弹性布局使用方法，可以是横向和纵向

源码位置: ./style/lib/layout/yo-column.scss:16

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$size String 指定容器的大小，取值：[auto|cover] 3.0.0

yo-flex( ) 3.0.0 #

描述: 构造弹性布局使用方法，可以是横向和纵向

源码位置: ./style/lib/layout/yo-flex.scss:29

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$direction String 指定是水平或者垂直布局 3.0.0

yo-root( ) 3.0.0 #

描述: 构造页面中的根节点布局，默认为全屏

源码位置: ./style/lib/layout/yo-root.scss:8

Demo地址: 点击访问

参数名 类型 描述 支持版本
$name String 定义扩展名称 3.0.0
$bgcolor Color 指定背景色 3.0.0