Using the Clay Taglib in Your portlets

The Liferay Clay tag library provides a set of tags for creating Clay UI components in your app.

To use the Clay taglib in your apps, add the following declaration to your JSP:

<%@ taglib prefix="clay" uri="http://liferay.com/tld/clay" %>

The Liferay Clay taglib is also available via a macro for your FreeMarker theme templates and web content templates. Follow this syntax:

<@clay["tag-name"] attribute="string value" attribute=10 />

Clay taglibs provide the following UI components for your apps:

The tutorials in this section cover how to create these components with the Clay taglibs. Each tutorial contains a set of clay component examples along with a screenshot of the resulting UI.

Clay Alerts

Clay alerts come in two types: embedded and stripe. This tutorial covers both types and provides several examples of each. Embedded Alerts Embedded alerts are usually used inside forms. The element...

Read More

Clay Badges

Badges help highlight important information such as notifications or new and unread messages. Badges have circular borders and are only used to specify a number. This tutorial covers the different...

Read More

Clay Buttons

Buttons come in several types and variations. This tutorial covers the different styles and variations of buttons you can create with the Clay taglibs. Types Primary button: Used for the most...

Read More

Clay Cards

Cards visually represent data. Use them for images, document libraries, user profiles and more. There are four main types of Cards: Image Cards File Cards User Cards Horizontal Cards Each of these...

Read More

Clay Dropdown Menus and Action Menus

You can add dropdown menus to your app via the clay:dropdown-menu and clay:actions-menu taglibs. The Clay taglibs provide several menu variations for you to choose. Both taglibs with several...

Read More

Clay Form Elements

The Liferay Clay tag library provides several tags for creating form elements. An example of each tag is shown below. Checkbox Checkboxes give the user a true or false input. Read More

Clay Icons

The Liferay Clay taglibs provide several icons that you can use in your apps. Use the clay:icon tag and specify the icon with the symbol attribute: Figure 1: You can...

Read More

Clay Labels and Links

Liferay Clay taglibs provide tags for creating labels and links in your app. This tutorial shows how to add both of these UI elements to your apps. Labels The Liferay Clay taglibs provide a few...

Read More

Clay Management Toolbar

The Management Toolbar gives administrators control over search container results in their apps. It lets you filter, sort, and choose a view type for search results, so you can quickly identify the...

Read More

Clay Navigation Bars

Similar to dropdown menus, navigation bars display a list of navigation items. The key difference is navigation bars are displayed in a horizontal bar with all navigation items visible at all...

Read More

Clay Progress Bars

You can add progress bars to your app with the clay:progressbar tag. These indicate the completion percentage of a task and come in three status styles: default (blue), warning (red), and complete...

Read More

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...

Read More
0 (0 Votes)
Liferay Front-end Management Bar Previous