文档
Yo 是一款基于 Mobile First 理念而设计的 CSS Framework,它轻量,易用且自定义能力高度强大,同时也适应于PC端的高级浏览器
Yo 是一款基于 Mobile First 理念而设计的 CSS Framework,它轻量,易用且自定义能力高度强大,同时也适应于PC端的高级浏览器
描述信息:定义弹性下落动画
demo:查看示例
示例(代码形式):
<div class="ani elastic-in-down">该元素将会被应用elastic-in-down动画</div>
源文件: ../lib/core/classes.scss:66
版本号:1.7.0
描述信息:四则运算(iOS6.0+,Android4.4+)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$property | String | 指定需要进行计算的CSS属性 | 1.7.0 |
$value | String | 与原生CSS语法一致,区别在于需要使用引号包裹表达式 | 1.7.0 |
示例(代码形式):
<div class="calc">四则运算</div> .calc { @include calc(width, "100% - 100px"); }
源文件: ../lib/core/classes.scss:91
版本号:1.0.0
描述信息:定义响应式方案
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$media | String | 指定媒体查询条件,取值为`config`文件map `media-types`中的值 | 1.0.0 |
源文件: ../lib/core/classes.scss:109
版本号:1.0.0
描述信息:清除浮动方案
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$type | String | 指定清除浮动的方式,包括:pseudo-element | bfc,默认值:pseudo-element | 1.8.5 |
源文件: ../lib/core/classes.scss:133
版本号:1.0.0
描述信息:清除行内级元素间间隙方案
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$font-size | Length | 指定子元素字号,默认值:config基准字号 | 2.0.0 |
示例(代码形式):
<div class="demo"> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> </div> .demo {@include killspace;}
源文件: ../lib/core/classes.scss:158
版本号:2.0.0
描述信息:元素在包含块中的对齐方式,默认为水平垂直对齐
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$flexbox | String | 指定包含块布局方式,可选值:flex | inline-flex,默认值:flex | 2.0.0 |
$type | String | 指定居中元素类型,可选值:image | text,默认值:text | 2.0.0 |
$justify-content | Keywords | 指定元素水平对齐方式,取值与`justify-content`属性一致,默认值:center | 2.0.0 |
$align-items | Keywords | 指定元素垂直对齐方式,取值与`align-items`属性一致,默认值:center | 2.0.0 |
示例(代码形式):
<div class="demo"> <img src="*.jpg" alt="未知尺寸图片居中" /> </div> .demo {@include align;}
源文件: ../lib/core/classes.scss:187
版本号:1.4.0
描述信息:定义文档根节点是否允许滚动
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$is-scroll | Boolean | 指定是否有滚动,默认值:false | 1.8.6 |
源文件: ../lib/core/classes.scss:208
版本号:1.0.0
描述信息:定义是否有滚动条
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$overflow | String | 取值与最新原生语法一致,默认值:auto | 1.0.0 |
源文件: ../lib/core/classes.scss:226
版本号:1.7.0
描述信息:生成全屏方法
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$z-index | Integer | 指定层叠级别 | 1.7.0 |
$position | Keywords | 指定定位方式,取除`static | relative`之外的值,默认值:absolute | 1.8.5 |
源文件: ../lib/core/classes.scss:244
版本号:1.7.0
描述信息:定义使用何种滤镜
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$filter | String | 取值与`filter`属性一致 | 1.7.0 |
源文件: ../lib/core/classes.scss:256
版本号:1.0.0
描述信息:定义UA默认外观
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$appearance | String | 取值与`appearance`属性一致,默认值:none | 1.0.0 |
源文件: ../lib/core/classes.scss:268
版本号:1.0.0
描述信息:定义如何选中内容
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$user-select | String | 取值与`user-select`属性一致,默认值:none | 1.0.0 |
源文件: ../lib/core/classes.scss:280
版本号:1.0.0
描述信息:定义盒模型
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$box-sizing | String | 指定盒模型类型,取值与`box-sizing`属性一致,默认值:border-box | 1.0.0 |
源文件: ../lib/core/classes.scss:292
版本号:1.0.0
描述信息:定义渐变色值
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$type | String | 指定渐变的4种类型:linear, repeating-linear, radial, repeating-radial | 1.0.0 |
$dir | String | 指定渐变方向,可选值:[left | right] || [top | bottom] | angle | 2.0.0 |
$gradient | String | 指定渐变取值,与w3c最新原生语法一致 | 1.0.0 |
源文件: ../lib/core/classes.scss:326
版本号:1.4.0
描述信息:定义背景图像缩放(AndroidBrowser2.3.*还需要厂商前缀)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$background-size | Keywords | Length | 指定背景图缩放值,取值与`background-size`属性一致 | 1.4.0 |
源文件: ../lib/core/classes.scss:338
版本号:1.6.0
描述信息:定义背景裁减(AndroidBrowser2.3.*还需要厂商前缀)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$background-clip | Keywords | 指定背景图缩放值,取值与`background-clip`属性一致 | 1.6.0 |
源文件: ../lib/core/classes.scss:350
版本号:1.6.0
描述信息:定义背景显示区域(AndroidBrowser2.3.*还需要厂商前缀)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$background-origin | Keywords | 指定背景图`background-position`属性计算相对的参考点,取值与`background-origin`属性一致 | 1.6.0 |
源文件: ../lib/core/classes.scss:362
版本号:1.6.0
描述信息:定义圆角,用于修复某些安卓机型上“圆角+边框+背景”,背景溢出的情况
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$border-radius | Length | 指定元素的圆角半径,取值与`border-radius`属性一致 | 1.6.0 |
源文件: ../lib/core/classes.scss:376
版本号:2.0.0
描述信息:为元素添加边框(包括1px边框)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$border-width | String | 指定边框厚度(单位为px),默认值:1px,取值与`border-width`属性一致,不同方向代表边框位置 | 2.0.0 |
$border-color | String | 指定边框颜色 | 2.0.0 |
$border-style | String | 指定边框样式 | 2.0.0 |
$radius | String | 指定边框圆角半径,默认值:null | 2.0.0 |
源文件: ../lib/core/classes.scss:434
版本号:1.0.0
描述信息:定义简单变换
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$transform | String | 取值范围与`transform`属性一致 | 1.0.0 |
源文件: ../lib/core/classes.scss:446
版本号:1.0.0
描述信息:定义变换原点
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$transform-origin | Length | Percentage | Keywords | 取值范围与`transform-origin`属性一致 | 1.0.0 |
源文件: ../lib/core/classes.scss:458
版本号:2.0.0
描述信息:指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$transform-style | String | 取值范围与`transform-style`属性一致 | 2.0.0 |
源文件: ../lib/core/classes.scss:470
版本号:2.0.0
描述信息:指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定。
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$perspective | none | Length | 取值范围与`perspective`属性一致 | 2.0.0 |
源文件: ../lib/core/classes.scss:482
版本号:2.0.0
描述信息:指定透视点的位置
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$perspective-origin | Length | Percentage | Keywords | 取值范围与`perspective-origin`属性一致 | 2.0.0 |
源文件: ../lib/core/classes.scss:494
版本号:2.0.0
描述信息:指定元素背面面向用户时是否可见
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$backface-visibility | Keywords | 取值范围与`backface-visibility`属性一致 | 2.0.0 |
源文件: ../lib/core/classes.scss:544
版本号:1.0.0
描述信息:定义显示类型为伸缩盒
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$flexbox | String | 默认值:flex,可选值:flex | inline-flex | 1.0.0 |
源文件: ../lib/core/classes.scss:578
版本号:1.0.0
描述信息:定义伸缩盒子元素如何分配空间
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$flex | Number | 取值与`flex`属性一致,默认值:1 | 1.0.0 |
$direction | String | 默认值: row,可选值:row | column | 1.5.0 |
源文件: ../lib/core/classes.scss:613
版本号:1.0.0
描述信息:定义伸缩盒子元素的排版顺序
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$order | Integer | 取值与`order`属性一致,默认值:1 | 1.0.0 |
源文件: ../lib/core/classes.scss:639
版本号:2.0.0
描述信息:定义弹性盒子元素流动方向及遇见边界时是否换行(iOS7.0+,Android4.4+)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$flex-flow | String | 取值与`flex-flow`属性一致,默认值:row nowrap | 2.0.0 |
源文件: ../lib/core/classes.scss:652
版本号:1.0.0
描述信息:定义伸缩盒子元素的流动方向
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$flex-direction | String | 取值与`flex-direction`属性一致,默认值:row | 1.0.0 |
源文件: ../lib/core/classes.scss:711
版本号:1.0.0
描述信息:定义弹性盒子元素溢出后排版(iOS7.0+,Android4.4+)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$flex-wrap | String | 取值与`flex-wrap`属性一致,默认值:nowrap | 1.0.0 |
源文件: ../lib/core/classes.scss:725
版本号:1.0.0
描述信息:定义弹性容器主轴对齐方式(其中`space-around`值需要iOS7.0+,Android4.4+)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$justify-content | String | 取值与`justify-content`属性一致,默认值:center | 1.0.0 |
源文件: ../lib/core/classes.scss:806
版本号:1.8.5
描述信息:定义多行弹性容器侧轴对齐方式(iOS7.0+,Android4.4+)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$align-content | String | 取值与`align-content`属性一致,默认值:center | 1.8.5 |
源文件: ../lib/core/classes.scss:881
版本号:1.0.0
描述信息:定义单行弹性容器侧轴对齐方式
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$align-items | String | 取值与`align-items`属性一致,默认值:center | 1.0.0 |
源文件: ../lib/core/classes.scss:936
版本号:1.0.0
描述信息:定义弹性容器中子元素自身的在侧轴对齐方式(iOS7.0+,Android4.4+)
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$align-self | String | 取值与`align-self`属性一致,默认值:center | 1.0.0 |
源文件: ../lib/core/classes.scss:987
版本号:1.0.0
描述信息:生成矩形方法
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$width | Length | 定义矩形的长度 | 1.0.0 |
$height | Length | 定义矩形的高度 | 1.0.0 |
源文件: ../lib/core/classes.scss:1001
版本号:1.0.0
描述信息:生成正方形方法
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$size | Length | 定义正方形的边长 | 1.0.0 |
源文件: ../lib/core/classes.scss:1014
版本号:1.0.0
描述信息:生成圆形方法
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$size | Length | 定义圆的半径长度 | 1.0.0 |
$radius | Length | 定义圆的圆角半径长度 | 1.0.0 |
源文件: ../lib/core/classes.scss:1028
版本号:1.0.0
描述信息:链接处理方法
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$color | Color | 定义链接颜色 | 1.0.0 |
源文件: ../lib/core/classes.scss:1044
版本号:1.0.0
描述信息:文本碰到边界是否换行
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$is-wrap | Boolean | 定义文本是否换行,默认值:true | 2.0.0 |
源文件: ../lib/core/classes.scss:1061
版本号:1.0.0
描述信息:单行文本溢出时显示省略号
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$width | Length | 定义容器的宽度,默认值:null | 2.0.0 |
源文件: ../lib/core/classes.scss:1076
版本号:1.0.0
描述信息:文字隐藏方案
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$width | Length | 定义容器的宽度,默认值:null | 2.0.0 |
源文件: ../lib/core/function.scss:undefined
版本号:2.1.0
描述信息:返回SassList中的第一项
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$list | String | 指定一个Sass List | 2.1.0 |
源文件: ../lib/core/function.scss:undefined
版本号:2.1.0
描述信息:返回SassList中的最后一项
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$list | String | 指定一个Sass List | 2.1.0 |
源文件: ../lib/core/function.scss:undefined
版本号:2.1.0
描述信息:返回SassList中的倒数第几项
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$list | String | 指定一个Sass List | 2.1.0 |
$index | Integer | 指定需要返回的值在list中的倒数位置 | 2.1.0 |
源文件: ../lib/core/function.scss:undefined
版本号:2.1.0
描述信息:移除SassList中的某个项目并返回新的List
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$list | String | 指定一个Sass List | 2.1.0 |
$value | String | 指定需要被删除的值 | 2.1.0 |
源文件: ../lib/core/function.scss:undefined
版本号:2.1.0
描述信息:截取SassList中的某个部分并返回新的List
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$list | String | 指定一个Sass List | 2.1.0 |
$start | Integer | 指定需要截取的开始下标 | 2.1.0 |
$end | Integer | 指定需要截取的结束下标(不包括end),当该值缺省时默认为末尾下标 | 2.1.0 |
源文件: ../lib/core/function.scss:undefined
版本号:2.1.0
描述信息:从SassList中添加/删除项目,然后返回新的List。
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$list | String | 指定一个Sass List | 2.1.0 |
$index | Integer | 指定需要移除的开始下标 | 2.1.0 |
$count | Integer | 指定需要移除的数量,不可以为负值,0表示不移除 | 2.1.0 |
$values | String | 指定需要添加的新值(可以是多个),如果该值缺省,则表示只移除不添加新值 | 2.1.0 |
源文件: ../lib/core/classes.scss:505
版本号:1.0.0
描述信息:定义动画
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$animation | String | 取值与原生语法一致 | 1.0.0 |
源文件: ../lib/core/classes.scss:516
版本号:1.0.0
描述信息:定义补间
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$transition | String | 取值与原生语法一致 | 1.0.0 |
源文件: ../lib/element/yo-badge.scss:21
版本号:1.0.0
描述信息:构造提醒气泡的自定义使用方法,可以扩展为:tag,文字ico等形态
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$padding | Length | 内补白 | 1.4.0 |
$border-width | Length | 边框厚度 | 1.4.0 |
1.1.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
$font-size | Length | 字号大小 | 1.0.0 |
源文件: ../lib/element/yo-btn.scss:45
版本号:1.0.0
描述信息:构造按钮的自定义使用方法,勿使用`input`标签,因为边框为`::after`实现
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$border-width | Length | 边框厚度 | 1.4.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
1.3.1 | |||
$active-border-color | Color | 触点(鼠标,手指或其它)按下时边框色 | 2.0.0 |
$active-bgcolor | Color | 触点(鼠标,手指或其它)按下时背景色 | 1.3.1 |
$active-color | Color | 触点(鼠标,手指或其它)按下时文本色 | 1.3.1 |
$padding | Length | 内补白 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
$font-size | Length | 字号大小 | 1.0.0 |
$width | Length | 宽度 | 1.8.0 |
$height | Length | 高度 | 1.8.0 |
源文件: ../lib/element/yo-checked.scss:76
版本号:1.0.0
描述信息:构造单选多选的自定义使用方法,可同时作用于
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$content | String | 标记(使用webfonts编码,可以是对勾,圆点或任意字符) | 1.4.0 |
$size | Length | 元件大小 | 1.0.0 |
$font-size | Length | 标记大小 | 1.4.0 |
$border-width | Length | 边框厚度 | 1.4.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 标记色 | 1.4.0 |
1.3.1 | |||
$on-border-color | Color | 选中时的边框色 | 2.0.0 |
$on-bgcolor | Color | 选中时的背景色 | 1.3.1 |
$on-color | Color | 选中时的标记色 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.3.1 |
源文件: ../lib/element/yo-input.scss:23
版本号:1.0.0
描述信息:构造输入框的自定义使用方法,可同时作用于
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 宽度 | 1.0.0 |
$height | Length | 高度 | 1.0.0 |
$padding | Length | 内补白 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
$placeholder-color | Color | placeholder文本色 | 1.0.0 |
源文件: ../lib/element/yo-loading.scss:38
版本号:1.0.0
描述信息:构造加载中的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$ico-size | Length | loading的尺寸 | 1.5.0 |
$ico-color | Color | loading的颜色 | 1.5.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$mask-bgcolor | Color | 遮罩背景色 | 1.0.0 |
$font-size | Length | 文本字号 | 1.5.0 |
$color | Color | 文本颜色 | 1.5.0 |
$content | String | loading形态 | 1.5.0 |
源文件: ../lib/element/yo-loadtip.scss:35
版本号:1.1.0
描述信息:构造加载提示的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.1.0 |
$color | Color | 文本色 | 1.1.0 |
$font-size | Length | 字号大小 | 1.1.0 |
$ico-color | Color | ico颜色 | 1.1.0 |
源文件: ../lib/element/yo-range.scss:50
版本号:1.0.0
描述信息:构造区间选择的自定义使用方法(安卓4.3及以下有点问题)
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$inner-bgcolor | Color | 已选择区域滑条色 | 1.0.0 |
$outer-bgcolor | Color | 未选择区域滑条色 | 1.0.0 |
$ball-color | Color | 滑块色 | 1.0.0 |
源文件: ../lib/element/yo-score.scss:26
版本号:1.3.1
描述信息:构造评分展示的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.3.1 |
$item-width | Length | 单项宽度 | 1.3.1 |
$item-height | Length | 单项高度 | 1.3.1 |
$url | String | 背景图片url | 1.3.1 |
源文件: ../lib/fragment/yo-breadcrumb.scss:29
版本号:2.0.0
描述信息:构造面包屑的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 2.0.0 |
$height | Length | 面包屑高度 | 2.0.0 |
$bgcolor | Color | 面包屑背景色 | 2.0.0 |
$color | Color | 面包屑文本色 | 2.0.0 |
$arrow-color | Color | 面包屑间隔色 | 2.0.0 |
$item-space | Length | 面包屑子项间隙 | 2.0.0 |
源文件: ../lib/fragment/yo-btnbar.scss:87
版本号:1.0.0
描述信息:构造按钮组的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
源文件: ../lib/fragment/yo-header.scss:51
版本号:1.0.0
描述信息:构造头的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$height | Length | 高度 | 1.0.0 |
$item-width | Length | 两侧子项操作区宽度 | 1.0.0 |
$item-space | Length | 两侧子项离边界的间隙 | 1.0.0 |
$border-width | Length | 边框厚度 | 1.8.3 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
$font-size | Length | 字号大小 | 1.0.0 |
$item-color | Color | 两侧子项操作区文本色 | 1.2.0 |
$item-ico-color | Color | 两侧子项操作区ico色 | 1.8.0 |
$item-font-size | Length | 两侧子项操作区字号大小 | 1.0.0 |
$item-ico-size | Length | 两侧子项操作区ico大小 | 1.4.0 |
源文件: ../lib/fragment/yo-list.scss:144
版本号:1.0.0
描述信息:构造列表的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$margin | Length | 外边距 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
$border-width | Length | 外边框厚度 | 1.4.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$item-padding | Length | 子项的内补白 | 1.0.0 |
$label-padding | Length | 列表组头内补白 | 1.0.0 |
$label-bgcolor | Color | 列表组头背景色 | 1.0.0 |
$active-bgcolor | Color | 子项点击反馈背景色 | 1.0.0 |
$on-bgcolor | Color | 子项选中背景色 | 1.0.0 |
$on-color | Color | 子项选中文本色 | 1.4.0 |
$has-last-border | Boolean | 是否有最后一根底边线 | 2.1.0 |
1.2.0 | |||
$item-border-color | Color | 子项边框色 | 2.0.0 |
1.2.0 | |||
$label-border-color | Color | 列表组头边框色 | 2.0.0 |
$item-font-size | Length | 子项字号 | 1.2.0 |
$label-font-size | Length | 列表组头字号 | 1.2.0 |
$item-border-space | Length | 子项下边线距离左侧的间隙 | 1.8.0 |
$detail-font-size | Length | 详情区域字号 | 2.0.0 |
$detail-color | Color | 详情区域文本色 | 2.0.0 |
$info-font-size | Length | 描述区域字号 | 2.0.0 |
$info-color | Color | 描述区域文本色 | 2.0.0 |
$more-font-size | Length | 更多区域字号 | 2.0.0 |
$more-color | Color | 更多区域文本色 | 2.0.0 |
源文件: ../lib/fragment/yo-proportion.scss:30
版本号:2.0.0
描述信息:构造面包屑的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 2.0.0 |
$margin | Length | 外边距 | 2.0.0 |
$bgcolor | Color | 底色 | 2.0.0 |
$height | Length | 高度 | 2.0.0 |
$min-height | Length | 最小高度 | 2.0.0 |
$color | Color | 文本色 | 2.0.0 |
$font-size | Color | 文本字号 | 2.0.0 |
$inner-bgcolor | Color | 当前状态色 | 2.0.0 |
源文件: ../lib/fragment/yo-table.scss:54
版本号:1.0.0
描述信息:构造表格的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | String | 宽度 | 1.0.0 |
$has-vertical-border | Boole | 是否需要纵向边框 | 1.0.0 |
$thead-padding | Length | 头部内补白 | 1.0.0 |
$tbody-padding | Length | 主体内补白 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$thead-bgcolor | Color | 头部背景色 | 1.0.0 |
$odd-bgcolor | Color | 主体奇数行背景色 | 1.0.0 |
$even-bgcolor | Color | 主体偶数行背景色 | 1.0.0 |
$active-bgcolor | Color | 主体激活背景色 | 1.0.0 |
$on-bgcolor | Color | 主体选中背景色 | 1.0.0 |
源文件: ../lib/layout/yo-align.scss:10
版本号:1.8.0
描述信息:构造弹性布局内容对齐使用方法,可以是横向和纵向
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.8.0 |
1.8.0 | |||
$justify-content | String | 指定主轴对齐方式 | 2.0.0 |
1.8.0 | |||
$align-items | String | 指定侧轴对齐方式 | 2.0.0 |
源文件: ../lib/layout/yo-flex.scss:31
版本号:1.4.0
描述信息:构造弹性布局使用方法,可以是横向和纵向
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.4.0 |
1.4.0 | |||
$direction | String | 指定是水平或者垂直布局 | 1.4.0 |
源文件: ../lib/layout/yo-stacked.scss:10
版本号:1.0.0
描述信息:构造独立区块布局
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$margin | Color | 外边距 | 1.0.0 |
源文件: ../lib/widget/yo-datepicker.scss:132
版本号:1.8.1
描述信息:构造yo-datepicker的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.8.1 |
$week-bar-height | Length | 定义星期bar高度 | 1.8.1 |
$week-bar-bgcolor | Color | 定义星期bar背景色 | 1.8.1 |
$week-bar-color | Color | 定义星期bar文本色 | 1.8.1 |
$week-bar-font-size | Length | 定义星期bar字号 | 1.8.1 |
$month-bar-height | Length | 定义月份bar高度 | 1.8.1 |
1.8.1 | |||
$month-bar-border-color | Color | 定义月份bar边线色 | 2.0.0 |
$month-bar-bgcolor | Color | 定义月份bar背景色 | 1.8.1 |
$month-bar-color | Color | 定义月份bar文本色 | 1.8.1 |
$month-bar-font-size | Length | 定义月份bar字号 | 1.8.1 |
$week-height | Length | 定义每行高度 | 1.8.1 |
1.8.1 | |||
$week-border-color | Color | 定义每行边线色 | 2.0.0 |
$week-color | Color | 定义每行文本色 | 1.8.1 |
$day-height | Length | 定义每日高度 | 1.8.1 |
$day-margin | Length | 定义每日间距 | 1.8.1 |
$day-radius | Length | 定义每日圆角 | 1.8.1 |
$day-font-size | Length | 定义每日字号 | 1.8.1 |
$special-color | Color | 定义特殊日文本色 | 1.8.1 |
$weekend-color | Color | 定义周末文本色 | 1.8.1 |
$disabled-color | Color | 定义禁用日子文本色 | 1.8.1 |
$on-bgcolor | Color | 定义选中日期背景色 | 1.8.1 |
$on-color | Color | 定义选中日期文本色 | 1.8.1 |
$on-tip-color | Color | 定义选中日期提示语文本色 | 1.8.1 |
$on-tip-font-size | Length | 定义选中日期提示语字号 | 1.8.1 |
$start-content | String | 定义开始日期提示语 | 1.8.1 |
$end-content | String | 定义结束日期提示语 | 1.8.1 |
源文件: ../lib/widget/yo-dialog.scss:81
版本号:1.0.0
描述信息:构造yo-dialog的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 宽度 | 1.0.0 |
$height | Length | 高度 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
$shadow-opacity | Number | 阴影透明度 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$hd-height | Length | 头部高度 | 1.0.0 |
$hd-bgcolor | Color | 头部背景色 | 1.0.0 |
$title-color | Color | 标题文本色 | 1.0.0 |
$title-font-size | Length | 标题字号 | 1.0.0 |
$bd-padding | Length | 主体内补白 | 1.0.0 |
$bd-font-size | Length | 主体字号 | 1.0.0 |
源文件: ../lib/widget/yo-doublelist.scss:23
版本号:1.8.6
描述信息:构造yo-doublelist的自定义使用方法(原yo-dblist)
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.3.1 |
$aside-width | Length | 侧边栏宽度 | 1.3.1 |
$aside-order | Length | 侧边栏顺序 | 1.3.1 |
源文件: ../lib/widget/yo-group.scss:31
版本号:1.0.0
描述信息:构造yo-group自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$top | Length | 顶部偏移值 | 1.0.0 |
源文件: ../lib/widget/yo-index.scss:20
版本号:1.0.0
描述信息:构造yo-index的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 宽度 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
$font-size | Length | 文本字号 | 1.0.0 |
源文件: ../lib/widget/yo-mask.scss:15
版本号:1.0.0
描述信息:构造yo-mask的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
源文件: ../lib/widget/yo-number.scss:56
版本号:1.0.0
描述信息:构造列表的自定义使用方法
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 宽度 | 1.0.0 |
$height | Length | 高度 | 1.0.0 |
$outer-radius | Length | 外边框圆角半径 | 2.0.0 |
$outer-border-width | Length | 外边框厚度 | 2.0.0 |
$inner-radius | Length | 内边框圆角半径 | 2.0.0 |
$inner-border-width | Length | 内边框厚度 | 2.0.0 |
1.0.0 | |||
$border-color | Color | 外边框色 | 2.0.0 |
$color | Color | 输入框文本色 | 1.0.0 |
$sign-bgcolor | Color | 加减号背景色 | 1.0.0 |
$sign-color | Color | 加减号文本色 | 1.0.0 |
1.0.0 | |||
$font-size | Length | 输入框字号 | 2.0.0 |
源文件: ../lib/widget/yo-panel.scss:31
版本号:1.6.0
描述信息:构造yo-panel的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.6.0 |
$top | Length | 顶部偏移值 | 1.6.0 |
源文件: ../lib/widget/yo-popup.scss:116
版本号:1.0.0
描述信息:构造yo-popup的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 宽度 | 1.0.0 |
$height | Length | 高度 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
$shadow-opacity | Number | 阴影透明度 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$hd-height | Length | 头部高度 | 1.0.0 |
$hd-bgcolor | Color | 头部背景色 | 1.0.0 |
$title-color | Color | 标题文本色 | 1.0.0 |
$title-font-size | Length | 标题字号 | 1.0.0 |
$bd-padding | Length | 主体内补白 | 1.0.0 |
$arrow-size | Length | 箭头高度 | 1.0.0 |
源文件: ../lib/widget/yo-rating.scss:75
版本号:1.2.0
描述信息:构造yo-rating的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.2.0 |
$item-width | Length | 单项宽度 | 1.2.0 |
$item-height | Length | 单项高度 | 1.2.0 |
$url | Color | 星星图片url | 1.3.1 |
示例(代码形式):
假设你需要只读状态,可以这样: <div class="yo-rating yo-rating-readonly">...</div>
源文件: ../lib/widget/yo-select.scss:81
版本号:1.0.0
描述信息:构造yo-select的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 显示的子项个数 | 1.0.0 |
$height | Length | 子项高度 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
源文件: ../lib/widget/yo-slidermenu.scss:38
版本号:1.4.0
描述信息:构造yo-slidermenu的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.4.0 |
$action-width | Length | action宽度 | 1.4.0 |
$action-bgcolor | Color | action背景色 | 1.4.0 |
源文件: ../lib/widget/yo-suggest.scss:125
版本号:1.6.0
描述信息:构造yo-suggest的自定义使用方法(原yo-search)
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$height | Length | 高度 | 1.0.0 |
$font-size | Length | 字号大小 | 1.0.0 |
$op-padding | Length | 搜索区内补白 | 1.0.0 |
$radius | Length | 搜索框圆角半径长度 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
1.0.0 | |||
$on-border-color | Color | 激活边框色 | 2.0.0 |
$on-bgcolor | Color | 激活背景色 | 1.0.0 |
$placeholder-color | Color | 占位符背景色 | 1.0.0 |
$ico-color | Color | 操作区ico颜色 | 1.0.0 |
$cancel-color | Color | 取消按钮颜色 | 1.0.0 |
$op-bgcolor | Color | 搜索区域背景色 | 1.0.0 |
$mask-bgcolor | Color | 遮罩背景色 | 1.0.0 |
$cancel-width | Length | 取消按钮区域宽度 | 1.4.0 |
源文件: ../lib/widget/yo-switch.scss:51
版本号:1.0.0
描述信息:构造yo-switch的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
1.0.0 | |||
$checked-border-color | Color | 定义switch激活边框色 | 2.0.0 |
$checked-bgcolor | Color | 定义switch激活背景色 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 定义switch边框色 | 2.0.0 |
$bgcolor | Color | 定义switch背景色 | 1.0.0 |
$ball-color | Color | 定义switch滑块色 | 1.0.0 |
源文件: ../lib/widget/yo-switchable.scss:66
版本号:1.0.0
描述信息:构造yo-switchable的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$has-btn | Boolen | 是否有按钮 | 1.0.0 |
$btn-size | Length | 按钮大小 | 1.0.0 |
$btn-bgcolor | Length | 按钮背景色 | 1.0.0 |
$btn-color | Length | 按钮文本色 | 1.0.0 |
$btn-active-bgcolor | Color | 按钮按下背景色 | 1.0.0 |
$btn-active-color | Length | 按钮按下文本色 | 1.0.0 |
$index-size | Length | 索引大小 | 1.0.0 |
$index-bgcolor | Color | 索引背景色 | 1.0.0 |
$index-on-bgcolor | Length | 索引当前项背景色 | 1.0.0 |
源文件: ../lib/widget/yo-tab.scss:73
版本号:1.0.0
描述信息:构造列表的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$width | Length | 宽度 | 1.8.3 |
$height | Length | 高度 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.3.1 |
$border-width | Length | 边框厚度 | 1.0.0 |
1.0.0 | |||
$border-color | Color | 边框色 | 2.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
$on-bgcolor | Color | 激活时背景色 | 1.0.0 |
$on-color | Color | 激活时文本色 | 1.0.0 |
$font-size | Color | 文本字号 | 1.2.0 |
$x-ico-size | Color | 子项内容为水平ico时,ico的大小 | 1.2.0 |
$y-ico-size | Color | 子项内容为垂直ico时,ico的大小 | 1.2.0 |
$only-ico-size | Color | 子项内容仅有ico时,ico的大小 | 1.2.0 |
$item-border-height | Length | 子项的间隔线高度 | 1.3.1 |
1.3.1 | |||
$item-border-color | Color | 子项的间隔线颜色 | 2.0.0 |
源文件: ../lib/widget/yo-tip.scss:17
版本号:1.0.0
描述信息:构造列表的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 1.0.0 |
$padding | Length | 内补白 | 1.0.0 |
$radius | Length | 圆角半径长度 | 1.0.0 |
$bgcolor | Color | 背景色 | 1.0.0 |
$color | Color | 文本色 | 1.0.0 |
源文件: ../lib/widget/yo-vcode.scss:35
版本号:2.0.0
描述信息:构造验证码/密码输入框的自定义使用方法
demo:查看示例
参数:
参数名 | 类型 | 描述 | 版本支持 |
---|---|---|---|
$name | String | 定义扩展名称 | 2.0.0 |
$height | Length | 高度 | 2.0.0 |
$bgcolor | Color | 背景色 | 2.0.0 |
$radius | Length | 圆角半径长度 | 2.0.0 |
$font-size | Length | 字号大小 | 2.0.0 |
$border-width | Length | 边框厚度 | 2.0.0 |
$border-color | Color | 边框色 | 2.0.0 |