Liferay.Design / Lexicon-1
/
Get StartedNews
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Toolbar

Sign In

A toolbar is a set of actions related to a context grouped in a bar.

Usage

A toolbar is a generic bar that helps grouping actions in a way that they are visually organized for any context of use in Lexicon. Its height changes depending on the heigth of the elements it contains. The toolbat always maintais the vertical alignment.

You only need to define the number of blocks or containers that you want to have in your toolbar and place the elements inside it. These blocks or containers are of 2 different types:

  • Field: is used to make tight groups.
  • Content: is used to span as much as possible in the rest of the space. In case there are severral contents the available space is equally divided.

Layout

For a better understading of the previous sections, here are some example layouts:

Example 1: Three consecutive fields

toolbar layout example with three fields

Example 2: Three consecutive contents

toolbar layout example with three contents

Example 3: Field - Content - Field

toolbar layout example with field - content - field

Example 4: Field - Field - Content - Content

toolbar layout example with field - field - content - content

Something to improve? Report an issue!
Menu