Skip to content

Platform: Action Button Group Component Technical Design

kavya-b edited this page May 8, 2020 · 6 revisions

ActionButtonGroup

Summary

The ActionButtonGroup manages overflow of the action buttons within its content, as well as responsiveness. The ActionButtonGroup can contain any number of buttons. If the button count exceeds the maximum number of buttons allowed then the extra buttons will "overflow" into a dropdown menu. Additionally, if the screen size is reduced to a "small" screen size then all of the buttons will be contained in the "overflow" menu.

Example

<fdp-action-button-group [maxCount]="3" [compact]="true">
   <fdp-button>One</fdp-button>
   <fdp-button>Two</fdp-button>
   <fdp-button>Three</fdp-button>
   <fdp-button>Four</fdp-button>
</fdp-action-button-group>

Design

Property Bindings

maxCount: number

Maximum number of buttons before "overflow" feature is applied. Default: 3.

compact: boolean

Whether or not to display overflow button in compact mode.

Projected Content

The content of the ActionButtonGroup can contain any number of buttons.


i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

  • Each item can be supported with simply i18n marker
<fdp-button i18n="@@one">One</fdp-button>

Redesign Required: No


Clone this wiki locally