Creating Layouts inside Custom Portlets

Page layout tags let you create layouts using Bootstrap 3 within your portlets.

This tutorial explains the <aui:*> tags that developers can use to create layouts.

AUI Container

The <aui:container> tag creates a container <div> tag to wrap <aui:row> components and offer additional styling.

It supports the following attributes:

AttributeTypeDescription
cssClassStringA CSS class for styling the component
dynamicAttributesMap<String, Object>Map of data- attributes for your container
fluidbooleanWhether to enable the container to span the entire width of the viewport. The default value is true
idStringAn ID for the component instance

AUI Row

The <aui:row> tag creates a row to hold <aui:col> components.

It supports the following attributes:

AttributeTypeDescription
cssClassStringA CSS class for styling the component
idStringAn ID for the component instance

AUI Col

The <aui:col> tag creates a column to display content in an <aui:row> component.

It supports the following attributes:

AttributeTypeDescription

Example JSP

Below is an example layout created in a portlet:

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

<aui:container cssClass='super-awesome-container'>
        <aui:row>
                <aui:col md="4" sm="6">
                        <h2>Some fun content using the 'md' and 'sm' attributes</h2>
                </aui:col>

                <aui:col md="8" sm="6">
                        <p>
                                Some text here.
                        </p>
                </aui:col>
        </aui:row>

        <aui:row>
                <aui:col width="<%= 40 %>">
                        <h2>Some fun content using the 'width' attribute</h2>
                </aui:col>

                <aui:col width="<%= 60 %>">
                        <p>
                                Cool text here.
                        </p>
                </aui:col>
        </aui:row>

        <aui:row>
                <aui:col span="<%= 4 %>">
                        <h2>Some fun content using the 'span' attribute</h2>
                </aui:col>

                <aui:col span="<%= 8 %>">
                        <p>
                                Nice text here.
                        </p>
                </aui:col>
        </aui:row>
</aui:container>

Now you know how to create layouts inside your portlets!

Layout Templates with the Liferay Theme Generator

« Automatic Single Page ApplicationsUsing JavaScript in Your Portlets »
Este artigo foi útil?
Utilizadores que acharam útil: 0 de 0