YDUI Touch - 常见移动端弹窗提示框集合类

定制并下载 YDUI Touch

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

有现成的配置？上传并导入你的 config.json 文件。

将文件拖拽到这里或者手动上传。

没有现成的配置文件？没关系，从下面开始自定义各字段吧。

^_^ 配置已成功上传，接下来调整你的设置，然后点击“编译并下载”。

Rem 自适应类

ydui.flexible(一点)
taobao.flexible(淘宝)
other(不使用rem，改用px)

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-active

底部导航选中时的字体颜色
@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即将大功告成。只要点击下面的按钮就可以下载了。