欧共体 有插图组件的列表

npm 软件包 : @ecl/list-illustration

npm install --save @ecl/list-illustration

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• “项目” (阵列)(默认:[ ]):
  • "标题" (字符串)(默认:") 项目标题
  • "描述" (字符串)(默认:") 项目描述文本
  • “ 值”( 字符串)( 默认 : “ ” ) 可选参数值显著显示
  • "图片"(对象)(默认:QQ) ECL 结构后的图像
  • "平方"(boolean)(默认:假)使用平方图像(100x100px)
  • "icon"(对象)(默认:-) ECL 图标结构后的图标
  • "media size" (字符串)(默认:"m") 介质元素的大小(图片或图标);可以是"s","m","l"
• "栏" (数目) (默认:1) 列数; 1 表示垂直单列显示
• "连线" (boolean) (默认: 假) 在项目左侧显示图标
• "icon list" (缩写) (boolean) (默认: 假) Render 作为图标列表
• "数字列表" (boolean) (默认: 假) 编号列表
• "对接" (boolean) (默认:真实) 重置计数器从 counter_start
• "对接开始" (数字) (默认: 0) 从何时开始计数器 counter_reset 真实
• "潜水" (boolean) (默认:虚假) 在图标列表中的项目之间显示分隔符
• "斑马" (boolean) (默认:虚假) 垂直列表中项目的其他背景颜色
• "以为中心" (boolean) (默认: 假) 中心对齐的项目内容
• 宽度 (字符串)(默认为:"l") 值文本的大小;可以是"m","l"
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/list-illustration/list-illustration.html.twig' with {
  zebra: true,
  items: [
    {
      title: 'Display list item 1',
      picture: {
        img: {
          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
          alt: 'Image alternative text',
        },
      },
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.',
      value: '3.2 million',
    },
    {
      title: 'Display list item 2',
      picture: {
        img: {
          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
          alt: 'Image alternative text',
        },
      },
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.',
    },
    {
      title: 'Display list item 3',
      picture: {
        img: {
          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
          alt: 'Image alternative text',
        },
      },
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.',
    },
    {
      title: 'Display list item 4',
      picture: {
        img: {
          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
          alt: 'Image alternative text',
        },
      },
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis. Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce sit amet sem dui. In nec lacinia eros.',
    },
  ],
} %}