ECL Spash 页面组件

npm 软件包 : @ecl/splash-page

npm install --save @ecl/splash-page

参数

• "论" (对象) (默认: ) 日志图像设置 :
  • "title" (字符串)(默认为:") Logo 标题属性
  • "alt" (字符串)(默认为:") Logo alt属性
  • "路径" (字符串)(默认:") Logo 链接 URL
  • "src desktop" (字符串)(默认为:") 桌面标志图像路径
  • "src mobile" (字符串)(默认:") 移动标志图像路径(仅欧盟)
• "标题" (字符串) (默认 : “ ” ) 页标题, 如“ 选择您的语言 ”
• “eu 分类” (字符串)(默认为:")欧盟语言组的标签
• “非eu 分类” (字符串)(默认为:")非欧盟语言组的标签
• “项目” (阵列) (默认: []) 欧盟语言项目; 格式:
  • "lang" (字符串)(默认:"') 语言代码,如"en","fr"
  • "label" (字符串)(默认为:"") 语言标签,如"English","Français"
  • "路径" (字符串)(默认为:") 语言 URL, 如"/例#语言 en"
  • "活性"(布尔)(默认:虚假) 是否为当前活动语言
• “非eu 项目” (阵列)(默认:[ ])非欧盟语言项目(结构与项目相同)
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例:

{% include '@ecl/splash-page/splash-page.html.twig' with { 
  logo: {
    alt: 'European Commission',
    path: exampleLink,
    src_desktop: '/logo-ec--en.svg',
    src_mobile: '/logo-ec--mute.svg',
  },
  title: 'Select your language',
  eu_category: 'Official EU languages:',
  non_eu_category: 'Other languages:',
  items: [
    { label: 'български', path: /example#language_bg, lang: 'bg' },
    { label: 'español', path: /example#language_es, lang: 'es' },
    ...
  ],
  non_eu_items: [
    { label: 'عَرَبِيّ', path: /example#language_ar, lang: 'ar' },
    ...
  ],
  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' }, 
    ... 
  ], 
} %}