欧共体 链接组件

npm 软件包 : @ecl/link

npm install --save @ecl/link

参数

• "链接" (对象)(默认: ):
  • "类型" (字符串)(默认为"'") 链接类型;可以是"'","独立","初级-高光","初级-中性","二级-中性","二级-中性","二级-中性","三级-中性","三级-中性","三级-中性","三级-中性"
  • "倒转"(boolean)(默认:虚假) 链接是否倒转( 在黑暗背景上播放) ?
  • "branded"(boolean)(默认:虚假) 链接使用品牌颜色(通常为暗色)吗?
  • "label" (字符串)(默认为:"") 链接文本内容
  • "路径" (字符串)(默认为:") Link href 属性
  • "外部"(布尔)(默认:虚假) 激活外部链接图标
  • “ sr 外部” (字符串)(默认: “ ”) 外部图标的额外屏幕阅读器标签
  • “ aria label” (字符串)(默认: “ ” ) Aria 标签属性值
  • “ icon 位置”( 字符串)( 默认 : “ after” ) 链接图标的位置; 可以是“ before” 或“ befter”
  • "hide label"(布尔)(默认:虚假) 隐藏可视化的链接标签( 只有屏幕阅读器); 需要图标
  • "指标"(对象)(默认:QQ) 指标组件对象; 仅在有图标且没有标签时显示
  • “ no icon wraping”(布尔)(默认:虚假) 防止图标单独被新行所包裹
• 漫画 (对象) 或对象(阵列) ECL 图标结构; 外部类用于内部定位
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/link/link.html.twig' with {
  link: {
    type: 'standalone',
    label: 'Standalone link',
    path: 'http://google.com',
    icon_position: 'after'
    aria_label: 'An aria label'
  },
  icon: {
    name: 'arrow-square-out',
    family: 'phosphor',
    extra_classes: 'my-extra-class-1 my-extra-class-2'
  },
  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' }
  ]
} %}