element Class
Yo框架element基础构造
Yo内置了包括按钮,输入框,单选,多选,区间,分值等基础元素
Item Index
Methods
yo-badge
(
-
$name
-
$padding
-
$border-width
-
$bordercolor
-
$bgcolor
-
$color
-
$radius
-
$font-size
构造提醒气泡的自定义使用方法,可以扩展为:tag, 文字ico等形态
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称,假设扩展了一个
$name
为tag
的yo-badge
,那么你可以这样使用<span class="yo-badge yo-badge-tag">
-
$padding
Length内补白
-
$border-width
Length边框厚度
-
$bordercolor
Color边框色
-
$bgcolor
Color背景色
-
$color
Color文本色
-
$radius
Length圆角半径长度
-
$font-size
Length字号大小
yo-btn
(
-
$name
-
$border-width
-
$bordercolor
-
$bgcolor
-
$color
-
$active-bordercolor
-
$active-bgcolor
-
$active-color
-
$padding
-
$radius
-
$font-size
-
$width
-
$height
构造按钮的自定义使用方法,可轻松自定义边框,尺寸,背景,文字等
使用方法,详见 Demo
Parameters:
-
$name
String为新的按钮扩展定义一个名称
-
$border-width
Length按钮边框厚度
-
$bordercolor
Color按钮边框色
-
$bgcolor
Color按钮背景色
-
$color
Color按钮文本色
-
$active-bordercolor
Color触点(鼠标,手指或其它)按下时的按钮边框色
-
$active-bgcolor
Color触点(鼠标,手指或其它)按下的按钮背景色
-
$active-color
Color触点(鼠标,手指或其它)按下的按钮文本色
-
$padding
Length按钮内补白
-
$radius
Length按钮圆角半径长度
-
$font-size
Length按钮字号大小
-
$width
Length按钮宽度
-
$height
Length按钮高度
yo-checked
(
-
$name
-
$content
-
$size
-
$font-size
-
$border-width
-
$bordercolor
-
$bgcolor
-
$color
-
$on-bordercolor
-
$on-bgcolor
-
$on-color
-
$radius
构造单选多选的自定义使用方法,可同时作用于 checkbox 与 radio
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称
-
$content
String标记(对勾,圆点或者任意字符,可以是webfonts的编码)
-
$size
Length元件大小
-
$font-size
Length标记大小
-
$border-width
Length边框厚度
-
$bordercolor
Color边框色
-
$bgcolor
Color背景色
-
$color
Color标记色
-
$on-bordercolor
Color选中时的边框色
-
$on-bgcolor
Color选中时的背景色
-
$on-color
Color选中时的标记色
-
$radius
Length圆角半径长度
yo-input
(
-
$name
-
$width
-
$height
-
$padding
-
$radius
-
$bordercolor
-
$bgcolor
-
$color
-
$placeholder-color
构造输入框的自定义使用方法,可同时作用于 input 与 textarea
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称
-
$width
Length宽度
-
$height
Length高度
-
$padding
Length内补白
-
$radius
Length圆角半径长度
-
$bordercolor
Color边框色
-
$bgcolor
Color背景色
-
$color
Color文本色
-
$placeholder-color
Colorplaceholder文本色
yo-loading
(
-
$name
-
$size
-
$color
-
$mask-bgcolor
-
$bgcolor
构造加载中的自定义使用方法
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称
-
$size
Lengthloading的尺寸
-
$color
Colorloading的颜色
-
$mask-bgcolor
Color遮罩背景色
-
$bgcolor
Color背景色
yo-loadtip
(
-
$name
-
$color
-
$font-size
-
$ico-color
构造加载提示的自定义使用方法
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称
-
$color
Color文本色
-
$font-size
Length字号大小
-
$ico-color
Colorico颜色
yo-range
(
-
$name
-
$inner-bgcolor
-
$outer-bgcolor
-
$ball-color
构造区间选择的自定义使用方法
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称
-
$inner-bgcolor
Color已选择区域滑条色
-
$outer-bgcolor
Color未选择区域滑条色
-
$ball-color
Color滑块色
yo-score
(
-
$name
-
$item-width
-
$item-height
-
$url
构造评分展示的自定义使用方法
使用方法,详见 Demo
Parameters:
-
$name
String为新的扩展定义一个名称
-
$item-width
Length单项宽度
-
$item-height
Length单项高度
-
$url
String背景图片url