ECL 页面页眉组件

npm 软件包 : @ecl/page-header

npm install --save @ecl/page-header

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• "背景情况" (boolean) (默认:虚假) 使用有色背景
• "标题" (字符串)(默认为:")页头标题 (h1)
• "隐藏 标题" (boolean) (默认:虚假) 隐藏可视化的 h1 标题( 只有屏幕阅读器)
• "描述" (字符串)(默认为:")页头描述文本
• "描述 位置" (字符串) (默认: “ 上” ) 描述位置; 可以是“ 上” 、 “ 下”
• "扩张" (对象) (默认: ) 可扩展的页眉 :
  • "toggle label" (字符串)(默认为:") 可扩展切换的标签
  • "toggle extra 属性"(阵列)(默认: []) 切换的额外属性
  • "标题 内容"(字符串)(默认:") 内容总是可见于可扩展的
  • 扩展时显示的内容
• (图克克克) (对象) (默认: ) ECL 图像结构后的缩略图
• 图片 背景 (对象) (默认: ) ECL 结构的背景图像
• "图片 位置" (字符串) (默认:"上") 图片位置;可以是"上","外","下"
• "meta" (英语) (阵列) (默认: []) 页眉元件; 字符串或对象的数组 label 财务报告和审定财务报表 icon
• "面包屑" (对象) (默认: ) ECL Breadcrumb 结构后的面包屑
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例:

{% include '@ecl/page-header/page-header.html.twig' with {  
  title: 'Page title',  
  description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium',  
  meta: [
    '10 March 2025', 
    { 
      label: 'Brussels', 
      icon: {
        name: 'map-pin',
        family: 'phosphor',
      },
    }
  ],
  breadcrumb: {  
    links: [  
      {  
        label: 'Link 1',  
        path: '/example'  
      },  
    ],  
    navigation_text: 'You are here:',  
  },  
} %}