如何將組件屬性值傳遞給該組件的css/less clientlib？ AEM 6.2

Question

我仍然在學習AEM的變量範圍和渲染順序。我有這個微不足道的問題，我想從我的對話框中取一個整數輸入，並將該值設置爲指定類的填充。

填充/ padding.html：

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

填充/ 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性質外少範圍，但我不知道最好的做法是完成這項工作。

我試過直接注入Javascript到少，但這不能正確編譯，只是將函數轉換爲字符串。

浸軋2.less

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

編譯成這樣：

客戶libs.css

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

Answer 1

因此存在通過屬性/變量CSS的沒有直接的方法，你可以使用JQUERY來做到這一點，但我不確定你爲什麼要給作者更改組件設計的靈活性。它既沒有做它的角色，也沒有如何實施AEM組件。

每個組件都遵循一個設計，如果您正在尋找一種方法來支持同一個組件的不同設計，還有其他方法可以做到這一點，所有這些都需要您爲每個配置設置不同的CSS類。完成之後，您可以爲作者提供預定義的組件設計選擇。這可以通過兩種方式來完成 -

1. 像富文本組件允許以應用樣式類，你可以提供相同的行爲，通過降低提供對丟棄了所支持的組件不同的風格來創作。

2. 您可以通過提供視圖選項（如發生在OOTB列表組件中）來使用選擇設計的概念。每個選項都映射到具有特定設計實現的組件腳本。