ECL 特性项目构成部分

npm 软件包 : @ecl/featured-item

npm install --save @ecl/featured-item

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 编号 (字符串)(默认:随机)
• "类型" (字符串)(默认为: “ ” ): 特性项目类型( 可以是“ 高亮” ) ,
• "标题" (字符串)(默认为:""): 媒体容器对面内容的标题,
• "微小标题" (字符串)(默认为:""): 增加的小标题
• "描述" (字符串)(默认为:""): 说明媒体容器对面的内容,
• "链接" (对象) (默认: ) 在描述下显示的链接, 遵循ECL 链接结构
• "链接 播放" (字符串)(默认为:")链接显示样式;可以是"按钮"(所有类型)或"高亮"(仅高亮类型)
• "横向调整" (字符串) (默认: “ 左 ” ) 内容对齐( 水平); 可以是“ 左 ” , “ 中 ”
• "垂直调整" (字符串)(默认:"top") 内容对齐(垂直);可以是"top","center"
• "介质 容器" (对象) (默认: ) 媒体与文本一起显示,遵循ECL媒体容器结构
• "媒体 行为" (字符串) (默认: “ static” ) 填充介质的行为;可以是"静态","动态"
• 姿势 (字符串)(默认:"左") 媒体相对于文本的位置;可以是"左","右"
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

折旧

• "链接-高亮" (bool)(默认:虚假):显示突出显示的链接

专题项目示例:

{% include '@ecl/featured-item/featured-item.html.twig' with {
  title: 'title', 
  micro_title: 'about',
  description: 
    '<p class="ecl-u-type-paragraph-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 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.</p>', 
  link: { 
    link: { 
      variant: 'standalone', 
      path: exampleLink, 
      label: 'Standalone link', 
    }, 
    icon: { 
      name: 'arrow-right',
      family: 'phosphor',
      size: 'm', 
    }, 
  }, 
  media_container: {
    picture: {
      img: {
        alt: 'Lorem ipsum dolor sit amet', 
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
      },
    }, 
    description: 
      'Ut enim ad minim veniam, 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.', 
  },
} %}