欧共体 表格组组件

npm 软件包 : @ecl/form-group

npm install --save @ecl/form-group

参数:

• "输入" (对象)(默认: ): 输入组件对象;必须包括 input_type 设置为 : “ checkbox ” 、 “ datepicker ” 、 “ file ” 、 “ radio ” 、 “ 距离 ” 、 “ rating- field ” 、 “ 搜索 ” 、 “ 选择 ” 、 “ 文本” 、 “ 文本区域 ”
• "残疾" (boolean) (默认:虚假) 禁用窗体组合
• "隐藏 标签" (boolean) (默认:虚假) 隐藏可视化标签( 为屏幕阅读器保存)
• "无效" (boolean) (默认:虚假) 在无效状态下显示窗体组
• "无效"(英文) (对象) (默认: phosphor"警告-圆") 无效时显示的图标, 遵循ECL 图标结构
• "必须" (boolean) (默认:虚假) 按要求标记字段
• "sr invalid icon" (英语) (字符串)(默认为:")无效图标的屏幕阅读器标签
• "需要的标签" (字符串)(默认为:") 所需指标的Aria文本,当它不是明确的文本时
• “ label aria 选项” (字符串) (默认:"'") 当非明确文本时,可选指标的Aria文本
• “ 外部 标签 类” (字符串)(默认:")标签元素的额外类
• "超级" (字符串) (默认为: “ ” ) 窗体组包装的额外类
• “外部属性” (阵列) (默认: []) 窗体组的额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

块 :

• “ helper text” (帮助文本)
• "无效 文本"
• “需要文本”
• “可选文本”
• "标签"

示例

{% include '@ecl/form-group/form-group.html.twig' with { 
  label: 'my file upload label', 
  helper_text: 'this is a helper text', 
  invalid_text: 'this is an invalid text', 
  required_text: '*', 
  optional_text: '(optional)',
  label_aria_required: 'required',
  label_aria_optional: 'optional',
  input: {
    input_type: 'file',
    multiple: false, 
    button_choose_label: "Choose file", 
    button_replace_label: "Replace file",
    extra_attributes: [ 
      { 
          name: 'data-test', 
          value : 'data-test-1' 
      }, 
    ],
  }
} %}