amazeui/widget/menu/package.json

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

{
  "name": "menu",
  "version": "4.0.3",
  "localName": {
    "en": "Menu",
    "zh-cn": "菜单"
  },
  "icon": "menu.png",
  "author": {
    "name": "Minwe Luo",
    "email": "minwe@yunshipei.com"
  },
  "description": "菜单组件",
  "poweredBy": "AllMobilize",
  "styleBase": [
    "variables.less",
    "mixins.less",
    "base.less",
    "grid.less",
    "block-grid.less",
    "icon.less",
    "utility.less"
  ],
  "template": "menu.hbs",
  "styleDependencies": [
    "list.less",
    "ui.offcanvas.less",
    "ui.component.less"
  ],
  "style": "menu.less",
  "demoContent": [
    {
      "link": "##",
      "title": "公司",
      "subCols": 2,
      "channelLink": "进入栏目 »",
      "subMenu": [
        {
          "link": "##",
          "title": "公司"
        },
        {
          "link": "##",
          "title": "人物"
        },
        {
          "link": "##",
          "title": "趋势"
        },
        {
          "link": "##",
          "title": "投融资"
        },
        {
          "link": "##",
          "title": "创业公司"
        },
        {
          "link": "##",
          "title": "创业人物"
        }
      ]
    },
    {
      "link": "##",
      "title": "人物",
      "subCols": 3,
      "subMenu": [
        {
          "link": "##",
          "title": "公司"
        },
        {
          "link": "##",
          "title": "人物"
        },
        {
          "link": "##",
          "title": "趋势"
        },
        {
          "link": "##",
          "title": "投融资"
        },
        {
          "link": "##",
          "title": "创业公司"
        },
        {
          "link": "##",
          "title": "创业人物"
        }
      ]
    },
    {
      "link": "#c3",
      "title": "趋势",
      "subCols": 4,
      "channelLink": "泥煤 »",
      "subMenu": [
        {
          "link": "##",
          "title": "公司"
        },
        {
          "link": "##",
          "title": "人物"
        },
        {
          "link": "##",
          "title": "趋势"
        },
        {
          "link": "##",
          "title": "投融资"
        },
        {
          "link": "##",
          "title": "创业公司"
        },
        {
          "link": "##",
          "title": "创业人物"
        }
      ]
    },
    {
      "link": "##",
      "title": "投融资",
      "subCols": 3,
      "subMenu": [
        {
          "link": "##",
          "title": "公司"
        },
        {
          "link": "##",
          "title": "人物"
        },
        {
          "link": "##",
          "title": "趋势"
        },
        {
          "link": "##",
          "title": "投融资"
        },
        {
          "link": "##",
          "title": "创业公司"
        },
        {
          "link": "##",
          "title": "创业人物"
        }
      ]
    },
    {
      "link": "##",
      "title": "创业公司"
    },
    {
      "link": "##",
      "title": "创业人物"
    }
  ],
  "themes": [
    {
      "name": "default",
      "desc": "横排",
      "hook": "hook-am-menu-default",
      "options": {
        "cols": 3
      },
      "variables": [
        {
          "variable": "menu-nav-bg",
          "name": "背景颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-nav",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-color",
          "name": "链接颜色",
          "default": "#0e90d2",
          "used": [
            {
              "selector": ".am-menu-nav a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-active-color",
          "name": "一级菜单激活颜色",
          "default": "#095f8a",
          "used": [
            {
              "selector": ".am-menu-nav > .am-parent.am-open > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-bg",
          "name": "二级菜单背景色",
          "default": "#f1f1f1",
          "used": [
            {
              "selector": ".am-menu-sub",
              "property": "background-color"
            },
            {
              "selector": ".am-menu-nav > .am-parent > a:before",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单链接颜色",
          "default": "#555",
          "used": [
            {
              "selector": ".am-menu-sub >li > a",
              "property": "color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "横排",
          "data": {
            "options": {
              "cols": "3"
            }
          }
        }
      ]
    },
    {
      "name": "dropdown1",
      "desc": "下拉全宽",
      "options": {
        "cols": "1"
      },
      "hook": "hook-am-menu-dropdown1",
      "variables": [
        {
          "variable": "menu-toggle-color",
          "name": "触发按钮颜色",
          "default": "#c7c7c7",
          "used": [
            {
              "selector": ".am-menu-toggle",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-color",
          "name": "一级菜单颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-bg",
          "name": "一级菜单背景色",
          "default": "#0e90d2",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-border-color",
          "name": "边框颜色",
          "default": "#4C5565",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "border-bottom-color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-active-color",
          "name": "一级菜单激活颜色",
          "default": "#6B717D",
          "used": [
            {
              "selector": ".am-menu-nav > li.am-parent.am-open > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-active-bg",
          "name": "一级菜单激活背景色",
          "default": "#C5C9D2",
          "used": [
            {
              "selector": ".am-menu-nav > li.am-parent.am-open > a",
              "property": "background-color"
            },
            {
              "selector": ".am-menu-nav > li.am-parent.am-open>a::after",
              "property": "border-top-color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单颜色",
          "default": "#7E858F",
          "used": [
            {
              "selector": ".am-menu-sub a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-bg",
          "name": "二级菜单背景色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-sub",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-icon-color",
          "name": "二级菜单 Icon 颜色",
          "default": "#aaa",
          "used": [
            {
              "selector": ".am-menu-sub a:before",
              "property": "color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "自定图标",
          "data": {
            "options": {
              "cols": "1",
              "toggleIcon": "list"
            }
          }
        },
        {
          "desc": "图片图标",
          "data": {
            "options": {
              "cols": "1",
              "toggleCustomIcon": "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": {
            "options": {
              "cols": "1",
              "toggleTitle": "菜单",
              "toggleIcon": "angle-right"
            }
          }
        }
      ]
    },
    {
      "name": "dropdown2",
      "desc": "下拉横排",
      "options": {
        "cols": "4"
      },
      "hook": "hook-am-menu-dropdown2",
      "variables": [
        {
          "variable": "menu-toggle-color",
          "name": "触发按钮颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-toggle",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-color",
          "name": "一级菜单颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-bg",
          "name": "一级菜单背景色",
          "default": "#0e90d2",
          "used": [
            {
              "selector": ".am-menu-nav",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-active-color",
          "name": "一级菜单激活颜色",
          "default": "#6B717D",
          "used": [
            {
              "selector": ".am-menu-nav>li.am-parent.am-open>a:after",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单颜色",
          "default": "#555",
          "used": [
            {
              "selector": ".am-menu-sub a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-bg",
          "name": "二级菜单背景色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-sub",
              "property": "background-color"
            },
            {
              "selector": ".am-menu-nav>li.am-parent.am-open>a:before",
              "property": "color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "",
          "data": {
            "options": {
              "cols": "4"
            }
          }
        }
      ]
    },
    {
      "name": "slide1",
      "desc": "指示箭头一级下滑1",
      "options": {
        "cols": 1
      },
      "hook": "hook-am-menu-slide1",
      "variables": [
        {
          "variable": "menu-toggle-color",
          "name": "触发按钮颜色",
          "default": "#c7c7c7",
          "used": [
            {
              "selector": ".am-menu-toggle",
              "property": "color"
            }
          ]
        },
        {
          "variable": "@menu-nav-bg",
          "name": "菜单背景色",
          "default": "#f5f5f5",
          "used": [
            {
              "selector": ".am-menu-nav",
              "property": "background-color"
            },
            {
              "selector": ".am-menu-nav.am-in:before",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-color",
          "name": "菜单颜色",
          "default": "#303338",
          "used": [
            {
              "selector": ".am-menu-nav>li>a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-bg",
          "name": "二级菜单背景色",
          "default": "#f1f1f1",
          "used": [
            {
              "selector": ".am-menu-sub",
              "property": "background-color"
            },
            {
              "selector": ".am-menu-nav > .am-parent > a:before",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单链接颜色",
          "default": "#555",
          "used": [
            {
              "selector": ".am-menu-sub >li > a",
              "property": "color"
            }
          ]
        }
      ],
      "demos": [
        {
          "data": {
            "options": {
              "cols": "4"
            }
          }
        }
      ]
    },
    {
      "name": "offcanvas1",
      "desc": "侧滑竖排",
      "options": {
        "cols": "1"
      },
      "hook": "hook-am-menu-offcanvas1",
      "variables": [
        {
          "variable": "menu-toggle-color",
          "name": "触发按钮颜色",
          "default": "#c7c7c7",
          "used": [
            {
              "selector": ".am-menu-toggle",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-color",
          "name": "一级菜单颜色",
          "default": "#ccc",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-hover-color",
          "name": "一级菜单 Hover 颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-nav > .am-open > a, .am-menu-nav > li > a:hover, .am-menu-nav > li > a:focus",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-hover-bg",
          "name": "一级菜单 Hover 背景色",
          "default": "#404040",
          "used": [
            {
              "selector": ".am-menu-nav > .am-open > a, .am-menu-nav > li > a:hover, .am-menu-nav > li > a:focus",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-active-bg",
          "name": "二级菜单背景色",
          "default": "#1a1a1a",
          "used": [
            {
              "selector": ".am-menu-sub",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单颜色",
          "default": "#eee",
          "used": [
            {
              "selector": ".am-menu-sub a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-hover-color",
          "name": "二级菜单 Hover 颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-sub a:hover",
              "property": "color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "侧滑左侧",
          "data": {
            "options": {
              "cols": "1"
            }
          }
        },
        {
          "desc": "侧滑右侧",
          "data": {
            "options": {
              "cols": "1",
              "offCanvasFlip": true
            }
          }
        }
      ]
    },
    {
      "name": "offcanvas2",
      "desc": "侧滑横排",
      "options": {
        "cols": "3",
        "offCanvasFlip": true
      },
      "hook": "hook-am-menu-offcanvas2",
      "variables": [
        {
          "variable": "menu-toggle-color",
          "name": "触发按钮颜色",
          "default": "#c7c7c7",
          "used": [
            {
              "selector": ".am-menu-toggle",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-color",
          "name": "链接颜色",
          "default": "#ccc",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-bg",
          "name": "链接背景色",
          "default": "#404040",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-hover-color",
          "name": "链接 Hover 颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-nav > li > a:hover, .am-menu-nav > li > a:focus",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-active-color",
          "name": "链接激活颜色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-nav > .am-active > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-active-bg",
          "name": "链接激活背景色",
          "default": "#262626",
          "used": [
            {
              "selector": ".am-menu-nav > li > a:hover, .am-menu-nav > li > a:focus",
              "property": "background-color"
            },
            {
              "selector": ".am-menu-nav > .am-active > a",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-border-color",
          "name": "边框颜色",
          "default": "rgba(0, 0, 0, 0.3)",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "border-color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "侧滑横排",
          "data": {
            "options": {
              "cols": "3",
              "offCanvasFlip": true
            },
            "content": [
              {
                "link": "##",
                "title": "公司"
              },
              {
                "link": "##",
                "title": "人物"
              },
              {
                "link": "##",
                "title": "趋势"
              },
              {
                "link": "##",
                "title": "投融资"
              },
              {
                "link": "##",
                "title": "创业公司"
              },
              {
                "link": "##",
                "title": "创业人物"
              },
              {
                "link": "##",
                "title": "公司"
              },
              {
                "link": "##",
                "title": "人物"
              },
              {
                "link": "##",
                "title": "趋势"
              },
              {
                "link": "##",
                "title": "投融资"
              },
              {
                "link": "##",
                "title": "创业公司"
              },
              {
                "link": "##",
                "title": "创业人物"
              },
              {
                "link": "##",
                "title": "公司"
              },
              {
                "link": "##",
                "title": "人物"
              },
              {
                "link": "##",
                "title": "趋势"
              },
              {
                "link": "##",
                "title": "投融资"
              },
              {
                "link": "##",
                "title": "创业公司"
              },
              {
                "link": "##",
                "title": "创业人物"
              }
            ]
          }
        }
      ]
    },
    {
      "name": "stack",
      "desc": "垂直菜单",
      "options": {
        "cols": "1"
      },
      "hook": "hook-am-menu-stack",
      "variables": [
        {
          "variable": "menu-nav-top-bg",
          "name": "一级菜单背景色",
          "default": "#F5F5F5",
          "used": [
            {
              "selector": ".am-menu-nav>li>a",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-color",
          "name": "一级菜单颜色",
          "default": "#333",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-hover-bg",
          "name": "一级 Hover 背景色",
          "default": "#ddd",
          "used": [
            {
              "selector": ".am-menu-nav>.am-open>a, .am-menu-nav>li>a:hover,.am-menu-nav>li>a:focus",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-top-link-hover-color",
          "name": "一级 Hover 颜色",
          "default": "#222",
          "used": [
            {
              "selector": ".am-menu-nav>.am-open>a, .am-menu-nav>li>a:hover,.am-menu-nav>li>a:focus",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单颜色",
          "default": "#444",
          "used": [
            {
              "selector": ".am-menu-sub a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-hover-color",
          "name": "二级 Hover 颜色",
          "default": "#333",
          "used": [
            {
              "selector": ".am-menu-sub a:hover",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-border-color",
          "name": "边框颜色",
          "default": "dedede",
          "used": [
            {
              "selector": ".am-menu-nav",
              "property": "border-bottom-color"
            },
            {
              "selector": "& > li.am-parent.am-open > a",
              "property": "border-bottom-color"
            },
            {
              "selector": ".am-menu-sub, .am-menu-nav > li > a",
              "property": "border-top-color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "",
          "data": {
            "options": {
              "cols": "1"
            }
          }
        }
      ]
    },
    {
      "name": "one",
      "desc": "简约风格",
      "options": {
        "cols": "1"
      },
      "hook": "hook-am-menu-one",
      "variables": [
        {
          "variable": "menu-nav-bg",
          "name": "背景颜色",
          "default": "#f5f5f5",
          "used": [
            {
              "selector": "",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-color",
          "name": "一级菜单颜色",
          "default": "#7d7d7d",
          "used": [
            {
              "selector": ".am-menu-nav > li > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-link-active-color",
          "name": "一级菜单激活颜色",
          "default": "#555",
          "used": [
            {
              "selector": ".am-menu-nav .am-active > a",
              "property": "color"
            }
          ]
        },
        {
          "variable": "menu-nav-active-border-color",
          "name": "激活边框颜色",
          "default": "#15afef",
          "used": [
            {
              "selector": ".am-menu-nav .am-active > a",
              "property": "border-bottom-color"
            },
            {
              "selector": ".am-menu-nav .am-open > a::before",
              "property": "border-bottom-color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-bg",
          "name": "二级菜单背景色",
          "default": "#fff",
          "used": [
            {
              "selector": ".am-menu-sub",
              "property": "background-color"
            }
          ]
        },
        {
          "variable": "menu-nav-sub-link-color",
          "name": "二级菜单颜色",
          "default": "#555",
          "used": [
            {
              "selector": ".am-menu-sub a",
              "property": "color"
            }
          ]
        }
      ],
      "demos": [
        {
          "desc": "",
          "data": {
            "options": {
              "cols": "1"
            }
          }
        }
      ]
    }
  ],
  "jsBase": [
    "core.js"
  ],
  "jsDependencies": [
    "ui.offcanvas.js",
    "ui.collapse.js",
    "ui.iscroll-lite.js"
  ],
  "script": "menu.js",
  "api": {
    "id": {
      "name": "ID",
      "desc": "模块自定义ID，遵循CSS ID命名规范",
      "type": "text",
      "default": "",
      "required": false
    },
    "className": {
      "name": "自定Class",
      "desc": "用户自定义模块class，遵循 CSS class 命名规范",
      "type": "text",
      "placeholder": "css类名，多个用空格分隔",
      "default": "",
      "required": false
    },
    "theme": {
      "name": "主题",
      "desc": "模块主题",
      "type": "select",
      "default": "default",
      "required": true,
      "dataList": "<%= pkg.themes %>"
    },
    "options": {
      "cols": {
        "name": "列数",
        "desc": "一级菜单列数，1-12，为1时可省略",
        "type": "select",
        "default": "",
        "pattern": "",
        "required": false,
        "dataList": [
          {
            "value": 1,
            "title": 1
          },
          {
            "value": 2,
            "title": 2
          },
          {
            "value": 3,
            "title": 3
          },
          {
            "value": 4,
            "title": 4
          },
          {
            "value": 5,
            "title": 5
          },
          {
            "value": 6,
            "title": 6
          }
        ]
      },
      "offCanvasFlip": {
        "name": "侧滑菜单位置",
        "desc": "仅对侧滑主题有效",
        "type": "select",
        "default": "",
        "required": false,
        "dataList": [
          {
            "value": false,
            "title": "左侧",
            "selected": true
          },
          {
            "value": true,
            "title": "右侧"
          }
        ]
      },
      "toggleTitle": {
        "name": "触发按钮文字",
        "desc": "仅对使用使用触发按钮的主题有用",
        "type": "text",
        "default": "",
        "required": false
      },
      "toggleIcon": {
        "name": "触发按钮图标",
        "desc": "Font Icon名称，如 am-icon-xxx 中的 xxx",
        "type": "text",
        "default": "",
        "required": false
      },
      "toggleCustomIcon": {
        "name": "触发按钮自定图标",
        "desc": "自定义的图片地址，设置此项后 Font Icon 将不显示",
        "type": "text",
        "default": "",
        "required": false
      }
    },
    "content": {
      "type": "Array",
      "item": {
        "title": {
          "type": "text",
          "desc": "菜单文字"
        },
        "link": {
          "type": "text",
          "desc": "菜单链接"
        },
        "className": {
          "type": "text",
          "desc": "Class",
          "hidden": true
        },
        "target": {
          "type": "text",
          "desc": "链接打开方式（_blank|self）",
          "hidden": true
        },
        "subMenu": {
          "type": "Array",
          "item": {
            "title": {
              "type": "text",
              "desc": "菜单文字"
            },
            "link": {
              "type": "text",
              "desc": "菜单链接"
            }
          }
        },
        "subCols": {
          "type": "text",
          "desc": "二级菜单列数"
        }
      }
    }
  },
  "readme": "http://docs.yunshipei.com/amui/#menu",
  "hidden": false
}