ECL 班纳

npm 软件包 : @ecl/banner

npm install --save @ecl/banner

参数

• 编号 (字符串)(默认:随机):横幅中独有的id
• 颜色( m) (字符串)(默认为:")颜色模式的名称
• "尺寸" (字符串)(默认:"m") 横幅大小(可以是"s","m","l")
• 宽度 (字符串)(默认:"m") 标题和描述的大小(可以是"s","m","l")
• "font 重量" (字符串)(默认:"光") 标题和描述的字体重 (可以是 “ 浅 ” 、 “ 粗体 ” )
• 颜色( font color) : (字符串) (默认:'dark') 标题和描述的颜色(可以是'dark','light')
• “框背景” (字符串) (默认:"光") 框背景的颜色(可以是"暗","光","无")
• "重叠" (boolean) (默认: 假) 显示半透明覆盖
• "标题" (字符串或链接)(默认为:") 横幅标题
• "画面" (对象)(默认: ): 横幅图像, 遵循 ECL 图片结构
• "视频" (对象)(默认: ): 横幅视频
  • "海报"(字符串)(默认:""): 用作视频占位符的图像
  • "源" (阵列)(默认: []):格式: [ { "src" (字符串)(默认:"""), "类型" (字符串)(默认为:""), {\fn华文楷体\fs16\1cHE0E0E0}, . [,
  • "轨道"(阵列)(默认:[]):格式:[ { "src" (字符串)(默认:"""), “kind” (字符串)(默认为“'”), "src lang"(字符串)(默认为:"""), “ 标签”( 字符串)( 默认 : '') , {\fn华文楷体\fs16\1cHE0E0E0}, . [,
• "游戏" (字符串)(默认为:")播放按钮的屏幕阅读器标签
• "暂停" (字符串)(默认为:")暂停按钮的屏幕阅读器标签
• "信贷" (字符串)(默认:")图像的信用
• "描述" (字符串或链接)(默认为:") 横幅描述
• "横向" (字符串) (默认:"左") 水平框对齐(可以是"左","中","右")
• "纵向" (字符串) (默认:"中") 垂直框对齐(可以是"上","中","下")
• "满" "活" (boolean) (默认:虚假) 全宽横幅( 网格内侧)
• "链接" (对象) (默认: ) 横幅的可选链接, 遵循 ECL 链接结构
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/banner/banner.html.twig' with {  
  title: {
    link: {
      label: 'Lorem ipsum dolor sit amet consectetuer adipiscin',
      path: '#example',
    },
  },
  description:
    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
  picture: {
    img: {
      src: 'url/path-to-image',
      alt: 'alternative text',
    },
  },
  credit: '© Copyright',
} %}