欧共体 内容项目构成部分

npm 软件包 : @ecl/content-item

npm install --save @ecl/content-item

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 图片 (关联数组) (默认: ):
  • 大小 (字符串)(默认为 “ 较大 ”) : 图片大小( 可以是 “ small” 或 “ small” ) 。 小照片应该是正方形的
  • 职位 (字符串)(默认:"左"): 图片的位置( 可以是 “ 左” 、 “ 右” 或 “ 上” )
  • 图像 (关联数组) (默认: ): 默认图像属性
    • 曲线 (字符串)(默认为:""): 默认图像路径
    • 备选案文 (字符串)(默认为:""): 默认图像的换文本
  • 来源 (阵列)(默认:[ ]): 反应行为图像源列表,格式:
    • 曲线 (字符串)(默认为:""): 源图像路径
    • 媒体 (字符串)(默认为:""):使用此源的媒体条件
    • 类型 (字符串)(默认为:""):图像源的MIME类型
• 大小 (字符串)(默认为 “ 较大 ”) : 图片大小( 可以是 “ small” 或 “ small” ) 。 小照片应该是正方形的
• 职位 (字符串)(默认:"左"): 图片的位置( 可以是 “ 左” 、 “ 右” 或 “ 上” )
• 图像 (关联数组) (默认: ):
  • 曲线 (字符串)(默认为:""): 默认图像路径
  • 备选案文 (字符串)(默认为:""): 默认图像的换文本
• 来源 (阵列) (默认: []):格式: [ { 曲线 (字符串)(默认为:""): 源图像路径 媒体 (字符串)(默认为:""):使用此源的媒体条件 类型 (字符串)(默认为:""): 此来源的类型 {\fn华文楷体\fs16\1cHE0E0E0}, . [ . ]
• "画面" (bool)(默认:虚假): 该图片是动画吗?
• 日期 (关联数组) (默认: ): 与 ECL 兼容的预定义结构
• 标签 (阵列)(默认:[ ]): ECL 标签阵列
• 标签( aria) (字符串)(默认为:""):标签区域的Aria标签
• 初等( m) (字符串阵列) (默认: []): 内容项目的主元a
• 标题 (关联数组) (默认: ): 内容项目的标题,遵循ECL Link结构
• 说明 (字符串)(默认为:""): 内容说明项目
• 二级元件( m) (阵列) (默认: []):格式: [ { 标签 (字符串)(默认为:""): 二次元项目标签 图标 (阵列) (默认: ) 二次元的图标,遵循ECL 图标结构 {\fn华文楷体\fs16\1cHE0E0E0}, . [ . ]
• "二级 meta 方向" (字符串)(默认:"垂直"): 显示元的方向a
• 分隔符 (boolean) (默认:虚假): 内容项目下的可选分隔符
• 列表 (阵列)(默认:[ ]): ECL 描述列表矩阵
• 其他类 (字符串)(默认:"")
• 额外属性( a) (阵列) (默认: []):格式: [ { 名称 (字符串)(默认:`'), 价值 (可选) (字符串) {\fn华文楷体\fs16\1cHE0E0E0}, . [,

{% include '@ecl/content-item/content-item.html.twig' with { 
  divider: true,
  picture: {
    position: 'left',
    size: 'large',
    img: {
      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
      alt: 'Alt text of the image',
    },
  },
  labels: [
    { label: 'highlight', variant: 'highlight' },
    { label: 'high importance', variant: 'high' },
  ],
  labels_aria: 'Labels',
  primary_meta: ['PRIMARY META', 'DD Month Year'],
  title: {
    type: 'standalone',
    label: 'Title',
    path: exampleLink,
  },
  description:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio commodo tellus',
  secondary_meta: [
    {
      icon: {
        name: 'calendar-blank',
        family: 'phosphor',
      },
      label: '2018/10/22',
    },
    {
      icon: {
        name: 'map-pin',
        family: 'phosphor',
      },
      label: 'Luxembourg',
    },
  ],
  lists: [
    {
      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',
                size: 's',
              },
            },
            {
              link: {
                label: 'Lorem ipsum dolor sit amet',
                path: exampleLink,
                icon_position: 'before',
              },
              icon: {
                name: 'download',
                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'],
        },
      ],
    },
  ],
} %}