API Docs for: 1.3.1
Show:

element Class

Module: Yo

Yo框架element基础构造

Yo内置了包括按钮,输入框,单选,多选,区间,分值等基础元素

Methods

yo-badge

(
  • $name
  • $padding
  • $border-width
  • $bordercolor
  • $bgcolor
  • $color
  • $radius
  • $font-size
)

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

使用方法,详见 Demo

Parameters:

  • $name String

    为新的扩展定义一个名称,假设扩展了一个 $nametagyo-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 Color

    placeholder文本色

yo-loading

(
  • $name
  • $size
  • $color
  • $mask-bgcolor
  • $bgcolor
)

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

使用方法,详见 Demo

Parameters:

  • $name String

    为新的扩展定义一个名称

  • $size Length

    loading的尺寸

  • $color Color

    loading的颜色

  • $mask-bgcolor Color

    遮罩背景色

  • $bgcolor Color

    背景色

yo-loadtip

(
  • $name
  • $color
  • $font-size
  • $ico-color
)

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

使用方法,详见 Demo

Parameters:

  • $name String

    为新的扩展定义一个名称

  • $color Color

    文本色

  • $font-size Length

    字号大小

  • $ico-color Color

    ico颜色

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