Umbraco网格布局自定义CSS类配置技术问询

开发背景与进展 #

我最近在基于Umbraco做网格布局数据类型的定制开发，核心目标是给每行/单元格加上自定义CSS类的配置选项，目前已经完成了基础功能的开发，后台UI里已经能看到对应的设置项并正常工作啦。

关键参数：modifier的取值影响 #

在配置过程中我发现，参数modifier的不同取值会直接影响后台设置项的UI表现。经过几次测试对比，当modifier设为{3}时，控件的布局和交互体验是最优的，推荐大家优先用这个值。

完整JSON配置示例 #

下面是我用到的配置片段，专门针对单元格添加了名为"Message Box"的复选框设置项：

[
  {
    "label": "Message Box",
    "description": "Message Box",
    "key": "class",
    "view": "checkbox",
    "modifier": "{3}",
    "applyTo": "cell",
    "config": {
      "items": {
        "key1": { "value": "value1" },
        "key2": { "value": "value2" },
        "key3": { "value": "value3" },
        "key4": {}
      }
    }
  }
]

配置细节说明 #

• applyTo: "cell"：指定这个设置项仅作用于网格的单元格，如果需要给行添加设置，把值改成"row"就行
• view: "checkbox"：设置项的UI控件类型为复选框，你也可以根据需求换成Umbraco支持的其他视图类型（比如下拉选择框）
• modifier: "{3}"：这个参数控制UI的渲染样式，实测{3}的布局最紧凑合理，其他取值会导致控件排列混乱或者显示不全
• config.items：这里定义了复选框的所有可选选项，每个键值对对应一个可勾选的CSS类选项

内容的提问来源于stack exchange，提问作者PEPEGA