欧共体 突出显示框组件

npm 软件包 : @ecl/highlight-box

npm install --save @ecl/highlight-box

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 编号 (字符串)(默认:随机):突出框 id
• "标题" (字符串)(默认为: “ ” ): 突出显示框标题
• "描述" (字符串) (默认: “ ” ): 突出框描述
• 漫画 (对象)(默认:"'"):标题图标;遵循ECL图标结构
• "链接" (对象) (默认: ):可选链接;遵循ECL链接结构
• "超级" (字符串)(默认:"")
• “外部属性” (可选) (阵列) (默认: [])
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • "值"(可选) (字符串) 属性值, 如:"data-test-1"

示例

{% include '@ecl/highlight-box/highlight-box.html.twig' with { 
  title: 'What are the next steps?',
  description:
    'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  icon: {
    name: 'arrow-right',
    size: 'xs',
    family: 'phosphor',
  },
  link: {
    link: {
      label: 'Read more',
      path: exampleLink,
    },
    icon: {
      name: 'arrow-right',
      size: 'xs',
      family: 'phosphor',
    },
  },
} %}