Platform: Segmented Button Component Technical Design - SAP/fundamental-ngx GitHub Wiki
The Segmented component designates a group of buttons to be displayed together as continuous block of elements.
<fdp-segmented-button [label]="'Group Label'">
<fdp-button>Button A</fdp-button>
<fdp-button>Button B</fdp-button>
<fdp-button>Button C</fdp-button>
</fdp-segmented-button>
Aria-label for button group.
<div class="fd-button-group" role="group" [attr.aria-label]="{{label}}">
<ng-content></ng-content>
</div>
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: No
-
fdp-segmented-button
'slabel
attribute can be supported withi18n-label
and string binding withlabel="<custom-label>"
:
<fdp-segmented-button i18n-label="@@groupLabel" label="Group Label">
<fdp-button i18n="@@buttonA">Button A</fdp-button>
<fdp-button i18n="@@buttonB">Button B</fdp-button>
<fdp-button i18n="@@buttonC">Button C</fdp-button>
</fdp-segmented-button>
Redesign Required: No
We may be able to use the Fundamental NGX:Core implementation of Segmented Button, but we may need to check whether the Core version works with our Platform Button.
- We have a segmented button type in Fiori3. But no action button group and button group.
I've changed the name from "Button Group" to "Segmented Button" to match Fiori 3 and Core naming
In design we have:
- ActionButtonGroup.
- Button group. which one we have to consider while developing it.
They are separate components. "Button Group/Segmented Button" is a Fiori specified design for grouping buttons together. "Action Button Group" is an internal Fundamental-NGX platform component - it is meant to add the action button overflow behavior to a group of buttons.
In several of our composite components, like Shell Bar and Action Bar, we have the requirement to handle button overflow - i.e. when the page is small enough, the action buttons collapse into an overflow menu. Instead of handling this requirement separately for each component, we can define an "Action Button Group" component to handle this behavior, and use it within the composite components.