欧共体 页面导航

npm 软件包 : @ecl/inpage-navigation

npm install --save @ecl/inpage-navigation

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 编号 (字符串)(默认:随机) 组件独有的代号
• "标题" (字符串)(默认为:"")导航部分标题
• “ 触发 aria 标签 ” (字符串) (默认:"'") 移动触发按钮的Aria标签
• "链接" (阵列)(默认:[ ]):
  • "href" (字符串)(默认为:") 链接目标
  • “ 标签” (字符串)(默认: “ ” ) 链接标签
• “缩略语 大小” (字符串)(默认:"xs")切换图标的大小
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/inpage-navigation/inpage-navigation.html.twig' with {  
  title: 'Page contents', 
  links: [ 
    { 
      href: "#inline-nav-1", 
      label: "Heading 1" 
    }, 
    { 
      href: "#inline-nav-2", 
      label: "Heading 2" 
    }, 
    { 
      href: "#inline-nav-3", 
      label: "Heading 3" 
    }, 
    { 
      href: "#inline-nav-4", 
      label: "Heading 4" 
    }, 
  ], 
} %}