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.

Aligning or adjusting buttons in the ribbon-toolbar

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>

Attributes

NameDescription and UseType
afterOptional

The ribbon-flowgroup will be positioned after the UI component with this id.

string, valid UI element ID
availableOptional

When false the flowgroup will no longer be available in the toolbar. 

boolean
beforeOptional

The ribbon-flowgroup will be positioned before the UI component with this id.

string, valid UI element ID

Examples

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

Aligning or adjusting buttons in the ribbon-toolbar

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