ECL 动画数字组件

npm 软件包 : @ecl/animated-numbers

npm install --save @ecl/animated-numbers

参数

• 与 背景联系 (boolean) (默认: 假) 显示有色背景
• "满" "活" (boolean) (默认:虚假) 带背景的全宽显示( 网格内置)
• "反正颜色" (boolean) (默认:真实) 将颜色应用到对应值
• "边界" (boolean) (默认: 假) 显示每个项目的边框
• “ 来源 标签” (字符串)(默认为:")在全球源列表前显示标签
• "来源" (阵列) (默认: []) 全球源引用矩阵( ECL 链接对象或平面字符串)
  • "链接" (对象):ECL链接对象
    • “ 标签” (字符串)(默认: “ ” ) 链接标签
    • "路径" (字符串)(默认为:") 链接 URL 或者说
  • “ 名称”( 字符串)( 默认 : “ ”) 纯文本源
• “项目” (阵列) (默认:[]):格式:
  • “ 类别”( 字符串)( 默认: “ ”) 值以上的类别标签
  • "icon"(对象)(默认:-) ECL 图标对象
  • "前缀" (字符串)(默认:") 值前显示的文本
  • “ 前缀 标签” (字符串)(默认: “ ”) 前缀的屏幕阅读器文本
  • "值"(字符串)(默认为:") 要显示的主要数值
  • "后缀" (字符串)(默认:") 文本在数值后显示
  • "后缀 标签"(字符串)(默认:"") 后缀的屏幕阅读器文本
  • “描述” (字符串)(默认: “ ” ) 数值以下的描述
  • “ sources label” (字符串)(默认: “ ”) 标签在单个源列表之前显示; 如果不提供则使用全局源标签
  • "源" (阵列)(默认: []) 单个源引用矩阵( ECL 链接对象或平方字符串)
    • "链接" (对象):ECL链接对象
      • “ 标签” (字符串)(默认: “ ” ) 链接标签
      • "路径" (字符串)(默认为:") 链接 URL 或者说
    • “ 名称”( 字符串)( 默认 : “ ”) 纯文本源
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例:

{% include '@ecl/animated-numbers/animated-numbers.html.twig' with {
  counter_color: false,
  sources_label: 'Sources:',
  sources: [
    {
      link: {
        label: 'Eurostat',
        path: exampleLink,
      },
    },
    {
      link: {
        label: 'DG CNECT',
        path: exampleLink,
      },
    },
    {
      link: {
        label: 'Eurostat',
        path: exampleLink,
      },
    },
  ],
  items: [
    {
      category: 'Revenue',
      icon: {
        name: 'users',
        family: 'phosphor',
      },
      prefix: '',
      value: '213',
      suffix: '€',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    },
    {
      category: 'Revenue',
      icon: {
        name: 'suffix-eur',
        family: 'phosphor',
      },
      prefix: 'billion',
      value: '888.2',
      suffix: '€',
      description:
        'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    },
  ],
} %}