欧共体 弹出部分

npm 软件包 : @ecl/popover

npm install --save @ecl/popover

参数:

• 编号 (字符串)(默认:随机) 流行乐独有的代号
• "切换" (对象) (默认: ) 切换 ECL 链接或 ECL 按钮结构后的元素
• "关闭" (对象)(默认:phosphor"x"图标) ECL 按钮结构后关闭按钮
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

块 :

• "内容"

示例

{% include '@ecl/popover/popover.html.twig' with { 
  id: 'popover-example',
  toggle: {
    link: {
      label: 'Popover',
      path: exampleLink,
      type: 'standalone',
      aria_label: 'Popover toggle',
      icon_position: 'before',
    },
    icon: {
      name: 'share-network',
      family: 'phosphor',
      size: 'fluid',
    },
  }, 
  close: { 
    label: "Close", 
    hide_label: true
  },
  links: [
    {
      link: {
        label: 'item 1',
        path: exampleLink,
        aria_label: 'Link to item 1',
      },
      icon: {
        name: 'globe',
        family: 'phosphor',
        size: 'fluid',
      },
    },
    {
      link: {
        label: 'item 2',
        path: exampleLink,
        aria_label: 'Link to item 2',
      },
      icon: {
        name: 'globe',
        family: 'phosphor',
        size: 'fluid',
      },
    },
    {
      link: {
        label: 'item 3',
        path: exampleLink,
        aria_label: 'Link to item 3',
      },
      icon: {
        name: 'globe',
        family: 'phosphor',
        size: 'fluid',
      },
    },
  ],
} %}