ECL 模块组件

npm 软件包 : @ecl/modal

npm install --save @ecl/modal

参数:

• 编号 (字符串)(默认:随机) id 模式
• "切换" (字符串)(默认:随机) id 元素切换模式
• "变相" (字符串) (默认: “ ”) : 可以是空的, “ 信息 ” 、 “ 成功 ” 、 “ 警告 ” 或 “ 错误 ”
• "尺寸" (字符串)(默认:"l"):模式大小. 可能是's'、'm'、'l'或'ful'
• "sr icon" (英语) (字符串) (默认:"'"):图标的附加标签;屏幕阅读器的附加标签
• "关闭" (类型"按钮"的对象)(默认:phosphor"x"图标):关闭按钮;必须为屏幕阅读器提供标签
• "按钮" (阵列) (默认: []) 模式页脚中显示的 ECL 按钮对象阵列
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

块 :

• "头": 将任何内容放入模式头的自由块
• 躯体: 将任何内容放入模式正文的自由块( 可滚动)
• "人被固定": 将任何内容放入模式正文底部的自由块(不可滚动)
• "脚": 将任何内容放入模式页脚的自由块

示例

{% include '@ecl/modal/modal.html.twig' with { 
  id: 'modal-example',
  toggle_id: 'modal-toggle',
  sr_icon: 'Information',
  close: {
    label: 'Close',
  },
  header_icon: {
    icon: {
      name: 'warning',
    },
    extra_classes: 'ecl-u-type-color-warning',
  },
  header: 'Lorem ipsum dolor sit amet',
  body: 'Sed quam augue, volutpat sed dapibus in, accumsan a arcu. Nulla quam enim, porttitor at neque a, egestas porttitor tortor. Nam tortor sem, elementum id augue quis, posuere vestibulum dui. Donec id posuere libero, sit amet egestas lorem. Aliquam finibus ipsum mauris, a molestie tortor laoreet.',
  body_fixed: 'Fixed content',
  buttons: [
    {
      label: 'Secondary action',
      type: 'button',
      variant: 'secondary',
      extra_attributes: [{name: 'data-ecl-modal-close'}],
    },
    {
      label: 'Primary action',
      type: 'submit',
      variant: 'primary',
    },
  ],
} %}