Applying the Add Button Pattern

Clay’s add button pattern is for actions that add entities (for example a new blog entry button). It gives you a clean, minimal UI. You can use it in any of your app’s screens. Follow these steps to add a plus button to your app:

  1. Add the liferay-frontend taglib declaration to your portlet’s init.jsp:

    <%@ taglib uri="" prefix="liferay-frontend" %>
  2. Add an add-menu tag to your portlet’s view:

  3. Nest a <liferay-frontend:add-menu-item> tag for every menu item you have. Here’s an example of the add button pattern with a single item:

          title='<%= LanguageUtil.get(request,"titleName") %>' 
          url="<%= nameURL.toString() %>" 

    If there’s only one item, the plus icon acts as a button that triggers the item. If there’s multiple items, clicking the plus icon displays a menu containing them.

    Figure 1: The add button pattern consists of an add-menu tag and at least one add-menu-item tag.

    Figure 1: The add button pattern consists of an `add-menu` tag and at least one `add-menu-item` tag.

The module’s add menu is shown below:

  inline="<%= true %>"
    title='<%= LanguageUtil.get(resourceBundle, "add-device-family") %>'
    url="<%= addRuleGroupURL %>"

There you have it! Now you know how to use the add button pattern.

« Filtering and Sorting Items with the Management ToolbarConfiguring Your Admin App's Actions Menu »
Este artigo foi útil?
Utilizadores que acharam útil: 0 de 0