欧共体 标签组件

npm 软件包 : @ecl/tabs

npm install --save @ecl/tabs

参数:

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• "行为" (boolean) (默认: 假) 启用带有内容面板的标签行为
• “项目” (阵列) (默认: []) 标签项目; 格式 :
  • “ 标签”( 字符串)( 默认: “ ” ) 标签
  • "路径" (字符串)(默认为:") Tab 链接 URL
  • "是"(boolean)(默认:虚假) 此标签是否活动
  • “ extra classes” (字符串)(默认为: “ ”) 此标签项的额外类
• "更多标签" (字符串)(默认 : “ 显示 %d 更多项目” ) 外溢按钮“更多”的标签; %d 替换为计数
• "上个标签" (字符串) (默认: “ 先前的” ) 前一个按钮的屏幕阅读器标签( 移动)
• 下一个标签( n) (字符串)(默认:'Next') 下个按钮(移动)的屏幕阅读器标签
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/tabs/tabs.html.twig' with { 
  items: [ 
    { 
      label: 'Item 1 label', 
      path: exampleLink }, 
    { 
      label: 'Item 2 label', 
      path: exampleLink, 
    }, 
    { 
      label: 'Item 3 label', 
      path: exampleLink, 
      is_current: true, 
    }, 
    ... 
  ], 
} %}