ECL 选择组件

npm 软件包 : @ecl/select

npm install --save @ecl/select

参数:

• 编号 (字符串)(默认:随机)
• "选择" (阵列)(默认:[ ]):
  • "值"(字符串)(默认为:")
  • “ 标签”( 字符串)( 默认 : “ ”)
  • "所选"(布尔语)(默认:虚假)
  • (默认:虚假)
• "残疾" (boolean) (默认:虚假)
• "无效" (boolean) (默认:虚假)
• "必须" (boolean) (默认:虚假)
• "名字"("名字") (字符串)(默认:"")
• “缩略语 大小” (字符串)(默认:"xs")
• 切换标签( t) (字符串)(默认:"toggle dropp down")
• 宽度 (字符串)(默认:")输入宽度(s, m或l)
• 复数 (bolean) (默认:虚假): 对于多个选择
• “多位控件” (字符串)(默认为:") 多个选择的占位符
• “多语 全部 文本” (字符串)(默认为:") 选择所有选项的文本
• “多选项” (字符串)(默认为:")选项数的标签(仅屏幕阅读器)
• "多选取" (boolean) (默认: 真实) 在多个选择中显示选中的全部复选框
• "多点搜索" (boolean) (默认:真实) 在多个选择中显示文本过滤器
• “ 多重 搜索 文本” (字符串) (默认为:") 多个所选区域内搜索框的文字
• “ 多重搜索 否 结果 文本” (字符串)(默认 : “ ” ) 搜索选项后无结果的标签标签
• “ 多个反文本” (字符串 (默认 : “ ”) 选择多个选项时为计数器设置标签; 为屏幕阅读器设置标签
• “ 超类” (可选) (字符串) (默认:'') 选定组的额外类(空格分隔)
• "超级" (可选) (字符串)(默认为:") 外类(空格分隔)
• “外部属性” (可选) (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/select/select.html.twig' with { 
  options: [ 
    { 
      value: 1, 
      label: 'Belgium' 
    }, 
    ... 
  ], 
  invalid: false, 
  disabled: false, 
  id: 'example-id', 
  name: 'example-name', 
  width: 'm',
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test-1', value: 'data-test-value-1' }, 
    { name: 'data-test-2', value: 'data-test-value-2' } 
  ] 
} %}