ECL 卡片组件

npm 软件包 : @ecl/card

npm install --save @ecl/card

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 图片 (关联数组) (默认: ): 卡片的图像, 遵循 ECL 图片结构
• "画面" (bool)(默认:虚假): 该图片是动画吗?
• 标签 (阵列)(默认:[ ]): ECL 标签阵列
• 标签( aria) (字符串)(默认为:""):标签区域的Aria标签
• 初等( m) (字符串阵列) (默认 : []): 卡片的初级元
• 标题 (关联阵列 OR 字符串) (默认 : ) : 使用ECL 链接结构的卡片标题
• 说明 (字符串)(默认为:""): 纸牌说明
• 二级元件( m) (阵列) (默认: []):格式: [ { 标签 (字符串)(默认为:""): 二次元项目标签 图标 (阵列) (默认: ) 二次元的图标,遵循ECL 图标结构 {\fn华文楷体\fs16\1cHE0E0E0}, . [ . ]
• "二级 meta 方向" (字符串)(默认:"垂直"): 显示元的方向a
• 列表 (阵列)(默认:[ ]): ECL 描述列表矩阵
• 其他类 (字符串)(默认:"")
• 额外属性( a) (阵列) (默认: []):格式: [ { 名称 (字符串)(默认:`'), 价值 (可选) (字符串) . [,

示例

{% include '@ecl/card/card.html.twig' with { 
  card: { 
    picture: {
      img: { 
        src: 'https://v2--europa-component-library.netlify.com/example-image.jpg', 
        alt: 'Better regulation',
      }, 
    }, 
    primary_meta: [ 'Meta 1', 'Meta 2', 'Meta 3' ], 
    title: { 
      path: '/example', 
      label: 'Better regulation', 
    }, 
    description: 'Transparently designing and evaluating evidence-based EU legislation, backed by citizens views.', 
    secondary_meta: [ 
      { 
        label: '2018/10/22', 
        icon: { 
          name: 'calendar-blank',
          family: 'phosphor',
        }, 
      }, 
      { 
        label: 'Luxembourg', 
        icon: { 
          name: 'map-pin',
          family: 'phosphor',
        }, 
      }, 
    ], 
  } 
} %}