Using the UI Tabs Block

The UI Tabs Block

The UI Tabs block is a Pressino block designed to add content in separate tabs, each tab being it’s own content area.

  • Best used inside a UI Split or can be used at the top level
  • All names need a label
  • There are many formatting options to change how the tabs look

Getting Started

When a UI Tabs block is added there are no tabs by default. Use the “Add Tab” button to add a new tab, then give it a label. The Label is what shows in the tab on the top used the select tab content.

UI Tabs Options

Tabs Color: This will set the color of all the tabs. Other settings like inverted will affect how this is applied.

Tabs Inverted: When set, the tabs on the top of the content will be inverted black or the Tabs Color selected.

Tabs Panels Inverted: When set the content of each tab will be inverted black or the Tabs Color selected. When set, an additional option will appear called Panels Inverted Black. Using this option will make the content panel be inverted black instead of the Tabs Color

Tabs Body Padding: This sets the padding for each of the content areas.

Wide Label Padding: When set, the labels at the top of the tabs have more padding, making them larger and easier to click, but taking up more space.

Tab Icon Position: By default, when an icon used in each tab, it will be left of the text. This provides the option to be on the top. The icon becomes larger when moved to the top.

Advanced Options

Exclude the tabs: This option will hide the tabs on the top. This is a case where the content tabs will be changed using another (advanced) method to change tabs (for web development use).

Set name of tabs: This option is used in conjunction with the above option to name the group for use for web development use.

UI Tab Options

Tab Label (REQUIRED): This is the short text used in the label at the top of this tab.

Use Icon: When set, an option appears to select an icon. This icon will show on the left of the tab by default. Use the Tab Icon Position options in the parent UI Tabs block to make it move to the top.

Advanced Options

Set name of tab: This is used for web development use.