ECL 菜单

npm 软件包 : @ecl/menu

npm install --save @ecl/menu

参数

• 编号 (字符串)(默认:随机): 独有的 id
• "标题" (字符串) (默认:"'):菜单的标题(在手机上播放)
• "切换": (关联阵列)(默认:phosphor"list"图标): 切换 (hamburger) 按钮, 使用 ECL 按钮结构
• "关闭": (关联阵列)(默认:phosphor"x"图标): 关闭按钮, 使用 ECL 按钮结构
• “ 回标签” (字符串): (默认:''): 后键标签
• "利亚-标签" (字符串)(默认为:")主导航的Aria标签
• “项目”: (阵列) (默认: []): 菜单项 - 格式 : [ { "标签":(字符串)(默认:") "路径":(字符串)(默认:") "是"(boolean)(可选), "外": (布尔) (可选), “ sr 外部” (字符串)(默认 : “ ”) 外部图标的额外标签 "触发器 aria label"(字符串), “外部属性”(可选)(阵列) "孩子":(关联阵列)(可选):[ { "标签":(字符串)(默认:") "路径":(字符串)(默认:") "是"(boolean)(可选), "外": (布尔) “ sr 外部” (字符串)(默认 : “ ”) 外部图标的额外标签 “外部属性”(可选)(阵列) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 [ . ] {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 [,
• “最大线”: (int) (默认: 2):每一级项目标签的行数. 设定为零以删除此行为
• "网站名称" (字符串)(默认为:""): 网站名称(仅在手机上使用)
• “见 所有 标签” (字符串)(默认为:"'"):标签用于“查看全部”链接(仅移动)
• "按钮 上页 标签" (字符串)(默认为:""): 如果出现溢出( 屏幕阅读器) , 用于显示先前项目的按钮的标签
• “ 按钮 next label” (字符串)(默认为:""): 显示下一个项目的按钮标签, 以防出现溢出( 屏幕阅读器)
• "超级" (可选) (字符串) (默认:'') 导航元素的额外类(空格分离)
• “外部属性” (可选) (阵列) (默认: []) 导航元素的额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • "值"(可选) (字符串) 属性值, 如:"data-test-1"

示例

{% include '@ecl/menu/menu.html.twig' with {
  title: 'Menu',
  toggle: {
    link: {
      label: 'Menu',
      path: exampleLink,
    },
  },
  close: {
    label: 'Close',
    hide_label: true,
  },
  back_label: 'Back',
  aria_label: 'Main navigation',
  menu_link: './example.com',
  items: [
    {
      label: "Menu item",
      path: "example",
      is_current: false,
      children: [
        {
          label: "Item 1.1",
          path: "/example"
        },
        ...
      ],
    },
    ...
  ],
  extra_classes: "ecl-menu-extra-class,
  extra_attributes: [
    {
      name:"data-ecl-menu",
    },
    ...
    ]
} %}