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
|
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