ECL 导航列表组件

npm 软件包 : @ecl/navigation-list

npm install --save @ecl/navigation-list

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• “项目” (阵列) (默认: []) 导航列表项目; 格式 :
  • 颜色模式
  • "变相"(字符串)(默认为:"")项目变体;可以是"llustation","image-as-ilustation"
  • "图片"(对象)(默认:QQ) ECL 图片结构后的项目图像
  • "标题"(对象)(默认:QQ) ECL 链接结构后的项目标题链接
  • "描述" (字符串)(默认:") 项目描述文本
  • "链接" (阵列)(默认: []) ECL 链接组的阵列( 每个组都是 ECL 链接组)
• "边界" (boolean) (默认:真实) 显示附加边框和围绕项目进行粘贴
• "栏" (数目) (默认: 2) 列数; 可以是 2 或 3
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

{% include '@ecl/navigation-list/navigation-list.html.twig' with { 
  items: [ 
    { 
      picture: {
        img: {
          src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
          alt: 'Alt text for the image',
        },
      },
      title: { 
        type: 'standalone', 
        label: 'Title 1', 
        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', 
      links: [ 
        [ 
          { 
            link: { 
              label: 'Primary link 1', 
              path: exampleLink, 
            }, 
          }, 
          { 
            link: { 
              label: 'Primary link 2', 
              path: exampleLink, 
            }, 
          }, 
          ... 
        ], 
        [ 
          { 
            link: { 
              label: 'Secondary link 1', 
              path: exampleLink, 
            }, 
          }, 
          ... 
        ], 
      ], 
    }, 
    ... 
} %}