Documentation Center

ribbon-flowgroup

The ribbon-flowgroup element is a UI element that can be used to align groups of buttons in the ribbon-toolbar UI.

Description

You can configure your UI in many ways including custom button groups with different size buttons. In order to ensure good alignment then you can organize the buttons into sub-groups, sorted by size. You use the ribbon-flowgroup element to organize these sub-groups.

Attributes

none

History

VersionEvent
SDL LiveContent Create 5.1Introduction

Example

You can find the complete set of examples for configuring the ribbon-toolbar in the topic for the overlay element.

You may need to organize group of buttons in a ribbon-group element into smaller groups depending on their size. You can align and adjust the presentation of different size buttons using the ribbon-flowgroup element.

<ribbon-group id="TestCustomIconGroup" label="Testing Custom Icons" after="ViewGroup">
  <ribbon-flowgroup>
    <ribbon-smallbutton role="unorderedlist" label="Button 1" />
    <ribbon-normalbutton role="unorderedlist" label="Button 2" />
    <ribbon-normalbuttondropdown role="unorderedlist" label="Button 3" />
  </ribbon-flowgroup>
  <ribbon-flowgroup>
    <ribbon-bigbutton role="unorderedlist" label="Button 4" />
  </ribbon-flowgroup>
</ribbon-group>

Parent Element

ribbon-group