如何在Apostrophe CMS调色板中为文字阴影/盒阴影单独设置颜色

不用纠结在单个字段上做妥协，直接拆成两个字段就能完美解决你的问题：

• 第一个字段设为<color>类型：专门给用户用取色器选颜色，完全满足可视化选色的需求。
• 第二个字段设为<string>类型：用来放2px 2px这类需要自定义的参数，用户可以直接编辑修改，想改成3px 5px或者其他值都没问题。

之后在业务代码里把这两个字段的值拼起来就行——比如你要生成阴影样式，就把颜色值和字符串参数拼接成${color} ${params}，最终得到类似#ff4400 2px 2px的完整值。

进阶方案：自定义混合组件 #

如果不想拆字段，也可以自己写个自定义输入组件：

• 组件里放个取色器和文本输入框，取色器选的颜色自动填充到组件的颜色段，文本框让用户改后面的参数。
• 组件要支持双向绑定：既有完整值输入时，能自动拆分颜色和参数部分，分别对应到取色器和输入框；用户修改任意部分时，自动拼接成完整值输出。

这种方案体验更连贯，不过需要额外开发组件，适合对UI体验要求高的场景。

不管哪种方案，都能同时满足取色器选色和自定义字符串参数的需求，再也不用在两者之间做妥协了。

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