ECL 范围组件

npm 软件包 : @ecl/range

npm install --save @ecl/range

参数:

• 编号 (字符串)(默认:随机)
• "小麦" (整数) (默认: “ ” ) 范围最小值
• "马克斯" (整数) (默认: “ ” ) 范围的 最大值
• "步骤" (整数) (默认: “ ” ) 范围的外观
• "价值" (整数) (默认: “ ” ) 范围的默认值
• "残疾" (boolean) (默认:虚假)
• "无效" (boolean) (默认:虚假)
• "必须" (boolean) (默认:虚假)
• "名字"("名字") (字符串)(默认:"")
• 宽度 (字符串)(默认:'m')输入宽度(s, m或l)
• “ 外部 标签 类” (字符串) (默认为: “ ” ) 区域标签的额外类( 空格分隔)
• “ 超类” (可选) (字符串)(默认:") 范围组的额外类(空格分隔)
• "超级" (可选) (字符串)(默认为:") 外类(空格分隔)
• “外部属性” (可选) (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/range/range.html.twig' with { 
  id: 'example-range-id',
  min: 0,
  max: 30,
  value: 15,
  width: 'm',
  value_text: 'Value: ',
  required: false, 
  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' } 
  ] 
} %}