Pages
自定义元素（Custom Element）
什么是自定义元素？
Custom Element（自定义元素） 提供了极高的灵活性，允许你在可视化界面中嵌入任意 SVG 图像。你可以将它用作装饰性视觉元素，也可以作为其他界面控件的动态背景。它的多样性使其非常适合用于提升用户界面的设计感和视觉效果。
自定义元素可用于：
- 添加动态视觉装饰，增强设计风格
- 作为卡片或其他 UI 元素的背景使用
- 集成 SVG 动画，实现生动的视觉交互效果
- 通过 SVG 图形提升整体界面美感
你可以通过自定义 SVG 内容或直接在 SVG 中添加动画效果来调整其外观和行为。
自定义元素的应用场景概览
| 应用场景 | 描述 | 示例用途 |
|---|---|---|
| 自定义背景 | 用作其他 UI 组件的背景，提供美观的视觉衬托 | 用作仪表板中卡片的背景 |
| 视觉装饰 | 作为界面中的高亮或强调元素，提升样式或突出特定内容 | 用装饰性 SVG 突出按钮或图标 |
| 动态动画 | 集成动画 SVG，实现界面中的动态效果或交互 | 动画风扇或旋转齿轮图标 |
| 界面美学增强 | 通过使用 SVG 图形改善界面整体外观 | 添加边框、背景图案或交互装饰元素 |
自定义背景（Custom Background）
一种灵活的 SVG 背景图形，可用于为卡片、按钮或其他容器增加视觉层次感。
- 使用场景：为卡片或界面某一区域添加独特的背景效果
- 典型目标：卡片组件、容器、页面分区等
需要嵌入 SVG，并根据 UI 元素布局进行适配调整。
视觉装饰（Visual Accent）
一种装饰性 SVG 元素，可用于突出显示特定内容或区域。
- 使用场景：为按钮、图标或标题添加视觉重点或修饰
- 示例：在按钮上放置旋转的 SVG 图标吸引用户注意
推荐用于在不引入复杂交互的前提下改善界面外观。
动态动画（Dynamic Animations）
Custom Element 支持集成 SVG 动画，非常适合用于添加运动感或交互反馈。
- 使用场景：动画显示齿轮、风扇或图标，表示某个过程或系统正在运行
- 示例：使用动画风扇叶图标来提示系统处于运行状态
适用于需要视觉反馈或希望增加界面趣味性的场景。
界面美学增强（Aesthetic Enhancement）
一种装饰性 SVG 图形，用于提升界面的整体美感，可作为边框、背景或其他图形元素使用。
- 使用场景：为内容区域添加装饰边框或背景图案
- 示例：使用复杂 SVG 图形图案增强页面结构或标题样式
适合想要以最小设计成本提升专业外观的 UI 项目。
总结
Custom Element（自定义元素） 是一个极其灵活的组件，可帮助你提升 UI 的视觉表现力。无论你用于背景、装饰、动画还是整体美化，它都能根据你的设计需求进行定制。
| 应用场景 | 适合目标 | 说明 |
|---|---|---|
| 自定义背景 | 卡片或容器的视觉背景 | 灵活可调，适配性强 |
| 视觉装饰 | 突出界面元素或增加风格感 | 设计轻巧，视觉效果明显 |
| 动态动画 | 实现交互性动画 SVG | 增加动效和用户反馈 |
| 界面美学增强 | 提升整体界面外观 | 利用 SVG 图形丰富视觉层次 |