ECL 类别过滤器

npm 软件包 : @ecl/category-filter

npm install --save @ecl/category-filter

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• "标签": (字符串) (默认为:"'"):为可访问性提供了Aria标签
• 编号: (字符串)(默认:随机字符串): 类别过滤器独有的 ID
• "名字"("名字") (字符串) (默认为:") 可选名称属性来链接第一级项目. 如果 expand_all 或者说 collapse_all 显示
• “项目” (关联数组) (默认: ): 树项 - 格式 : "标签":(字符串)(默认:") "路径":(字符串)(默认:") "当前"(布尔)(默认:虚假) "外部属性"(阵列)(默认: [])
  • "孩子":(关联阵列)(可选): 子项目, 格式与项目相同; 可嵌入到任何深度 "标签":(字符串)(默认:") "路径":(字符串)(默认:") "当前"(布尔)(默认:虚假) "外部属性"(阵列)(默认: [])
• "扩展了" (关联数组) (默认: ): 用于扩展所有项目的按钮; 遵循 ECL 按钮结构
• 拼接点 (关联数组) (默认: ): 崩溃所有项目的按钮; 遵循 ECL 按钮结构
• "超级" (可选) (字符串) (默认:'') 导航元素的额外类(空格分离)
• “外部属性” (可选) (阵列) (默认: []) 导航元素的额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • "值"(可选) (字符串) 属性值, 如:"data-test-1"

示例

{% include '@ecl/category-filter/category-filter.html.twig' with {
  label: 'Category filter',
  id: 'unique-id',
  expand_all: {
    label: 'Expand all',
  },
  collapse_all: {
    label: 'Collapse all',
  },
  items: [
    {
      label: "Item 1",
      path: "example",
      children: [
        {
          label: "Item 1.1",
          path: "/example"
        },
        ...
        ]
      }
      ...
      ],
    }
  ],
  extra_classes: "ecl-category-filter-extra-class,
  extra_attributes: [
    {
      name:"data-ecl-category-filter",
    },
    ...
    ]
} %}