通用pug组件模板
安装
$ cnpm i [-S|D] pugs使用方式一: web端js
const menu = require('pugs/menu.pug');
let html = menu({menu: {...}});
console.log(html); // -> <div class="menu">...</div>使用方式二: node服务端js
const components = require('pugs');
let html = components.menu({menu: {...}});
// 或者直接引用目标组件包 可以有效减少缓存
const menu = require('pugs/menu');
let html = menu({menu: {...}});
console.log(html); // -> <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({...});信息提示
// 参数说明
{
// 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结构 -->
<div class="alert alert-dismissible fade" role="alert">
<button class="close" type="button" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<i class="icon icon-success" aria-hidden="true"></i>
<strong>带html的</strong> <!-- 参数html的值 -->
alert <!-- 参数text的值 -->
</div>内容区域, 用于隔离功能区域
// 参数说明
{
// locals.box, 必须, 否则输出为空
box: {
// prefix: 'box', // 类前缀, 可选, 默认box, 则标题区域为box-hd, 内容区域为box-hd
cls: ['box-more'], // 最外层额外class类, 可选, 默认为空
title: 'title', // 标题, 可选, 如果不传或为空则不渲染标题区域
html: '<strong>带html的</strong>', // 内容html, 可选, 最先渲染
text: 'box', // 内容文本, 可选, 最后渲染
},
}<!-- 输出html结构 -->
<div class="box box-more">
<div class="box-hd">
<h3>title</h3>
</div>
<strong>带html的</strong> <!-- 参数html的值 -->
box <!-- 参数text的值 -->
</div>面包屑
// 参数说明
{
// 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结构 -->
<ol class="breadcrumb breadcrumb-more">
<li class="first home"><a href="/">Home</a></li>
<li>Library</li>
<li class="active active-more">Data</li> <!-- 自动选中最后一个 -->
</ol>按钮
// 参数说明
{
// 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结构 -->
<button class="btn btn-primary btn-more" type="button" name="button-name">
<strong>带html的</strong> <!-- 参数html的值 -->
button <!-- 参数text的值 -->
</button>单选/复选
// 参数说明
{
// 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结构 -->
<input class="checkbox-more" type="checkbox" name="checkbox-name" value="checkbox-value"/>// 参数说明
{
// 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结构 -->
<label class="radio radio-more fake readonly disabled" for="radio-id">
<input type="radio" id="radio-id" name="radio-name" value="radio-value" checked="checked" readonly="readonly" disabled="disabled"/>
<strong>带html的</strong> <!-- 参数html的值 -->
radio <!-- 参数text的值 -->
</label>关闭按钮
// 参数说明
{
// locals.dismiss, 必须, 否则输出为空
dismiss: {
name: 'modal', // 需要关闭的对象名称, 必须, 会在标签中生成data-dismiss=${name}的属性
cls: ['close', 'close-more'], // class类, 可选, 默认close, 覆盖形式
// html: '<span aria-hidden="true">×</span>', // 内容html, 可选
},
}<!-- 输出html结构 -->
<button class="close close-more" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>下拉列表/菜单
// 参数说明
{
// 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结构 -->
<div class="dropup dropdown dropdown-more">
<button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<strong>带html的</strong> <!-- 参数html的值 -->
dropdown <!-- 参数text的值 -->
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:;"><i class="icon icon-action" aria-hidden="true"></i>Action</a></li>
<li><a href="javascript:;">Another action</a></li>
<li><a href="javascript:;" target="_blank">Something else here</a></li>
<li class="dropdown-divider" role="separator"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:;">Separated link</a></li>
<li class="disabled"><a href="javascript:;">Disabled link</a></li>
</ul>
</div>文件上传按钮
// 参数说明
{
// 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结构 -->
<button class="btn btn-primary btn-more btn-file" type="button">
<i class="fa fa-upload" aria-hidden="true"></i>
<span>
<strong>带html的</strong> <!-- 参数html的值 -->
file <!-- 参数text的值 -->
</span>
<input type="file" name="file" multiple="multiple"/>
</button>表单
// 参数说明
{
// 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结构 -->
<form class="form-horizontal form-more" name="form-name" action="/path/to/action" method="post" enctype="multipart/form-data">
<fieldset disabled="disabled">
<legend>title</legend>
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input class="form-control" type="text" id="username" name="Username" placeholder="Username" />
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" type="password" id="password" name="Password" placeholder="Password" />
</div>
...
<div class="form-submit">
<button class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</fieldset>
</form>表单控件组
// 参数说明
{
// 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结构 -->
<div class="form-group form-group-more">
<input class="form-control" type="text" id="input-id" name="input-name" value="input-value" placeholder="input-placeholder"/>
</div>// 参数说明
{
// 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结构 -->
<div class="form-group form-group-lg has-success has-feedback form-group-more">
<label class="control-label" for="username">Username</label>
<input class="form-control" type="text" id="username" name="Username" value="My username" placeholder="Username" />
<i class="icon icon-success form-control-feedback" aria-hidden="true"></i>
<div class="help-block">Please enter your username.</div>
</div>// 参数说明
{
// 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结构 -->
<div class="form-group form-group-lg has-error has-feedback form-group-more">
<label class="control-label control-label-more col-xs-3" for="password">
<strong>*</strong> <!-- 参数html的值 -->
Password <!-- 参数text的值 -->
</label>
<div class="col-xs-6">
<input class="form-control" type="password" id="password" name="Password" placeholder="Password" />
<i class="icon icon-error form-control-feedback" aria-hidden="true"></i>
</div>
<div class="help-block">Please enter your password.</div>
</div>// 参数说明
{
// 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结构 -->
<div class="form-group form-group-sm has-warning form-group-more">
<label class="control-label sr-only">Remember me</label>
<div class="col-xs-6 col-xs-push-3">
<input type="checkbox" name="remember" checked="checked"/>
</div>
</div>文件上传按钮
// 参数说明
{
// locals.icon, 必须, 否则输出为空
icon: {
name: 'spinner', // 图标名称, 必须, 会和prefix参数组合成图标识别类
prefix: 'fa', // 类前缀, 可选, 默认icon
cls: ['fa-more'], // 最外层额外class类, 可选, 默认为空
// href: '', // 设置链接地址, 可选, 空为i标签, 非空为a标签
html: '<strong>带html的</strong>', // 内容html, 可选, 最先渲染
text: 'icon', // 内容文本, 可选, 最后渲染
},
}<!-- 输出html结构 -->
<i class="fa fa-spinner fa-more" aria-hidden="true">
<strong>带html的</strong> <!-- 参数html的值 -->
icon <!-- 参数text的值 -->
</i>输入控件
// 参数说明
{
// 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结构 -->
<input class="form-control input-more input-lg" type="text" id="input" name="name" value="value" placeholder="placeholder" readonly="readonly" disabled="disabled" required="required" autofocus="autofocus" autocomplete="off"/>// 参数说明
{
// 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结构 -->
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="text" name="name" value="value" placeholder="placeholder"/>
<div class="input-group-addon">
<i class="icon icon-calendar" aria-hidden="true"></i>
</div>
</div>// 参数说明
{
// 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结构 -->
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="button">left</button>
</div>
<input class="form-control" type="text" name="name" value="value" placeholder="placeholder" />
<div class="input-group-btn">
<button class="btn btn-primary" type="button">right</button>
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:;"><i class="icon icon-action" aria-hidden="true"></i>Action</a></li>
<li><a href="javascript:;">Another action</a></li>
<li><a href="javascript:;" target="_blank">Something else here</a></li>
<li class="dropdown-divider" role="separator"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:;">Separated link</a></li>
<li class="disabled"><a href="javascript:;">Disabled link</a></li>
</ul>
</div>
</div>菜单
// 参数说明
{
// 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结构 -->
<div class="menu menu-more">
<div class="menu-scroller">
<ul>
<li class="active" data-id="1" data-depth="0">
<div class="item">
<i class="icon icon-home" aria-hidden="true"></i>
<a href="/menu1">menu1</a>
</div>
</li>
<li data-id="2" data-depth="0">
<div class="item">
<i class="icon-arrow-down"></i>
<i class="icon icon-home" aria-hidden="true"></i>
<span>menu2</span>
</div>
<ul>
<li data-id="6" data-depth="1">
<div class="item">
<a href="/menu6">menu6</a>
</div>
</li>
</ul>
</li>
...
</ul>
</div>
</div>模态框
// 参数说明
{
// 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结构 -->
<div class="modal fade modal-more">
<div class="modal-dialog">
<form class="modal-content" action="/route/to/submit" method="post">
<fieldset>
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>title</h4>
</div>
<div class="modal-body">
<strong>带html的</strong> <!-- 参数html的值 -->
modal <!-- 参数text的值 -->
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" autofocus="autofocus" data-dismiss="modal">取消</button>
<button class="btn btn-primary" type="submit">提交</button>
</div>
</fieldset>
</form>
</div>
</div>分页
// 参数说明
{
// 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结构 -->
<ul class="pagination pagination-more">
<li class="first"><a href="/route/path?query=string&page=1&size=20">first</a></li>
<li class="prev"><a href="/route/path?query=string&page=9&size=20">«</a></li>
<li class="page"><a href="/route/path?query=string&page=1&size=20">1</a></li> <!-- 通过参数ellipsis配置 -->
<li><em>...</em></li> <!-- 通过参数ellipsis配置 -->
<li class="page"><a href="/route/path?query=string&page=7&size=20">7</a></li>
<li class="page"><a href="/route/path?query=string&page=8&size=20">8</a></li>
<li class="page"><a href="/route/path?query=string&page=9&size=20">9</a></li>
<li class="page active"><span>10</span></li>
<li class="page"><a href="/route/path?query=string&page=11&size=20">11</a></li>
<li class="page"><a href="/route/path?query=string&page=12&size=20">12</a></li>
<li><em>...</em></li> <!-- 通过参数ellipsis配置 -->
<li class="page"><a href="/route/path?query=string&page=34&size=20">34</a></li> <!-- 通过参数ellipsis配置 -->
<li class="next"><a href="/route/path?query=string&page=11&size=20">»</a></li>
<li class="last"><a href="/route/path?query=string&page=34&size=20">last</a></li>
</ul>下拉列表
// 参数说明
{
// 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结构 -->
<select class="form-control select-more input-lg" id="select-id" name="select-name" multiple="multiple">
<option value="0">a</option>
<option value="1" selected="selected">b</option>
<option value="2">c</option>
<option value="3">d</option>
<option value="4">e</option>
<option value="5">f</option>
</select>// 参数说明
{
// 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结构 -->
<div class="dropup select select-more multiple">
<button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="select-id">
<input type="hidden" name="select-name" value="2" />
<strong></strong>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="0">0值名称</li>
<li data-value="1">1值名称</li>
<li class="selected" data-value="2">2值名称</li>
<li data-value="3">3值名称</li>
<li class="disabled" data-value="4">4值名称</li>
<li data-value="5">5值名称</li></ul>
</div>表格
// 参数说明
{
// 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: '#', // 列名称, 必须, 可以是回调形式
key: (item, i, items) => i + 1, // 对应行数据取值用到的key, 必须, 可以是回调形式
width: '10%', // 列宽度, 可选, 默认自适应
attributes: {class: ['index']}, // 列对应的数据单元格attributes设置, 可选
item: (item, i, items) => {return {class: i == 0 && 'active'}}, // 本列下的数据单元格attributes设置, 可选, 可以是回调形式
},
{name: 'First Name', key: 'firstName', width: '30%', attributes: {class: ['first-name']}, item: (item, i) => {return {class: i == 2 && 'success'}}},
{name: 'Last Name', key: 'lastName', width: '30%', attributes: {class: ['last-name']}, item: (item, i) => {return {class: i == 0 && 'info'}}},
{name: 'Username', key: 'userName', width: '30%', attributes: {class: ['username']}, item: (item, i) => {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结构 -->
<div class="table-cls table-more table-responsive">
<table class="table table-bordered table-condensed table-hover table-striped">
<caption>title</caption>
<thead>
<tr>
<th class="index" width="10%">#</th>
<th class="first-name" width="30%">First Name</th>
<th class="last-name" width="30%">Last Name</th>
<th class="username" width="30%">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">1</td>
<td>Mark</td>
<td class="info">Otto</td>
<td>@mdo</td>
</tr>
<tr class="active">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td class="success">Larry</td>
<td>the Bird</td>
<td class="danger">@twitter</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td colspan="4">foot</td>
</tr>
</tfoot>
</table>
</div>树列表
// 参数说明
{
// 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结构 -->
<ul>
<li class="active" data-id="1" data-depth="0">
<div class="item">
<i class="icon icon-home" aria-hidden="true"></i>
<a href="/menu1">menu1</a>
</div>
</li>
<li data-id="2" data-depth="0">
<div class="item">
<i class="icon-arrow-down"></i>
<i class="icon icon-home" aria-hidden="true"></i>
<span>menu2</span>
</div>
<ul>
<li data-id="6" data-depth="1">
<div class="item">
<a href="/menu6">menu6</a>
</div>
</li>
</ul>
</li>
...
</ul>MIT - xiewulong