Clayステッカー
バッジには数字が表示され、ラベルには短い情報が表示されるのに対し、ステッカーはコンテンツ(通常はコンテンツタイプ)の小さな視覚的なインジケーターです。 小さなラベルやLiferayアイコンを含めることができ、円形と正方形の2つの形状があります。
ラベル付きの正方形のステッカー:
<clay:sticker label="JPG" />
アイコン付きの正方形のステッカー:
<clay:sticker icon="picture" />
円形のステッカー:
<clay:sticker label="JPG" shape="circle" />
ステッカーは、divの任意の隅に配置できます。 position
属性(top-left
、bottom-left
、top-right
、bottom-right
)で位置を示します。
<div class="aspect-ratio">
<img class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />
<clay:sticker displayType="danger" label="PDF" position="top-left" />
</div>
これで、アプリでClayステッカーを使用する方法がわかりました。