css - 如何将组件属性值传递给该组件的 css/less clientlibs？ AEM 6.2

Question

我仍在学习 AEM 的变量范围和渲染顺序。我有一个小问题，我想从我的对话框中输入一个整数，并将该值设置为指定类的填充。

填充/padding.html:

<div class="my-padding">Pad me up!</div>

padding/clientlibs/padding.less

.my-padding {
    padding-top:    ${properties.top}px;
    padding-right:  ${properties.right}px;
    padding-bottom: ${properties.bottom}px;
    padding-left:   ${properties.left}px;
}

组件的 WCMUse 属性超出了 less 的范围，但我不知道实现此目的的最佳做法是什么。

我试过直接将 Javascript 注入(inject)到 less 中，但这不能正确编译，只能将函数转换为字符串。

padding-2.less

.my-padding-2{
      padding: `function(){return 10;}` px;
}

编译成这样:

客户端库.css

...
.my-padding-2{
      padding: function(){return 10;} px;
}
...

Answer 1

因此，没有将属性/变量传递给 CSS 的直接方法，您可以使用 JQUERY 来执行此操作，也就是说我不确定您为什么要给予作者更改组件设计的灵 active 。这既不是他们的职责，也不是应该如何实现 AEM 组件。

每个组件都遵循一个设计，如果您正在寻找一种方法来支持同一组件的不同设计，还有其他方法可以做到这一点，所有这些都需要您为每个配置使用不同的 CSS 类。完成后，您可以为作者提供预定义的组件设计选择以供选择。这可以通过两种方式完成 -

1. 就像 RichText 组件允许应用样式类一样，您可以通过为组件支持的不同样式提供下拉列表来为作者提供相同的行为。

2. 您可以使用通过为 View 提供选项来选择设计的概念(就像在 OOTB 列表组件中发生的那样)。每个选项都映射到一个组件脚本，该脚本具有针对特定设计的实现。