ECL 站点页眉组件

npm 软件包 : @ecl/site-header

npm install --save @ecl/site-header

参数

• "记录" (boolean) (默认:虚假): 用户是否登录
• "菜单" (关联阵列):菜单内容,如果有的话. 使用 ECL 菜单结构
• "网站名称" (字符串)(默认为:")站点名称
• "网站 名称 移动 仅" (布尔): 网站名称是否隐藏在桌面上
• "论" (关联数组)(默认:预定义的结构): 日志图像设置 。 格式 :
  • "标题" (字符串)(默认为:""): Logo标题属性.
  • "alt" (字符串)(默认:""): Logo alt属性.
  • "断点":(字符串) (默认:'s") 欧盟的预期值是"l"
  • "ref"(字符串)(默认:""): Logo URL.
  • "src desktop"(字符串)(默认为:"): 桌面标志图像文件路径
  • "src mobile"(字符串)(默认为:"): 只针对欧盟的移动标志图像文件路径
  • "大小":(字符串)(默认:"l"): 桌面大小为 三( s, m, l)
• "登录" (关联数组)格式 :
  • "id":(弦) 纸盒
  • 用户登录的“ 描述” (字符串) 标签
  • “ 标签” (字符串) 注销标签
  • "ref" (字符串) 链接的Url
• "前进" (关联数组)格式 :
  • 用于匿名用户的“ label not ligned” (字符串) 标签
  • "href not lign" (可选) (字符串) 链接到登录表单. 如果不提供, 切换会变成按钮
  • 用户登录的标签
  • "ref 登录"(可选) (字符串) 链接到登录表 。 如果不提供, 切换会变成按钮
• “海关行动” (关联数组) (默认: ):
  • 链接(object)(默认:被预先定义的结构) 链接组件的预定义结构. 如果不提供“ 路径 ” , 切换会变成按钮
  • 关联阵列的"icon"(可选) (关联阵列) OR(阵列) - 图标组件的默认结构,但ext class是内部键. 要打印图标, 名称必须是非空的 .
  • "重叠":(关联阵列)(可选):
    • "标题":(字符串)(默认为:")重叠标题
    • “ 关闭 ” : (关联数组) (默认: qq)
    • “ 内容” :( 字符串)( 默认: “ ”) HTML 用于弹出式
• "语言 选择器" (关联数组)(默认:预定义的结构): 语言切换器设置. 格式 :
  • "href"(可选) (字符串)(默认为:""):用于切换器的URL. 如果不提供, 切换会变成按钮
  • “ 标签”( 字符串)( 默认 : '' ): 切换语言标签,如eu中的'English',ec中的'EN'
  • “ aria label” (字符串)(默认为 : “ ”) : 切换语言 aria 标签
  • “ eu 分类”( 字符串)( 默认 : '' ): 欧盟语言标签
  • “non eu classic”(字符串)(默认为:') : 非欧盟语言的标签
  • “重叠”(关联阵列)(默认:预定义的结构): 重叠语言切换器设置 。 格式 :
    • “ 关闭” : (关联数组) (默认: ++): 关闭按钮, 遵循ECL 按钮结构
    • "标题"(字符串)(默认为:""):重叠标题,如"选择您的语言".
    • "项目" (阵列)(默认: []): (阵列)(默认: []):格式:
      • "lang" (字符串)(默认为:")项目语言代码,如"en","fr"等.
      • "label" (字符串)(默认为:")项目语言标签,如"English","Français"等.
      • "path" (字符串)(默认为:"") 项目语言 URL 如."/例#语言 en".
      • “活性” (boolean)(默认:虚假) 定义项目是否为活性语言 .
    • "non eu items" (阵列)(默认: []): (阵列)(默认: []):格式:
      • "lang" (字符串)(默认为:")项目语言代码,如"en","fr"等.
      • "label" (字符串)(默认为:")项目语言标签,如"English","Français"等.
      • "path" (字符串)(默认为:"") 项目语言 URL 如."/例#语言 en".
      • “活性” (boolean)(默认:虚假) 定义项目是否为活性语言 .
• 搜索( t) (关联数组)格式 :
  • 元素的“ 标签”( 字符串) 标签
  • "ref" (可选) (字符串) 元素的链接. 如果不提供, 切换会变成按钮
• “ 搜索窗体” (关联数组)(默认:预定义的结构):ECL搜索形式组件结构
• "通知书" (对象)(默认: ): 符合ECL通知组件结构的可选通知
• "超级" (可选) (字符串)(默认为:") 外类(空格分隔)
• “外部属性” (可选) (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

折旧

• "banner top" (banner top) (英语) (字符串) OR(财产中包含链接组件的对象): 类名

示例:

{% include '@ecl/site-header/site-header.html.twig' with { 
  site_name: 'This site name'
  logo: {
    alt: 'European Commission', 
    href: '/example', 
    src: '/logo-ec--en.svg', 
  }, 
  language_selector: { 
    href: '/example', 
    label: 'English', 
    aria_label: 'Change language',
    code: 'en', 
    overlay: { 
      close_label: 'Close', 
      title: 'Select your language', 
      items: [ 
        { lang: 'bg', label: 'български', path: '/example#language_bg' }, 
        { lang: 'es', label: 'español', path: '/example#language_es', active: true }, 
        ... 
      ], 
    }, 
  },
  custom_action: { 
    href: '/notifications', 
    icon: 'bell', 
    label: 'Notifications', 
    aria_label: 'View notifications', 
    indicator: true, 
    overlay: { 
      title: 'Notifications', 
      close: { 
        label: 'Close' 
      }, 
      content: '<p>You have new notifications.</p>', 
    }, 
  }, 
  login_toggle: { 
    label_not_logged: 'Log in', 
    href_not_logged: '/example', 
    label_logged: 'Logged in', 
    href_logged: '/example', 
  }, 
  login_box: { 
    id: 'login-box-id', 
    description: 'Logged in as <last name>, <first name>', 
    label: 'Log out', 
    href: '/example', 
  }, 
  search_toggle: { 
    label: 'Search', 
    href: '#', 
  }, 
  search_form: { 
    text_input: { 
      id: 'input-search', 
      name: 'search', 
    }, 
    button: { 
      label: 'Search', 
    }, 
  }, 
  extra_classes: 'my-extra-class-1 my-extra-class-2', 
  extra_attributes: [ 
    { name: 'data-test', value: 'data-test-value' }, 
    { name: 'data-test-1', value: 'data-test-value-1' }, 
    ... 
  ], 
} %}