Common pug component templates
通用pug组件模板
目录
Install
安装
$ cnpm i [-S|D] pugs
Useage
使用方式一: web端js
const menu = ;let html = ;console; // -> <div class="menu">...</div>
使用方式二: node服务端js
const components = ;let html = components; // 或者直接引用目标组件包 可以有效减少缓存const menu = ;let html = ; console; // -> <div class="menu">...</div>
使用方式三: web端pug(jade) 或 node服务端pug(jade) 模板
//- 需要在locals中预设locals.menu对象数据include ~pugs/menu
使用方式四(推荐): web端pug(jade) 或 node服务端pug(jade) mixin
include ~pugs/mixins/menu+menu({...});
Alert
信息提示
// 参数说明 // locals.alert, 必须, 否则输出为空 alert: // prefix: 'alert', // 类前缀, 可选, 默认alert // style: 'success', // 样式, 可选, 默认空 // dismiss: true, // 关闭按钮, 可选, 默认true, false不渲染 fade: false // 过渡效果, 可选, 默认false icon: name: 'success' // 图标, 可选, 默认空 html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染 text: 'alert' // 内容文本, 可选, 最后渲染
<!-- 输出html结构 --> × 带html的 <!-- 参数html的值 --> alert <!-- 参数text的值 -->
Box
内容区域, 用于隔离功能区域
// 参数说明 // locals.box, 必须, 否则输出为空 box: // prefix: 'box', // 类前缀, 可选, 默认box, 则标题区域为box-hd, 内容区域为box-hd cls: 'box-more' // 最外层额外class类, 可选, 默认为空 title: 'title' // 标题, 可选, 如果不传或为空则不渲染标题区域 html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染 text: 'box' // 内容文本, 可选, 最后渲染
<!-- 输出html结构 --> title 带html的 <!-- 参数html的值 --> box <!-- 参数text的值 -->
Breadcrumb
面包屑
// 参数说明 // locals.breadcrumb, 必须, 否则输出为空 breadcrumb: cls: 'breadcrumb' 'breadcrumb-more' // 最外层class类, 可选, 默认breadcrumb, 覆盖形式 active_cls: 'active' 'active-more' // 自动选中最后一个的类, 可选, 默认空 // 如果默认的item结构不满足需求, 可以通过item字符串模板或回调自定义结构, 可选 // item: '<a href="${url}" class="${active}">${name}</a>', // item: (item, i) => { // console.log(item); // console.log(i); // return `<a href="${item.url}" class="${item.active && 'active' || ''}">${item.name}</a>`; // }, // 子项, 必须, 否则输出为空 items: name: 'Home' // 名称, 必须 url: '/' // url, 可选, 名称在此项有值时为a标签 cls: 'first' 'home' // 额外的类定义 name: 'Library' name: 'Data'
<!-- 输出html结构 --> Home Library Data <!-- 自动选中最后一个 -->
Button
按钮
// 参数说明 // locals.button, 必须, 否则输出为空 button: // prefix: 'btn', // 类前缀, 可选, 默认btn cls: 'btn-more' // 额外class类, 可选, 默认为空 // href: '', // 设置链接地址, 可选, 空为button标签, 非空为a标签 // type: 'button', // 按钮类型, 可选, 默认button name: 'button-name' // 名称, 可选, 默认和a标签时不设置此属性 style: 'primary' // 样式, 可选, 默认不带样式 // size: 'sm', // 尺寸, 可选, 默认尺寸为空, 大(lg), 小(sm), 超小(xs) // block: false, // 块级, 可选, 默认false非块级, true块级 // active: false, // 激活, 可选, 默认false非激活, true激活 // disabled: false, // 禁用, 可选, 默认false非禁用, true禁用 html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染 text: 'button' // 内容文本, 可选, 最后渲染 // 带图标的按钮, 可选, 非空则自动调用并将值对象传入icon // icon: { // prefix: 'fa', // name: 'spinner', // },
<!-- 输出html结构 --> 带html的 <!-- 参数html的值 --> button <!-- 参数text的值 -->
Checkbox
单选/复选
// 参数说明 // locals.checkbox, 必须, 否则输出为空 checkbox: // fake: false, // 自定义单选/复选, 可选, 默认false原生, true自定义 // icon: false, // 增加额外i标签以显示icon, 可选, 默认false不增加, 需要fake和icon同时为true时才会增加 // label: false, // 增加label包裹, 可选, 默认false不包裹 // radio: false, // 单选, 可选, 默认false复选, true单选 // id: 'checkbox-id', // id, 可选, 同input cls: 'checkbox-more' // 额外的class类, 可选, 默认为空 name: 'checkbox-name' // 键, 同input value: 'checkbox-value' // 值, 同input // checked: false, // 选中状态, 可选, 默认false非选中 // readonly: false, // 只读状态, 可选, 同input // disabled: false, // 禁用状态, 可选, 同input
<!-- 输出html结构 -->
// 参数说明 // locals.checkbox, 必须, 否则输出为空 checkbox: fake: true // 自定义单选/复选, 可选, 默认false原生, true自定义 // icon: false, // 增加额外i标签以显示icon, 可选, 默认false不增加, 需要fake和icon同时为true时才会增加 // label: false, // 增加label包裹, 可选, 默认false不包裹 radio: true // 单选, 可选, 默认false复选, true单选 id: 'radio-id' // id, 可选, 同input cls: 'radio-more' // 额外的class类, 可选, 默认为空 name: 'radio-name' // 键, 同input value: 'radio-value' // 值, 同input checked: true // 选中状态, 可选, 默认false非选中 readonly: true // 只读状态, 可选, 同input disabled: true // 禁用状态, 可选, 同input html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染, 仅fake为true时可用 text: 'radio' // 内容文本, 可选, 最后渲染, 仅fake为true时可用
<!-- 输出html结构 --> 带html的 <!-- 参数html的值 --> radio <!-- 参数text的值 -->
Dismiss
关闭按钮
// 参数说明 // locals.dismiss, 必须, 否则输出为空 dismiss: name: 'modal' // 需要关闭的对象名称, 必须, 会在标签中生成data-dismiss=${name}的属性 cls: 'close' 'close-more' // class类, 可选, 默认close, 覆盖形式 // html: '<span aria-hidden="true">×</span>', // 内容html, 可选
<!-- 输出html结构 --> ×
Dropdown
下拉列表/菜单
// 参数说明 // locals.dropdown, 必须, 否则输出为空 dropdown: // prefix: 'dropdown', // 类前缀, 可选, 默认dropdown // wrap: true, // 最外层包裹, 可选, 默认true cls: 'dropdown-more' // 额外class类, 可选, 默认为空 up: true // 向上弹出, 可选, 默认false向下弹出 static: true // 静态展示, 可选, 默认false align: 'right' // 向右对齐, 可选, 默认为空向左对齐 size: 'sm' // 按钮尺寸, 可选, 默认为空正常尺寸 html: '<strong>带html的</strong>' // button内html内容, 可选, 最先渲染, 仅fake为true时可用 text: 'dropdown' // button内容文本, 可选, 最后渲染, 仅fake为true时可用 // 如果默认的item结构不满足需求, 可以通过item回调自定义结构, 可选 // item: (item, i) => { // console.dir(item); // console.dir(i); // return `<a href="${item.url}"><i class="icon icon-${item.icon.name}"></i>${item.name}</a>`; // }, // 下拉列表项, 可选, 默认空列表则整个下拉框为禁用状态 items: header: 'Dropdown header' name: 'Action' url: 'javascript:;' icon: name: 'action' name: 'Another action' url: 'javascript:;' name: 'Something else here' url: 'javascript:;' target: '_blank' divider: true // 在当前项前增加分割线, 可选, 优先级最高 header: 'Dropdown header' // 在当前项前增加额外标题, 可选, 优先级低于分割线 name: 'Separated link' url: 'javascript:;' name: 'Disabled link' url: 'javascript:;' disabled: true // 禁用选择, 可选, 默认false
<!-- 输出html结构 --> 带html的 <!-- 参数html的值 --> dropdown <!-- 参数text的值 --> Dropdown header Action Another action Something else here Dropdown header Separated link Disabled link
File
文件上传按钮
// 参数说明 // locals.file, 必须, 否则输出为空 file: // prefix: 'btn', // 类前缀, 可选, 同button cls: 'btn-more' // 额外class类, 可选, 同button // href: '', // 设置链接地址, 可选, 同button // type: 'button', // 按钮类型, 可选, 同button style: 'primary' // 样式, 可选, 同button // size: 'sm', // 尺寸, 可选, 同button // block: false, // 块级, 可选, 同button // active: false, // 激活, 可选, 同button // disabled: false, // 禁用, 可选, 为true时会额外禁用file input html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染 text: 'file' // 内容文本, 可选, 最后渲染 // 带图标的按钮, 可选, 同button icon: prefix: 'fa' name: 'upload' // file input控件的attributes属性设置 input: name: 'file' attributes: multiple: 'multiple'
<!-- 输出html结构 --> 带html的 <!-- 参数html的值 --> file <!-- 参数text的值 -->
Form
表单
// 参数说明 // locals.form, 必须, 否则输出为空 form: // prefix: 'form', // 类前缀, 可选, 默认form type: 'horizontal' // 表单排列类型, 可选, 默认为空, horizontal水平排列, inline内联排列 cls: 'form-more' // 额外class类, 可选, 默认为空 name: 'form-name' // 名称, 可选, 默认为空 action: '/path/to/action' // 提交地址, 可选, 默认当前页 method: 'post' // 提交方法, 可选, 默认get file: true // 带文件提交, 可选, 默认false, true时将会自动设置enctype属性值为multipart/form-data // fieldset: true, // 自动渲染一个下级fieldset, 可选, 默认true渲染, false不渲染 disabled: true // 禁用整个表单, 作用于fieldset上, 如fieldset为false, 则此选项无效, 可选, 默认false title: 'title' // legend标题, 可选, 默认不渲染legend标签 html: '...' // 内容html, 可选, 默认为空 // 控件组, 可选, 默认空, 同form_group, 渲染优先级高于html参数 groups: label: 'Username' control: // type: 'text', id: 'username' name: 'Username' placeholder: 'Username' label: 'Password' control: type: 'password' id: 'password' name: 'Password' placeholder: 'Password' // 表单提交区域, 可选, 默认空, 同button, 渲染优先级高低于html参数, 如此数组个数大于0, 则会生成一个form-submit的div外层包裹 buttons: style: 'default' text: 'Cancel' type: 'submit' style: 'primary' text: 'Submit'
<!-- 输出html结构 --> title Username Password ... Cancel Submit
Form Group
表单控件组
// 参数说明 // locals.form_group, 必须, 否则输出为空 form_group: // prefix: 'form', // 类前缀, 可选, 默认form cls: 'form-group-more' // 额外class类, 可选, 默认为空 // size: false, // 尺寸, 可选, 默认false正常尺寸, lg大号, sm小号 // status: false, // 校验状态, 可选, 默认false, success成功, warning警告, error错误 // feedback: false, // 额外图标, 可选, 默认false label: false // label标签配置, 可选, 默认false不渲染, // 控件配置, 必须, 默认类型text, input系列的type将使用input组件来渲染, 参数同input control: // type: 'text', id: 'input-id' name: 'input-name' value: 'input-value' placeholder: 'input-placeholder' // help: false, // 帮助文本, 可选, 默认false
<!-- 输出html结构 -->
// 参数说明 // locals.form_group, 必须, 否则输出为空 form_group: // prefix: 'form', // 类前缀, 可选, 默认form cls: 'form-group-more' // 额外class类, 可选, 默认为空 size: 'lg' // 尺寸, 可选, 默认false正常尺寸, lg大号, sm小号 status: 'success' // 校验状态, 可选, 默认false, success成功, warning警告, error错误 feedback: name: 'success' // 额外图标, 可选, 默认false, 配置后将使用icon组件渲染, 参数同con label: 'Username' // label标签配置, 可选, 默认false不渲染, 可为字符串 // 控件配置, 必须, 默认类型text, input系列的type将使用input组件来渲染, 参数同input control: // type: 'text', id: 'username' name: 'Username' value: 'My username' placeholder: 'Username' help: 'Please enter your username.' // 帮助文本, 可选, 默认false, 可为字符串
<!-- 输出html结构 --> Username Please enter your username.
// 参数说明 // locals.form_group, 必须, 否则输出为空 form_group: // prefix: 'form', // 类前缀, 可选, 默认form cls: 'form-group-more' // 额外class类, 可选, 默认为空 size: 'lg' // 尺寸, 可选, 默认false正常尺寸, lg大号, sm小号 status: 'error' // 校验状态, 可选, 默认false, success成功, warning警告, error错误 feedback: name: 'error' // 额外图标, 可选, 默认false, 配置后将使用icon组件渲染, 参数同con // label标签配置, 可选, 默认false不渲染, 可为label标签的配置对象 label: cls: 'control-label-more' 'col-xs-3' html: '<strong>*</strong>' // 内容html, 可选, 最先渲染 text: 'Password' // 内容文本, 可选, 最后渲染 // 控件配置, 必须, 默认类型text, input系列的type将使用input组件来渲染, 参数同input control: type: 'password' id: 'password' name: 'Password' placeholder: 'Password' wrapper: 'col-xs-6' // 增加外层, 可选, 默认不增加, 一般用于栅栏结构布局 help: 'Please enter your password.' // 帮助文本, 可选, 默认false, 可为字符串
<!-- 输出html结构 --> * <!-- 参数html的值 --> Password <!-- 参数text的值 --> Please enter your password.
// 参数说明 // locals.form_group, 必须, 否则输出为空 form_group: // prefix: 'form', // 类前缀, 可选, 默认form cls: 'form-group-more' // 额外class类, 可选, 默认为空 size: 'sm' // 尺寸, 可选, 默认false正常尺寸, lg大号, sm小号 status: 'warning' // 校验状态, 可选, 默认false, success成功, warning警告, error错误 // feedback: false, // 额外图标, 可选, 默认false // label标签配置, 可选, 默认false不渲染, 可为label标签的配置对象 label: srOnly: true // 隐藏 text: 'Remember me' // 控件配置, 必须, 默认类型text, checkbox或radio将使用checkbox组件来渲染, 参数同checkbox control: type: 'checkbox' name: 'remember' checked: true // 增加外层, 可选, 默认不增加, 可为外层配置对象, 一般用于栅栏结构布局 wrapper: cls: 'col-xs-6' 'col-xs-push-3' help: false // 帮助文本, 可选, 默认false
<!-- 输出html结构 --> Remember me
Icon
文件上传按钮
// 参数说明 // locals.icon, 必须, 否则输出为空 icon: name: 'spinner' // 图标名称, 必须, 会和prefix参数组合成图标识别类 prefix: 'fa' // 类前缀, 可选, 默认icon cls: 'fa-more' // 最外层额外class类, 可选, 默认为空 // href: '', // 设置链接地址, 可选, 空为i标签, 非空为a标签 html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染 text: 'icon' // 内容文本, 可选, 最后渲染
<!-- 输出html结构 --> 带html的 <!-- 参数html的值 --> icon <!-- 参数text的值 -->
Input
输入控件
// 参数说明 // locals.icon, 必须, 否则输出为空 input: // prefix: 'input', // 类前缀, 可选, 默认input size: 'lg' // 尺寸, 可选, 默认空 // type: 'text', // 控件类型, 可选, 默认text文本输入框, password密码输入框, radio单选, checkbox复选, 更多请参阅html参考手册 id: 'input' // id, 可选, 默认为空 cls: 'form-control' 'input-more' // class类, 可选, 默认form-control, 覆盖形式 name: 'name' // 键, 可选, 默认为空 value: 'value' // 值, 可选, 默认为空 placeholder: 'placeholder' // 占位符, 可选, 默认为空 // checked: false, // 选中状态, 用于单选和复选控件, 可选, 默认false readonly: true // 只读状态, 可选, 默认false非只读 disabled: true // 禁用状态, 可选, 默认false非禁用 required: true // 必填项, 可选, 默认false非必填 autofocus: true // 自动获取焦点, 可选, 默认false非自动获取 autocomplete: 'off' // 自动补全, 可选, 默认'on'自动补全 // left: false, // 左侧附加组件, 可选, 默认false // right: false, // 右侧附加组件, 可选, 默认false
<!-- 输出html结构 -->
// 参数说明 // locals.icon, 必须, 否则输出为空 input: // prefix: 'input', // 类前缀, 可选, 默认input // size: '', // 尺寸, 可选, 默认空 // type: 'text', // 控件类型, 可选, 默认text文本输入框, password密码输入框, radio单选, checkbox复选, 更多请参阅html参考手册 // id: 'input', // id, 可选, 默认为空 // cls: ['form-control'], // class类, 可选, 默认form-control, 覆盖形式 name: 'name' // 键, 可选, 默认为空 value: 'value' // 值, 可选, 默认为空 placeholder: 'placeholder' // 占位符, 可选, 默认为空 // checked: false, // 选中状态, 用于单选和复选控件, 可选, 默认false // readonly: false, // 只读状态, 可选, 默认false非只读 // disabled: false, // 禁用状态, 可选, 默认false非禁用 // required: false, // 必填项, 可选, 默认false非必填 // autofocus: false, // 自动获取焦点, 可选, 默认false非自动获取 // autocomplete: 'on', // 自动补全, 可选, 默认'on'自动补全 left: '@' // 左侧附加组件, 可选, 默认false, 可为html字符串 right: name: 'calendar' // 右侧附加组件, 可选, 默认false, 可为icon属性
<!-- 输出html结构 --> @
// 参数说明 // locals.icon, 必须, 否则输出为空 input: // prefix: 'input', // 类前缀, 可选, 默认input // size: '', // 尺寸, 可选, 默认空 // type: 'text', // 控件类型, 可选, 默认text文本输入框, password密码输入框, radio单选, checkbox复选, 更多请参阅html参考手册 // id: 'input', // id, 可选, 默认为空 // cls: ['form-control'], // class类, 可选, 默认form-control, 覆盖形式 name: 'name' // 键, 可选, 默认为空 value: 'value' // 值, 可选, 默认为空 placeholder: 'placeholder' // 占位符, 可选, 默认为空 // checked: false, // 选中状态, 用于单选和复选控件, 可选, 默认false // readonly: false, // 只读状态, 可选, 默认false非只读 // disabled: false, // 禁用状态, 可选, 默认false非禁用 // required: false, // 必填项, 可选, 默认false非必填 // autofocus: false, // 自动获取焦点, 可选, 默认false非自动获取 // autocomplete: 'on', // 自动补全, 可选, 默认'on'自动补全 // 左侧附加组件, 可选, 默认false, 可为buttons和dropdown的数据 left: type: 'button' style: 'default' text: 'left' // 右侧附加组件, 可选, 默认false, 可为buttons和dropdown的数据 right: type: 'button' style: 'primary' text: 'right' type: 'dropdown' align: 'right' wrap: false items: header: 'Dropdown header' name: 'Action' url: 'javascript:;' icon: name: 'action' name: 'Another action' url: 'javascript:;' name: 'Something else here' url: 'javascript:;' target: '_blank' divider: true header: 'Dropdown header' name: 'Separated link' url: 'javascript:;' name: 'Disabled link' url: 'javascript:;' disabled: true
<!-- 输出html结构 --> left right Dropdown header Action Another action Something else here Dropdown header Separated link Disabled link
Menu
菜单
// 参数说明 // locals.menu, 必须, 否则输出为空 menu: cls: 'menu' 'menu-more' // 最外层class类, 可选, 默认menu, 覆盖形式 arrow: 'icon-arrow-down' // 如果有下级菜单, 不展开情况下i标签图标的class类, 可选, 无默认值 active_cls: 'active' // 当前菜单的class, 可选, 默认active activeId: 1 // 当前菜单的id标识, 可选, 无默认值 depth: true // 渲染从0开始的深度层级, 可选, 默认false // 如果默认的item结构不满足需求, 可以通过item回调自定义结构, 可选 // item: (item, active, depth, i) => { // console.log(item); // console.log(active); // console.log(depth); // console.log(i); // return `<a href="${item.url}" class="${active && 'active' || ''}" data-id="${item.id}" data-depth="${depth}"><i class="icon icon-${item.icon.name}"></i>${item.name}</a>`; // }, // 菜单项, 必须, 否则输出为空 items: id: 1 // id, 必须, 将与activeId匹配是否为当前菜单 name: 'menu1' // 名称, 必须 url: '/menu1' // url, 可选, 名称在此项有值时为a标签, 否则为span标签 icon: 'icon-1' // 名称前的i标签图标class类 id: 2 name: 'menu2' icon: 'icon-2' children: id: 6 name: 'menu6' url: '/menu6' ...
<!-- 输出html结构 --> menu1 menu2 menu6 ...
Modal
模态框
// 参数说明 // locals.modal, 必须, 否则输出为空 modal: // prefix: 'modal', // 类前缀, 可选, 默认modal cls: 'modal-more' // 最外层额外class类, 可选, 默认为空 // fade: true, // 过渡效果, 可选, 默认true // size: 'sm', // 尺寸, 可选, 默认尺寸为空, 大(lg), 小(sm) title: 'title' // 标题, 可选, 默认空不显示, 非空显示 // dismiss: true, // 显示关闭按钮, 可选, 默认true显示, false不显示 html: '<strong>带html的</strong>' // 内容html, 可选, 最先渲染 text: 'modal' // 内容文本, 可选, 最后渲染 // content区域的attributes配置, 可选, 默认div渲染, 若action和method设置了任意一个, 则为form表单渲染 content: action: '/route/to/submit' method: 'post' // 尾部按钮区域, 可选, 数组中的每个对象对应一个button的配置 buttons: style: 'default' text: '取消' autofocus: true attributes: 'data-dismiss': 'modal' style: 'primary' text: '提交' type: 'submit'
<!-- 输出html结构 --> × title 带html的 <!-- 参数html的值 --> modal <!-- 参数text的值 --> 取消 提交
Pagination
分页
// 参数说明 // locals.pagination, 必须, 否则输出为空 pagination: totalCount: 666 // 总数据条数, 必须 cls: 'pagination' 'pagination-more' // 最外层class类, 可选, 默认pagination, 覆盖形式 first_cls: 'first' // 第一页按钮样式类, 可选, 默认空 last_cls: 'last' // 最后一页按钮样式类, 可选, 默认空 prev_cls: 'prev' // 前一页按钮样式类, 可选, 默认空 next_cls: 'next' // 下一页按钮样式类, 可选, 默认空 page_cls: 'page' // 分页按钮样式类, 可选, 默认空 // active_cls: ['active'], // 激活样式类, 可选, 默认active // disabled_cls: ['disabled'], // 禁用样式类, 可选, 默认disabled first: 'first' // 第一页按钮的文本, 可选, 默认为空, false不显示第一页按钮 last: 'last' // 最后一页按钮的文本, 可选, 默认为空, false不显示最后一页按钮 prev: '«' // 前一页按钮的文本, 可选, 默认为空, false不显示前一页按钮 next: '»' // 下一页按钮的文本, 可选, 默认为空, false不显示下一页按钮 url: '/route/path?query=string&page=${page}&size=${size}' // 跳转url, 可选, 默认javascript:;, 会自动替换${page}和${size} page: 10 // 当前页码, 可选, 默认1 // size: 20, // 每页数量, 可选, 默认20 // max_button_count: 6, // 最多显示页数, 可选, 默认6 // hide_on_single_page: false, // 只有一页时隐藏, 可选, 默认false不隐藏 // disable_active_page_button: false, // 禁用当前页, 可选, 默认false不禁用 ellipsis: '...' // 是否省略显示第一页和最后一页的按钮, 可选, 默认不显示
<!-- 输出html结构 --> first « 1 <!-- 通过参数ellipsis配置 --> ... <!-- 通过参数ellipsis配置 --> 7 8 9 10 11 12 ... <!-- 通过参数ellipsis配置 --> 34 <!-- 通过参数ellipsis配置 --> » last
Select
下拉列表
// 参数说明 // locals.select, 必须, 否则输出为空 select: // fake: true, // 自定义下拉列表, 可选, 默认false原生, true自定义 id: 'select-id' // id, 可选, 默认为空 cls: 'form-control' 'select-more' // 额外class类, 可选, 默认为空 name: 'select-name' // 键, 可选, 默认为空 value: 1 // 值, 可选, 默认为空 size: 'lg' // 尺寸, 可选, 默认为普通, lg大号, sm小号 multiple: true // 多选, 可选, 默认为false // 下拉选项, 可选, 默认空数组 items: name: 'a' value: 0 name: 'b' value: 1 name: 'c' value: 2 name: 'd' value: 3 name: 'e' value: 4 name: 'f' value: 5
<!-- 输出html结构 --> a b c d e f
// 参数说明 // locals.select, 必须, 否则输出为空 select: fake: true // 自定义下拉列表, 可选, 默认false原生, true自定义 id: 'select-id' // id, 可选, 默认为空 cls: 'select-more' // 额外class类, 可选, 默认为空 name: 'select-name' // 键, 可选, 默认为空 value: 2 // 值, 可选, 默认为空 size: 'sm' // 尺寸, 可选, 默认为普通, lg大号, sm小号 multiple: true // 多选, 可选, 默认为false up: true // 向上弹出, 可选, 默认false向下弹出, 同dropdown align: 'right' // 向右对齐, 可选, 默认为空向左对齐, 同dropdown // 下拉选项, 可选, 默认空数组 items: name: '0值名称' value: 0 name: '1值名称' value: 1 name: '2值名称' value: 2 name: '3值名称' value: 3 name: '4值名称' value: 4 name: '5值名称' value: 5
<!-- 输出html结构 --> 0值名称 1值名称 2值名称 3值名称 4值名称 5值名称
Table
表格
// 参数说明 // locals.table, 必须, 否则输出为空 table: // prefix: 'table', // 类前缀, 可选, 默认table cls: 'table-cls' 'table-more' // 最外层额外class类, 可选, 默认为空 bordered: true // 带边框的表格, 可选, 默认false, 为表格和其中的每个单元格增加边框 condensed: true // 紧缩表格, 可选, 默认false, 可以让表格更加紧凑, 单元格中的内补(padding)均会减半 hover: true // 鼠标悬停, 可选, 默认false, 可以让 <tbody> 中的每一行对鼠标悬停状态作出响应 responsive: true // 响应式表格, 可选, 默认false, 其会在小屏幕设备上(小于768px)水平滚动, 当屏幕大于 768px 宽度时, 水平滚动条消失 striped: true // 条纹状表格, 可选, 默认false, 可以给 <tbody> 之内的每一行增加斑马条纹样式 title: 'title' // caption标题, 可选, 默认不渲染caption标签 // 列设置, 必须 columns: name: '#' // 列名称, 必须, 可以是回调形式 i + 1 // 对应行数据取值用到的key, 必须, 可以是回调形式 width: '10%' // 列宽度, 可选, 默认自适应 attributes: class: 'index' // 列对应的数据单元格attributes设置, 可选 {return class: i == 0 && 'active'} // 本列下的数据单元格attributes设置, 可选, 可以是回调形式 name: 'First Name' key: 'firstName' width: '30%' attributes: class: 'first-name' {return class: i == 2 && 'success'} name: 'Last Name' key: 'lastName' width: '30%' attributes: class: 'last-name' {return class: i == 0 && 'info'} name: 'Username' key: 'userName' width: '30%' attributes: class: 'username' {return class: i == 2 && 'danger'} // 行设置, 必须 items: firstName: 'Mark' lastName: 'Otto' userName: '@mdo' firstName: 'Jacob' lastName: 'Thornton' userName: '@fat' attributes: class: 'active' // 当前数据行attributes设置, 可选 firstName: 'Larry' lastName: 'the Bird' userName: '@twitter' ... // 空数据, 可选, 如不设置此值则则在空数据状态下不输出整个表格 empty: cls: 'empty' text: 'No matched data' // tfoot的html, 可选 html: '<tr><td colspan="4">foot</td></tr>'
<!-- 输出html结构 --> title # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... foot
Tree
树列表
// 参数说明 // locals.tree, 必须, 否则输出为空 tree: arrow: 'icon-arrow-down' // 如果有下级菜单, 不展开情况下i标签图标的class类, 可选, 无默认值 active_cls: 'active' // 当前菜单的class, 可选, 默认active activeId: 1 // 当前菜单的id标识, 可选, 无默认值 depth: true // 渲染从0开始的深度层级, 可选, 默认false // 如果默认的item结构不满足需求, 可以通过item回调自定义结构, 可选 // item: (item, active, depth, i) => { // console.log(item); // console.log(active); // console.log(depth); // console.log(i); // return `<a href="${item.url}" class="${active && 'active' || ''}" data-id="${item.id}" data-depth="${depth}"><i class="icon icon-${item.icon.name}"></i>${item.name}</a>`; // }, // 树列表项, 必须, 否则输出为空 items: id: 1 // id, 必须, 将与activeId匹配是否为当前菜单 name: 'menu1' // 名称, 必须 url: '/menu1' // url, 可选, 名称在此项有值时为a标签, 否则为span标签 icon: 'icon-1' // 名称前的i标签图标class类 id: 2 name: 'menu2' icon: 'icon-2' children: id: 6 name: 'menu6' url: '/menu6' ...
<!-- 输出html结构 --> menu1 menu2 menu6 ...
License
MIT - xiewulong