Advanced

PLCVisu CSS 编辑器 – 技术文档

PLCVisu CSS 编辑器 – 总体介绍

PLCVisu CSS 编辑器允许您使用标准 CSS 语法，为用户界面组件全局定义视觉样式规则。它是一个强大的工具，可用于自定义 SVG 元素、按钮、输出框、表格和其他 UI 控件的外观和行为——无需更改其逻辑或结构。

主要特性：

• 全局作用域：在 CSS 编辑器中定义的样式会应用于整个应用程序中所有匹配的元素。
• 标准 CSS 语法：支持常规 CSS 选择器（如 #id、.class、伪类 :hover 等）。
• 实时样式预览：保存后，前端会立即应用样式变化。
• 元素目标定位：可通过以下方式应用样式：
  • 使用 SVG 或控件元素的 id="..." 属性
  • 通过控件属性面板中的 “Class” 字段分配 class="..." 值

操作流程概览：

1. 打开 CSS 编辑器
   导航到：
   汉堡菜单 → CSS 编辑器

2. 定义样式规则
   使用任意有效的 CSS 规则（在支持的子集范围内）为控件和 SVG 设置样式。

3. 为控件分配类名
   对于 UI 控件（如按钮、输出框、表格），请分配一个 CSS 类名。进入 页面（Pages）编辑器，选择一个控件，右侧进入“控件属性”面板，向下滚动找到 “Class” 字段，在此处定义类名，以供稍后在 CSS 编辑器中引用。
   注意：区分大小写！

4. 保存并应用样式
   在 CSS 编辑器中点击 保存（Save）。刷新前端或页面以查看样式更改效果。

---

支持的 CSS 功能

CSS 功能	状态	说明
[code_block_5], [code_block_6]	✅ 支持	控制 SVG 元素颜色
[code_block_7]	✅ 支持	可使用 [code_block_8] 动画
[code_block_9]	✅ 支持	缩放效果流畅
[code_block_10]	✅ 支持	鼠标悬停或其他状态下可旋转
[code_block_11]	✅ 支持	元素可平移
[code_block_8]	✅ 支持	支持对 [code_block_13]、[code_block_5]、[code_block_6]、[code_block_7] 等属性进行动画处理
[code_block_17]	✅ 支持	鼠标悬停时可变成手形指针
[code_block_18]	✅ 支持	动态修改线条粗细
[code_block_19]	✅ 支持	支持虚线和动画过渡效果
[code_block_20]	✅ 支持	支持圆角线帽
:hover	✅ 支持	完全支持
[code_block_22]	✅ 支持	支持逻辑非选择器
多个选择器	✅ 支持	逗号分隔的选择器可同时生效

---

尚不支持的功能

CSS 功能	状态	说明
[code_block_23]	❌ 不支持	无任何显示效果
[code_block_24]	❌ 不支持	无法隐藏或显示元素
[code_block_25]	❌ 不支持	与元素交互无变化
[code_block_26]	❌ 不支持	无阴影效果，属性被忽略
[code_block_27]	❌ 不支持	模糊效果无效
[code_block_28] / [code_block_29]（圆角）	❌ 不支持	圆角不会被渲染出来

---

实用示例

示例：为 Basic Output 控件添加自定义样式

[code_block_30]

---

示例：为按钮控件添加样式

[code_block_31]

效果说明：

• 按钮为亮蓝色背景，白色文字。
• 鼠标悬停时稍微放大并变暗。
• 点击时进一步变暗并缩小。
• 按钮保持功能完整，可用于触发操作或跳转页面。

---

示例：为地图控件添加样式

[code_block_32]

---

SVG 示例

SVG 编辑的步骤说明

1. 准备一个 SVG 文件
   创建或下载一个含有 [code_block_33] 属性的 SVG 文件（例如：[code_block_34]）。

2. 上传 SVG
   路径：
   汉堡菜单 → 控件（Controls）→ 元素（Elements）→ + 添加

3. 插入到页面中
   路径：
   页面（Pages）→ 编辑器（Editor）→ 自定义元素（Custom Elements）
   将上传的 SVG 拖拽到页面布局中。

4. 使用 CSS 样式化 SVG
   打开 CSS 编辑器，输入以下样式：

1. 透明度与缩放示例

[code_block_35]

2. 旋转示例

[code_block_36]

---

3. 边框动画示例

[code_block_37]

---

⚠️ 限制：表格无法通过 CSS 类进行样式控制

PLCVisu 中的大部分控件可以使用 CSS 自定义外观，但表格控件（例如：基础表格、可编辑表格）无法通过外部 CSS 选择器作用于表格行、单元格或内部结构。

• 控件属性中的 “Class” 字段赋予的类名不会影响实际渲染的行或单元格。
• 类似 [code_block_38]、[code_block_39]、[code_block_40] 的选择器将无效。
• 其内部渲染机制可能基于封装组件、自定义渲染器或非标准 DOM 元素（例如 Canvas 或 Shadow DOM）。

目前，表格外观仅能通过控件配置中的内建样式选项进行控制。