欧共体 突出显示的搜索组件

npm 软件包 : @ecl/highlighted-search

npm install --save @ecl/highlighted-search

参数

• 编号 (字符串)(默认:随机) 组件独有的代号
• 颜色( m) (弦声) 颜色模式名称
• "标题" (字符串)(默认为:")突出显示搜索的标题
• "描述" (字符串)(默认:")突出显示的搜索描述
• "搜索输入" (对象) (默认: ) 搜索字段, 遵循 ECL 文本输入结构
• "搜索-帮助" (字符串)(默认为:")搜索助手,获取额外信息
• "搜索-按钮" (对象) (默认: ) 搜索按钮, 遵循 ECL 按钮结构
• "建议 标签" (字符串)(默认为: “ ” ) 建议的标签
• "建议" (对象) (默认: ) 标签列表, 遵循ECL 标签集结构
• "超级" (字符串)(默认:"")
• “外部属性” (可选) (阵列) (默认: [])
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • "值"(可选) (字符串) 属性值, 如:"data-test-1"
• “形式 外部 属性” (可选) (阵列) (默认: []):额外的属性,在形式级别上添加. 窗体默认为 method="GET"; 通过 method 属性在此覆盖它.
  • 名称 (字符串) 属性名称, 如 “ 动作 ”
  • 值 (可选) (字符串) 属性值, 如 : “ action- url ”

示例

{% include '@ecl/highlighted-search/highlighted-search.html.twig' with {
title: 'Find your next role',
  description: 'Discover job opportunities in the EU institutions',
  search_input: {
    id: 'highlighted-search-input-id',
    name: 'highlighted-search-input-name',
    placeholder: 'Enter a search keyword',
  },
  search_helper: "Enter the job you're looking for",
  search_button: {
    label: 'Search',
  },
  form_extra_attributes: [
    { name: 'action', value: '/search-results?category=jobs&lang=en' },
  ],
  suggestion_label: 'Or explore:',
  suggestion: {
    items: [
      {
        tag: {
          type: 'link',
          path: '#',
          label: 'Traineeships',
        },
      },
      {
        tag: {
          type: 'link',
          path: '#',
          label: 'IT & Digital',
        },
      },
    ],
  },
} %}