ECL 时间表

npm 软件包 : @ecl/timeline

npm install --save @ecl/timeline

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• "相撞了" "toggle collapsed" (字符串)(默认:"")
• 切换已扩展 (字符串)(默认:"")
• "隐藏" (对象): (默认:未定义)
  • "出":(整) (默认:项.长) 项目索引后开始隐藏时间线项
  • “ to”:(整数)(默认:项.长) 项目索引后恢复显示时间表项目
• “项目” (阵列)(默认:[ ]):
  • "id":(字符串)(默认:")
  • "标签":(字符串)(默认:")
  • "标题":(字符串)(默认:")
  • "内容":(块)(默认为:")
• "头条" (对象)(默认: ): 在时间线上突出显示的项目
  • "标签":(字符串)(默认:")
  • "标题":(字符串)(默认:")
  • "内容":(块)(默认为:")
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例:

{% include '@ecl/timeline/timeline.html.twig' with { 
  toggle_collapsed: 'Show 10 more items', 
  toggle_expanded: 'Hide 10 items', 
  hide: {from: 7, to: -2}, 
  items: [ 
    { 
      label: '13 September 2017', 
      title: 'Item title', 
      content: 
        '<a href="/example" class="ecl-link">President Juncker\'s State of the Union speech</a>', 
    } 
  ... 
  ] 
} %}