# Europa Component Library 设计系统

## Europa Component Library 设计系统界面预览

逐条打开注释、展开或关闭全部内容，并查看完整阅读布局。

## Europa Component Library 设计系统设计参考

已核实 @ecl/preset-ec 4.11.2 样式表与手风琴组件源码。明确区分原生行为与原始的批量控制组合方式。

### EC 配色与状态角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --ecl-color-primary | #3860ed | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-primary-140 | #0f2fa2 | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-secondary | #ffbe5c | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-dark | #26324b | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-info | #3860ed | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-success | #24a148 | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-error | #da1e28 | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-warning | #f39811 | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-background | #fcfcfc | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-branding | #004494 | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-neutral-20 | #f8f9fd | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-neutral-60 | #e0e5f5 | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
| --ecl-color-white | #fff | 已发布的 EC 预设值。品牌蓝与主要操作色有所区分；状态颜色不能替代文字说明。 |
### 间距比例

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --ecl-spacing-2xs | 0.25rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-xs | 0.5rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-s | 0.75rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-m | 1rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-l | 1.25rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-xl | 1.5rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-2xl | 2rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-3xl | 2.5rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-4xl | 3rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-5xl | 3.5rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
| --ecl-spacing-6xl | 4rem | 固定版本预设中的实际 rem 间距比例。自定义组合会使用这些角色，不会另造一套机构间距比例。 |
### 字体排印与阅读宽度

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --ecl-font-family-default | arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
| --ecl-max-width | 80ch | 完整简写值包含字重、字号、行高和回退字体。此处 EC 界面的字体系列为 Arial；无需使用自定义网页字体。 |
### 原生手风琴组件约定

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | 在此组件内进行初始化；无需框架封装。 |
| Trigger | data-ecl-accordion-toggle | 原生监听器会绑定到每个标题按钮。 |
| Target | aria-controls matches a panel ID | 目标不存在时会报错；每个 ID 都必须唯一。 |
| Open state | aria-expanded + panel.hidden | 运行时会同时更改语义和可见内容。 |
| Event | root.ECLAccordion.on("onToggle", callback) | 此示例会在原生切换操作后计算已展开的分区数量。 |
| Event payload | { item, isOpening } | 该条目是目标面板，不是数组索引或选中的标签页。 |
| Independent panels | Several may be open together | 全部展开是原始应用行为，通过触发原生按钮实现。 |
## Europa Component Library 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Europa Component Library 设计系统：Europa EC 预设与版本选择

### 导入资源前，先选择 EC 或 EU

> Europa 提供彼此独立的机构预设。此示例有意使用 4.11.2 版 @ecl/preset-ec，与链接中的 EC 文档相对应。它不会混用 EU 标记、旧版 EC 截图和未固定版本的样式表。该软件包提供 dist/styles/ecl-ec.css 和 dist/scripts/ecl-ec.js，因此无需引入前端框架即可提供此静态示例。

- 此处展示的 EC 实现应使用 EC 预设。

- CSS 与 JavaScript 应使用相同版本。

- 重复使用手风琴条目时，确保源 ID 唯一。

### 将其视为有版本约束的实现

此参考针对 4.11.2 版，并不表示所有后续版本的令牌或行为都相同。升级时应一并比较所选预设、组件标记和初始化方式。仅仅更换软件包名称或版本号，并不能证明先前复制的模式仍能正常工作。

## Europa Component Library 设计系统：Europa 配色角色与机构标识

### 将品牌色与主要操作色区分开

该预设的品牌色为 #004494，主要颜色为 #3860ed。原始说明仅将品牌色用于窄窄的顶部色条，其余部分则采用组件自身的主要操作样式。Neutral-20 用作页面背景，Neutral-60 用于区分内容。这样可以保留机构强调色与交互控件颜色之间的区别。

### 不要为示例虚构官方含义

此页面是OpenDesign研究示例，包含虚构的咨询说明。它不含欧盟委员会标志，也不代表任何资助征集、服务或法律要求。配色表列出了实际的错误、警告和成功令牌，但预览不会为了展示所有颜色而虚构应用成功消息。

## Europa Component Library 设计系统：Europa 字体与间距比例

### 使用完整的字体简写值

EC 预设将 Arial 设为默认屏幕字体。其 m 角色的字重为 400，字号为 1rem，行高为 1.5rem；更大的角色也各自带有行高。此参考列出的是完整声明，而非孤立的字号。研究示例中的标题字重是基于预设角色做出的自定义强调选择，组件文本仍由原生样式表控制。

### 明确展示 rem 间距与内容宽度

间距序列包括 0.25、0.5、0.75、1、1.25、1.5、2、2.5、3、3.5 和 4rem。原生最大阅读宽度为 80ch。原始布局采用居中的 1080px 外边界和响应式内边距，而每个手风琴组件仍使用预设自身的间距。外部宽度是布局组合方式的选择，并非新增的官方令牌。

## Europa Component Library 设计系统：Europa 手风琴组件标记与原生行为

### 让标题按钮控制实际面板

每个 .ecl-accordion__item 都包含一个带有 .ecl-accordion__toggle 按钮的标题。按钮的 aria-controls 指向对应的 .ecl-accordion__content 面板。此示例为每个区域设置了稳定的触发器 ID 和 aria-labelledby。原生脚本会根据 ID 查找目标、更改 aria-expanded 并修改 panel.hidden；重新排序或复制条目时，必须确保这些关联仍然正确。

### 使用明确的指示图标，无需外部精灵图

此示例在原生 toggle-indicator 类中提供了简单的自定义内联加号和减号 SVG 路径。预设会控制展开状态下显示哪一个图标。这些是原创的简单图形，并非复制的机构标志。这样既能让示例完全自包含，也能避免跨源加载精灵图，同时保留组件的结构。

## Europa Component Library 设计系统：Europa 手风琴组件事件与全部展开行为

### 从原生组件获取状态

ECL.autoInit() 会将已初始化的组件公开为 root.ECLAccordion。应用会监听该组件的 onToggle 事件，并计算当前 aria-expanded="true" 的触发按钮数量。事件负载包含目标条目和 isOpening，可用于处理单个面板。计数不会根据可见文本猜测状态，也不会另外维护一组独立的展开状态数组。

### 确保批量操作行为可预测

当所有面板均已展开时，批量操作会将它们全部关闭；否则会全部展开。处理程序只会触发那些状态需要更改的原生按钮。它不会自行设置 hidden 或 aria-expanded，因此原生事件和派生计数始终保持一致。控件标签会在“展开所有章节”和“关闭所有章节”之间切换，以说明下一步操作。

## Europa Component Library 设计系统 Europa 键盘操作与渐进式阅读

### 使用原生按钮交互

按 Tab 键可移至标题按钮，按 Enter 或空格键即可通过浏览器原生按钮行为激活它。这是手风琴组件，不是标签列表：不应类比添加方向键导航。多个面板可以同时保持展开，方便对照阅读说明。焦点指示器由组件样式表提供，在浅色界面表面上仍清晰可见。

### 即使禁用 JavaScript，也要确保文本可读

源代码中的 HTML 默认显示所有面板，并将 aria-expanded="true" 设为初始值。原生初始化成功后，应用会通过触发按钮将面板折叠。禁用 JavaScript 时，文本因此仍然可见，而未启用 JavaScript 时，非活动的批量工具栏会由 no-js 样式隐藏。此回退效果经过实际可见性测试，而非仅确认段落存在于源代码中。

## Europa Component Library 设计系统 Europa 响应式面板与长内容

### 采用自然高度和自动换行

文档未为手风琴组件设置固定高度。展开后的说明可以自然延展，以容纳标题、有序列表和突出显示的决策说明。在较小屏幕上，原有外边距会缩小，标题则采用较小的预设字体样式。较长的触发器文本会自动换行，同时指示器仍清晰可见。已在 280px 宽度以及桌面、平板和手机视口下进行检查。

### 不要将阅读控件变成审批流程

展开或关闭面板只会改变呈现方式。计数表示已展开的章节数，而非已完成的章节数或已满足的要求。页脚明确说明，用户不会提交咨询反馈或正式审批申请。真实服务需要自行实现资格判定、持久化和后端行为；组件演示并未暗示具备这些功能。

## Europa Component Library 设计系统 Europa 完整静态配置

### 安装匹配的预设，并保存所有文件

提供的 index.html 会先加载固定版本的预设样式表和浏览器脚本，再加载 ecl-app.js。将随附的 ecl.css 和 ecl-app.js 保存在同一目录下，并通过 HTTP 提供该目录。所有内容、指示器 SVG 和状态处理程序均已包含在内。本示例无需隐藏的应用脚手架或单独下载图标。

1. 安装固定版本的 EC 预设。

2. 将 index.html、ecl.css 和 ecl-app.js 保存在同一目录下。

3. 通过服务器提供该目录，并测试单个面板和批量切换。

4. 使用键盘、窄视口以及禁用 JavaScript 的状态重复测试。

### 确保组件升级便于审查

升级后，检查触发器与面板的 ID 对应关系、初始化、onToggle 监听器、批量状态以及禁用 JavaScript 时的视图。然后检查实际字体、颜色和窄屏布局。成功安装软件包并显示标题，并不足以证明完整的可展开内容仍能正常工作。

## Europa Component Library 设计系统 组件示例

### ecl-index.html — 完整源文件

完整的组件标记、内容、内联指示器和预设资源路径。

```
<!doctype html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Public conversation brief</title><link rel="stylesheet" href="./node_modules/@ecl/preset-ec/dist/styles/ecl-ec.css"><link rel="stylesheet" href="./ecl.css"></head><body><main><header class="mast"><p class="eyebrow">European Commission preset / original study</p><h1>A clear brief for a public conversation</h1><p>Explore three preparation notes with native ECL expandable sections and an explicit open-all control.</p></header><p class="scope">ECL EC 4.11.2 CSS and native Accordion runtime. Original OpenDesign sample text; this is not an EU service, funding programme or legal guide.</p><div class="toolbar"><p id="count" role="status">0 of 3 sections open</p><button id="all" type="button" class="ecl-button ecl-button--secondary">Open all sections</button></div><div class="ecl-accordion" data-ecl-accordion data-ecl-auto-init="Accordion"><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="purpose" aria-expanded="true" id="toggle-purpose" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Define the purpose before collecting information</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="purpose" role="region" aria-labelledby="toggle-purpose"><p>This fictional planning note describes a small community consultation. It is sample editorial content, not an EU funding call, legal requirement or official application process.</p><h3>Make a decision possible</h3><ol><li>State which decision the conversation will inform.</li><li>List information already available before asking participants for more.</li><li>Name what remains outside the consultation.</li></ol><aside class="decision"><h3>Keep the outcome proportionate</h3><p>A short conversation may support a next step; it does not by itself prove consent, eligibility or public support.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="participation" aria-expanded="true" id="toggle-participation" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Make participation understandable and accessible</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="participation" role="region" aria-labelledby="toggle-participation"><p>Give participants enough context to decide whether and how to take part. The invitation should explain the topic, expected duration, available formats and the use of any notes.</p><h3>Provide usable alternatives</h3><ol><li>Offer a plain-language explanation of the activity.</li><li>Allow a person to contribute without speaking to the whole group.</li><li>Explain how to ask for an accessible format.</li></ol><aside class="decision"><h3>Check the invitation itself</h3><p>A technically accessible page is only one part of participation. Timing, language and the route for asking a question also affect who can join.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="record" aria-expanded="true" id="toggle-record" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Record decisions and unresolved questions separately</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="record" role="region" aria-labelledby="toggle-record"><p>After the session, distinguish what was agreed from what still needs investigation. A clean record helps the next reader understand how a proposal changed and why.</p><h3>Prepare a readable follow-up</h3><ol><li>Write the next action with an owner and review date.</li><li>Make open questions visible alongside conclusions.</li><li>Invite participants to correct an inaccurate summary.</li></ol><aside class="decision"><h3>Avoid a false completion signal</h3><p>Closing these panels is a reading action only. This preview sends no consultation response and records no formal approval.</p></aside></div></section></div><p class="footer">Each heading is a native button. Use Tab to move between headings and Enter or Space to toggle; several sections can remain open. Without JavaScript the notes remain readable.</p></main><script src="./node_modules/@ecl/preset-ec/dist/scripts/ecl-ec.js"></script><script src="./ecl-app.js"></script></body></html>
```

代码参考

- 将 HTML 文件另存为 index.html，并保持其他随附文件的文件名不变。

### ecl.css — 完整源文件

在 ECL 原生组件样式基础上的原始响应式布局。

```
*{box-sizing:border-box}body{margin:0;background:var(--ecl-color-neutral-20);font:var(--ecl-font-m);color:var(--ecl-color-dark)}main{max-width:1080px;margin:auto;padding:40px}.mast{border-top:6px solid var(--ecl-color-branding);padding:32px;background:white}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ecl-color-primary-140)}h1{font:var(--ecl-font-3xl);font-weight:700;margin:16px 0;max-width:22ch}.mast p{max-width:72ch}.scope{font:var(--ecl-font-s);margin:24px 0;max-width:90ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:32px 0 16px}.toolbar p{margin:0}.ecl-accordion{background:white}.ecl-accordion__toggle-title{padding-right:16px}.ecl-accordion__toggle-icon{width:24px;height:24px}.ecl-accordion__content p:first-child{margin-top:0}.ecl-accordion__content ol,.ecl-accordion__content ul{padding-left:24px}.ecl-accordion__content li{margin:8px 0}.ecl-accordion__content h3{font-size:18px;line-height:1.4}.decision{border-left:4px solid var(--ecl-color-secondary);padding:16px;background:var(--ecl-color-neutral-20);margin:24px 0}.footer{font:var(--ecl-font-s);margin-top:24px;border-top:1px solid var(--ecl-color-neutral-60);padding-top:24px}.no-js .toolbar{display:none}@media(max-width:600px){main{padding:16px}.mast{padding:24px}h1{font:var(--ecl-font-2xl);font-weight:700}.ecl-accordion__toggle{overflow-wrap:anywhere}}
```

代码参考

- 将 HTML 文件另存为 index.html，并保持其他随附文件的文件名不变。

### ecl-app.js — 完整源文件

原生初始化与事件驱动的批量操作，并确保未启用 HTML 时内容仍可阅读。

```
document.documentElement.classList.remove('no-js');ECL.autoInit();const root=document.querySelector('[data-ecl-accordion]');const buttons=[...root.querySelectorAll('[data-ecl-accordion-toggle]')];const all=document.querySelector('#all');function sync(){let open=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').length;document.querySelector('#count').textContent=open+' of '+buttons.length+' sections open';all.textContent=open===buttons.length?'Close all sections':'Open all sections';}root.ECLAccordion.on('onToggle',sync);buttons.forEach(b=>b.click());all.addEventListener('click',()=>{let close=buttons.every(b=>b.getAttribute('aria-expanded')==='true');buttons.filter(b=>(b.getAttribute('aria-expanded')==='true')===close).forEach(b=>b.click());});sync();
```

代码参考

- 将 HTML 文件另存为 index.html，并保持其他随附文件的文件名不变。

## Europa Component Library 设计系统 Agent 配置

### 实现起点

打开 http://localhost:8000/。此示例使用 EC 预设，无需额外下载图标或字体。

```
npm init -y
npm install @ecl/preset-ec@4.11.2
# Save index.html, ecl.css and ecl-app.js from the supplied examples.
python3 -m http.server 8000
```

### 适用于你项目的提示词

```
使用提供的三个完整文件，实现 ECL EC 4.11.2 手风琴组件说明。保留原生触发器与面板的关联关系、由 onToggle 驱动的计数、批量展开/关闭语义、按钮的键盘操作、未启用 JavaScript 时的阅读体验，以及原始示例的明确适用范围。不得暗示这是欧盟官方服务或正式提交流程。
```

## Europa Component Library 设计系统 来源与适用范围

ECL EC 4.11.2 的 OpenDesign 应用指南。原始示例说明和页面布局并不代表欧盟委员会服务、资助项目或法律要求。

- EC 入门指南 预设资源与实现配置。

- 手风琴组件指南 组件背景说明与使用参考。

- 颜色角色 主色、品牌色、中性色和状态色调色板。

- 固定版本的预设样式表 此示例使用的确切取值。

## Europa Component Library 设计系统 相关资源

### gov.cz 设计系统

通过包含六项资源的完整阅读工具包，探索 Gov Design System CE 的实际颜色角色、卡片插槽和原生分页，并明确呈现焦点和页面状态。

### GOV.UK 设计系统

使用当前 v6 字号比例、响应式间距、功能色彩、关联校验和具体的 Frontend 集成，构建 GOV.UK 风格的问题填写与答案检查流程。

### HarvardSites 设计系统

了解 HarvardSites 如何作为编辑出版平台使用：比较不同的网站风格，选择有文档说明的字体组合，并通过专为特定用途设计的内容组件构建大学页面。


- [实现参考](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/)
- [来源](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/)
- [来源](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/)
- [来源](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/)
- [来源](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js)
- [代码参考](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/)
- [EC 入门指南 预设资源与实现配置。](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/)
- [手风琴组件指南 组件背景说明与使用参考。](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/)
- [颜色角色 主色、品牌色、中性色和状态色调色板。](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/)
- [固定版本的预设样式表 此示例使用的确切取值。](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)
