Clay Stickers

Whereas badges display numbers and labels display short information, stickers are small visual indicators of the content (usually the content type). They can include a small label or a Liferay icon, and they come in two shapes: circle and square.

Square sticker with label:

<clay:sticker label="JPG" />

Figure 1: You can include stickers in your apps.

Figure 1: You can include stickers in your apps.

Square sticker with icon:

<clay:sticker icon="picture" />

Figure 2: Stickers can include icons.

Figure 2: Stickers can include icons.

Circle sticker:

<clay:sticker label="JPG" shape="circle" />

Figure 3: You can also have circle stickers.

Figure 3: You can also have circle stickers.

Stickers can be positioned in any corner of a div. Indicate their position with the position attribute: top-left, bottom-left, top-right, or bottom-right:

<div class="aspect-ratio">

	<img class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />

	<clay:sticker label="PDF" position="top-left" style="danger" />
</div>

Figure 4: You can specify the position of the sticker within a container.

Figure 4: You can specify the position of the sticker within a container.

Now you know how to use Clay stickers in your app!

« Clay Progress BarsUsing the Chart Taglib in Your Portlets »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています