如何传递带有撇号 3 单位的架构值?

How Do I Pass A Schema Value With Units From Apostrophe 3?

提问人:iwanttobattle 提问时间:5/12/2023 更新时间:6/30/2023 访问量:21

问:

我想让用户能够在 ApostropheCMS 中自定义我的组件(小部件)上的边框半径。

我为此编写了以下模式:

borderRadiusValue: {
          label: 'Border Radius value',
          type: 'range',
          unit: 'px',
          min: 0,
          max: 50,
          step: 1,
          def: 0,
          if: {
            havingBorderRadius: true
          }
        },

我想在我的 html 中应用内联样式中的值,以便它看起来像这样borderRadiusValuestyle = "border-radius: {{widget.borderRadiusValue}} 0 0 {{widget.borderRadiusValue}}

但是,对于 50px,我只将样式应用为 .相反,我希望它是.ApostropheCMS有这个功能吗?我该如何实现这一点?borderRadiusValuestyle = "border-radius: 50 0 0 50style = "border-radius: 50px 0 0 50px

这是 A3 中范围字段的链接

前端 撇号-CMS 撇号

评论


答:

0赞 Tom Boutell 6/30/2023 #1

range字段具有数值,不带单位。因此,做你想做的事的最简单方法是:

style = "
  border-radius:
    {{widget.borderRadiusValue}}px
    0
    0
    {{widget.borderRadiusValue}}px
"

注意发出每个数字后的“px”。

评论

0赞 iwanttobattle 7/5/2023
是的,这就是我继续进行的实现。也许将来将单位自动添加到发出的值:D将是一个很酷的实现我们可以在 A3 github 上为此打开一个 PR 吗?
0赞 Tom Boutell 7/6/2023
我真的不推荐它,因为在模板的上下文中输出它更有意义(例如,输出此 CSS 的其余部分的位置)。从撇号的角度来看,它只是一个整数。将单位或 CSS 属性名称等内容移动到字段配置中实际上只是将模板的一部分移动到字段配置中,这将是模板的冗余实现。
0赞 Tom Boutell 7/6/2023
但是,如果您经常做这种事情,请查看调色板模块: apostrophecms.com/extensions/palette-3