组件契约
code-block
带语言标签和内置复制按钮的代码块。
- 版本
- v1.0.0
Props
| 名称 | 类型 | 取值 | 默认值 |
|---|---|---|---|
| code | string | — | — |
| language | string | — | bash |
Token
- colors
- interactive.button.focus
- font
- primitive.font.family
无障碍
- native_element
- div (container) with an inner button for copy-to-clipboard
- keyboard
- ["Enter/Space activates the copy button (native)"]
- notes
- code content is text-only, no ARIA needed. The copy button uses a native <button> so screen readers announce it correctly. There is no live region — the 'copied' visual state (1.4s timeout) is not announced. Add an aria-live region if that becomes a real user need.
经过校验的原始 JSON
{
"name": "code-block",
"version": "1.0.0",
"props": {
"code": {
"type": "string"
},
"language": {
"type": "string",
"default": "bash"
}
},
"tokens_used": {
"font": [
"primitive.font.family"
],
"colors": [
"interactive.button.focus"
]
},
"a11y": {
"native_element": "div (container) with an inner button for copy-to-clipboard",
"keyboard": [
"Enter/Space activates the copy button (native)"
],
"notes": "code content is text-only, no ARIA needed. The copy button uses a native <button> so screen readers announce it correctly. There is no live region — the 'copied' visual state (1.4s timeout) is not announced. Add an aria-live region if that becomes a real user need."
}
}