You can create a lot of components using the Liferay UI taglibs. Liferay DXP’s taglibs provide the following benefits to your markup:
- Consistent
- Responsive
- Accessible across your portlets
The full markup generated by the tags can be found in the JSPs of the tag’s folder in the Liferay Github Repo.
Now that you know the benefits of Liferay DXP’s tags, you can learn how to use them next.
Using Liferay UI Tags
A list of the available Liferay UI taglibs can be found here. To use the Liferay-UI taglib library in your apps, you must add the following declaration to your JSP:
<%@ taglib prefix="liferay-ui" uri="http://liferay.com/tld/ui" %>
The Liferay-UI taglib is also available via a macro for your FreeMarker theme and web content templates. Follow this syntax:
<@liferay_ui["tag-name"] attribute="string value" attribute=10 />
Now you’re good to go!
Each taglib has a list of attributes that can be passed to the tag. Some of these are required and some are optional. See the taglibdocs to view the requirements for each tag.
The example below uses the <liferay-ui:alert>
taglib to create a success alert
that the user can close:
<liferay-ui:alert
closeable="true"
icon="exclamation-full"
message="Here is our awesome alert example"
type="success"
/>
Here is an example implementation of a <liferay-ui:user-display>
taglib:
<liferay-ui:user-display
markupView="lexicon"
showUserDetails="true"
showUserName="true"
userId="<%= themeDisplay.getRealUserId() %>"
userName="<%= themeDisplay.getRealUser().getFullName() %>"
/>
Now you know how to use Liferay-UI taglibs in your JSPs!