amazeui
Version:
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
296 lines (295 loc) • 7.41 kB
JSON
{
"name": "header",
"version": "2.0.0",
"localName": {
"en": "Header",
"zh-cn": "页头"
},
"icon": "header.png",
"author": {
"name": "hzp",
"email": "hzp@yunshipei.com"
},
"poweredBy": "AllMobilize",
"description": "页面顶部",
"styleBase": [
"variables.less",
"mixins.less",
"base.less",
"grid.less",
"block-grid.less",
"utility.less"
],
"template": "header.hbs",
"styleDependencies": [
"icon.less"
],
"style": "header.less",
"themes": [
{
"name": "default",
"desc": "深色背景",
"options": {},
"hook": "hook-am-header-default",
"variables": [
{
"variable": "header-bg",
"name": "背景颜色",
"default": "#0e90d2",
"used": [
{
"selector": "",
"property": "background-color"
}
]
},
{
"variable": "header-title-color",
"name": "标题颜色",
"default": "#fff",
"used": [
{
"selector": ".am-header-title,.am-header-title a",
"property": "color"
}
]
},
{
"variable": "header-nav-color",
"name": "两侧图标文字颜色",
"default": "#fff",
"used": [
{
"selector": ".am-header-nav a",
"property": "color"
}
]
}
],
"demos": [
{
"desc": "图标",
"data": {
"content": {
"left": [
{
"link": "#left-link",
"icon": "home"
}
],
"title": "Amaze UI",
"link": "#title-link",
"right": [
{
"link": "#right-link",
"icon": "bars"
}
]
}
}
},
{
"desc": "图片图标",
"data": {
"content": {
"left": [
{
"link": "#left-link",
"icon": "home",
"customIcon": "data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 20\"><path d=\"M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z\" fill=\"%23fff\"/></svg>"
}
],
"title": "<img src=\"http://s.amazeui.org/media/i/brand/amazeui-cw.png\" />",
"right": [
{
"link": "#right-link",
"customIcon": "data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 42 26\" fill=\"%23fff\"><rect width=\"4\" height=\"4\"/><rect x=\"8\" y=\"1\" width=\"34\" height=\"2\"/><rect y=\"11\" width=\"4\" height=\"4\"/><rect x=\"8\" y=\"12\" width=\"34\" height=\"2\"/><rect y=\"22\" width=\"4\" height=\"4\"/><rect x=\"8\" y=\"23\" width=\"34\" height=\"2\"/></svg>"
}
]
}
}
},
{
"desc": "图标+文字",
"data": {
"content": {
"left": [
{
"link": "#left-link",
"title": "首页",
"icon": "home"
}
],
"title": "Amaze UI",
"right": [
{
"link": "#right-link",
"icon": "bars",
"title": "菜单"
}
]
}
}
},
{
"desc": "多图标",
"data": {
"content": {
"left": [
{
"link": "#left-link",
"icon": "home"
},
{
"link": "#phone-link",
"icon": "phone"
}
],
"title": "Amaze UI",
"right": [
{
"link": "#user-link",
"icon": "user"
},
{
"link": "#cart-link",
"icon": "shopping-cart"
}
]
}
}
},
{
"desc": "结合按钮",
"data": {
"content": {
"left": [
{
"link": "#left-link",
"icon": "home",
"title": "返回",
"className": "am-btn am-btn-default"
}
],
"title": "Amaze UI",
"right": [
{
"link": "#user-link",
"icon": "user"
},
{
"link": "#cart-link",
"className": "am-btn am-btn-secondary",
"icon": "shopping-cart"
}
]
}
}
}
]
},
{
"name": "one",
"desc": "简约风格",
"options": {},
"hook": "hook-am-header-one",
"variables": [
{
"variable": "header-bg",
"name": "背景颜色",
"default": "#fff",
"used": [
{
"selector": "",
"property": "background-color"
}
]
},
{
"variable": "header-title-color",
"name": "标题颜色",
"default": "#1c1c1c",
"used": [
{
"selector": ".am-header-title, .am-header-title a",
"property": "color"
}
]
},
{
"variable": "header-icon-color",
"name": "图标颜色",
"default": "#15afef",
"used": [
{
"selector": ".am-header-nav a",
"property": "color"
}
]
}
],
"demos": [
{
"data": {
"content": {
"left": [
{
"link": "#left-link",
"icon": "home"
}
],
"title": "Amaze UI",
"right": [
{
"link": "#right-link",
"icon": "bars"
}
]
}
}
}
]
}
],
"jsBase": [
"core.js"
],
"jsDependencies": [],
"script": "header.js",
"api": {
"id": {
"name": "ID",
"desc": "模块自定义ID，遵循CSS ID命名规范",
"type": "text",
"default": "",
"required": false
},
"className": {
"name": "Class",
"desc": "用户自定义模块class，遵循 CSS class 命名规范",
"type": "text",
"default": "",
"required": false
},
"theme": {
"name": "主题",
"desc": "模块主题",
"type": "select",
"default": "default",
"required": true,
"dataList": ""
},
"options": null,
"content": {
"type": "Object",
"item": {
"title": {
"type": "html",
"desc": "中间内容（可选，按需设置）"
}
}
}
},
"readme": "http://amazeui.org/widgets/header/readme",
"hidden": false
}