嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

定制并下载 YDUI Touch

通过自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI吧。

有现成的配置?上传并导入你的 config.json 文件。
将文件拖拽到这里或者
没有现成的配置文件?没关系,从下面开始自定义各字段吧。
^_^ 配置已成功上传,接下来调整你的设置,然后点击“编译并下载”。

Rem 自适应类

Less文件JavaScript

Less变量(rem计算方式:设计图尺寸px / 100 = 实际rem  例: 100px = 1rem) [展开全部]

Global (全局)

  • @base-zindex
    z-index基数(无需修改)
  • @body-bg
    body的背景颜色
  • @body-padding-vertical
    body两侧的内边距
  • @body-padding-bottom
    body的下内边距
  • @line-color
    内容里面的边框颜色
  • @line-high-color
    内容外边框的边框颜色
  • @max-width
    body的最大宽
  • @min-width
    body的最小宽

Button (按钮) 需要帮助?
点击标题「显示/隐藏」所有变量哦!

  • @btn-radius
    小按钮的圆角角度
  • @btn-fontsize
    小按钮文字字号
  • @btn-height
    小按钮的高度
  • @btn-default-color
    默认按钮的字体颜色
  • @btn-block-radius
    块级按钮的圆角角度
  • @btn-block-fontsize
    块级按钮的文字字号
  • @btn-block-height
    块级按钮的高度
  • @btn-block-margin-top
    块级按钮的上外边距
  • @btn-primary-bg
    primary按钮的背景颜色
  • @btn-danger-bg
    danger按钮的背景颜色
  • @btn-warning-bg
    warning按钮的背景颜色
  • @btn-disabled-bg
    禁用按钮的背景颜色
  • @btn-disabled-color
    禁用按钮的字体颜色
  • @btn-hollow-bg
    hollow按钮的背景颜色
  • @btn-hollow-color
    hollow按钮的字体颜色

Cell (表单) 需要帮助?

  • @cell-title-fontsize
    cell标题的文字字号
  • @cell-title-color
    cell标题的字体颜色
  • @cell-height
    cell每行的高度
  • @cell-left-color
    cell左边内容的字体颜色
  • @cell-left-fontsize
    cell左边内容的文字字号
  • @cell-right-color
    cell右边内容的字体颜色
  • @cell-right-fontsize
    cell右边内容的文字字号
  • @cell-input-color
    文本框的字体颜色
  • @cell-input-fontsize
    文本框的文字字号
  • @cell-icon-fontsize
    图标(字体图标)的大小
  • @cell-select-color
    下拉框的字体颜色
  • @cell-select-fontsize
    下拉框的文字字号
  • @cell-arrow-color
    右箭头的颜色
  • @cell-arrow-fontsize
    右箭头的大小

Grids (网格) 需要帮助?

  • @grids-fontsize
    网格的文字字号
  • @grids-color
    网格的字体颜色
  • @grids-bg
    网格的背景颜色
  • @grids-padding-horizontal
    网格的上下内边距
  • @grids-line-color
    网格内容里的边框颜色
  • @grids-line-high-color
    网格的底边颜色

NavBar (顶部导航) 需要帮助?

  • @navbar-height
    顶部导航的高度
  • @navbar-bg
    顶部导航的背景颜色
  • @navbar-center-width
    顶部导航中间部分所占比例
  • @navbar-center-fontsize
    导航中间内容的文字字号
  • @navbar-center-color
    导航中间内容的字体颜色
  • @navbar-item-fontsize
    顶部导航两边内容的文字字号
  • @navbar-item-color
    顶部导航两侧内容的字体颜色
  • @navbar-icon-color
    顶部导航图标的颜色
  • @navbar-icon-fontsize
    顶部导航图标的大小
  • @navbar-border-color
    顶部导航的下边框颜色

TabBar (底部导航) 需要帮助?

  • @tabbar-bg
    底部导航的背景颜色
  • @tabbar-border-color
    底部导航的上边框颜色
  • @tabbar-color
    底部导航文字的字体颜色
  • @tabbar-color-crt
    底部导航选中时的字体颜色
  • @tabbar-text-fontsize
    底部导航的文字字号
  • @tabbar-icon-color
    底部导航的图标颜色
  • @tabbar-icon-fontsize
    底部导航的图标大小

ActionSheet (上拉菜单)

  • @actionsheet-bg
    actionsheet背景色
  • @actionsheet-item-height
    主体部分每行内容的高度
  • @actionsheet-item-bg
    主体部分背景色
  • @actionsheet-item-fontsize
    主体部分文字字号
  • @actionsheet-item-color
    主体部分文字颜色
  • @actionsheet-item-border-color
    主体部分每行边框颜色
  • @actionsheet-action-height
    操作按钮的高度
  • @actionsheet-action-bg
    操作按钮的背景颜色
  • @actionsheet-action-fontsize
    操作按钮的字体字号
  • @actionsheet-action-color
    操作按钮的字体颜色

Tab (选项卡)

  • @tab-bg
    选项卡背景颜色
  • @tab-height
    选项卡高度
  • @tab-fontsize
    选项卡字体字号
  • @tab-color
    选项卡字体颜色
  • @tab-color-crt
    选项卡选中字体颜色
  • @tab-break-color
    选项卡分隔符颜色
  • @tab-bottom-border-color
    选项卡底边颜色

Badge (角标)

  • @badge-default-bg
    默认角标背景颜色
  • @badge-default-color
    默认角标字体颜色
  • @badge-primary-bg
    primary 角标背景颜色
  • @badge-danger-bg
    danger 角标背景颜色
  • @badge-warning-bg
    warning 角标背景颜色
  • @badge-hollow-bg
    hollow 角标背景颜色
  • @badge-hollow-color
    hollow 角标字体颜色

下载

恭喜!你的专属YDUI即将大功告成。只要点击下面的按钮就可以下载了。