ECL 按钮组件

npm 软件包 : @ecl/button

npm install --save @ecl/button

参数

• "标签" (字符串)(默认:"")
• "尺寸" (字符串) (默认: “ l' ” ): 按钮大小
• "变相" (字符串)(默认:"初级"):可以是"初级","二级","三级"
• "风格" (字符串)(默认为:""):可以是"高光","中性","倒". 并非所有变体都有样式可用
• "类型" (字符串) (默认: “ 提交 ” ): 可以是 HTML 按钮的同类型 - “ 提交 ” 、 “ 重设 ” 、 “ 按钮 ”
• "残疾" (bool) (默认: 假): 定义是否应当禁用按钮( HTML 已禁用属性)
• "隐藏 标签" (bool) (默认:假):隐藏按钮标签,仅供屏幕阅读器使用. 注意: 需要定义图标
• 缩写“ 位置 ” (字符串,可选) (默认: 之后): 定义图标位置,可以是“在”或“在”之前
• 漫画 关联数组的 (可选) (关联数组) OR (阵列) - 图标组件的默认结构以外加 类作为内部密钥.
• "指标" (对象)(默认:QQ)类型指标的对象. 要显示, 它应该被定义而非空( 至少应该包含一个空值), 并且只有当有一个图标和没有标签时
• "超级" (可选) (字符串)(默认为:") 外类(空格分隔)
• “外部属性” (可选) (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

主按钮示例 :

{% include '@ecl/button/button.html.twig' with { 
  variant: 'primary', 
  label: 'Example button', 
  disabled: false, 
  icon: { 
    name: 'corner-right',
    family: 'phosphor', 
    size: 'xs,' 
  }, 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test', value: 'data-test-value' }, 
    { name: 'data-test-1', value: 'data-test-value-1' } 
  ] 
} %}