ECL 描述列表组件

npm 软件包 : @ecl/description-list

npm install --save @ecl/description-list

参数

• 项目 (阵列) (默认: []):格式: [ { "term"(字符串或字符串数组) “定义” (ECL 链接或 ECL 标记的字符串或数组的块或数组) "类型" (字符串):数据类型,如果不是纯文本;可以是"link","link-inline","taxonomy","tag" {\fn华文楷体\fs16\1cHE0E0E0}, . [ . ]
• "变相" (字符串) (默认为: “ ” ): 全球显示变体; 可以是“ 横向 ” , “ 垂直 ”
• “ 可见项目” (整数) (默认: 0) 初始可见项数( 0 显示全部)
• "更多标签" (字符串) (默认为: “' ” ) 设置可见 项时“ 显示更多” 按钮的标签
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/description-list/description-list.html.twig' with { 
  variant: 'horizontal',
  visible_items: 3,
  more_label: 'view all',
  items: [
    {
      term: 'Standard text',
      definition:
        'Lorem ipsum dolor sit amet, <a href="#" class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis',
    },
    {
      term: 'Standalone links',
      type: 'link',
      definition: [
        {
          link: {
            label: 'Lorem ipsum dolor sit amet',
            path: exampleLink,
            icon_position: 'before',
          },
          icon: {
            name: 'copy',
            family: 'phosphor',
            size: 's',
          },
        },
        {
          link: {
            label: 'Lorem ipsum dolor sit amet',
            path: exampleLink,
            icon_position: 'before',
          },
          icon: {
            name: 'download-simple',
            family: 'phosphor',
            size: 's',
          },
        },
      ],
    },
    {
      term: 'Links inline',
      type: 'link-inline',
      definition: [
        {
          link: {
            label: 'Lorem ipsum dolor sit amet',
            path: exampleLink,
          },
        },
        {
          link: {
            label: 'Lorem ipsum dolor sit amet',
            path: exampleLink,
          },
        },
      ],
    },
    {
      term: 'Taxonomy list',
      type: 'taxonomy',
      definition: ['Taxonomy item 1', 'Taxonomy item 2', 'Taxonomy item 3'],
    },
  ],
} %}