button-group
Overview
button-group
allows for grouping of multiple button
components, providing better control over layout and visibility.
Version Compatibility
button-group
v3 with support for floating action buttons were introduced in version 4.70.0 of the JourneyApps Runtime.
For more information on button
, please see the linked documentation:
Basic Example
Standard Attributes
None
Advanced Attributes
align-content
align-content
Specify the alignment of button content for all buttons in the button-group
. See more info about align-content
:
button-order
button-order
Version compatibility
button-order
was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: left-to-right
|right-to-left
Default: left-to-right
Specify the order of buttons when the button-group
mode
is set to row
.
color
color
Optional
Type: string
- can be a named color or #HEX value
Default: unset
Specify the color
for all buttons in the button-group
.
disabled
disabled
Optional
Type: boolean
Default: false
Disables all buttons in the button-group
to prevent a user from firing their actions.
Example: Disabled buttons
id
id
icon
icon
Optional
Type: string
Default: unset
This attribute is only available with type="floating".
The icon of the main button when using a floating action button group.
icon-color
icon-color
Optional
Type: string
- can be a named color or #HEX value
Default: unset
Specify the icon-color
for all buttons in the button-group
.
icon-position
icon-position
Specify the position of button icons for all buttons in the button-group
. See more info about icon-position
:
label-case
label-case
Configure the letter case of the label
for all buttons in the button-group
. See more info about label-case
:
min-width-breakpoint
min-width-breakpoint
Optional
Type: integer
Default: 550 px
Version compatibility
min-width-breakpoint
was introduced in version 4.84.1 of the JourneyApps Runtime.
Override at what point button-group
changes from a row (aligned horizontally) into a column (aligned vertically) layout. The value (in pixel) refers to the minimum width of the screen, at which point the button-group
should change its layout.
Example: Default (550 px):
On a large screen:
On a small screen:
Example: Where min-width-breakpoint
is reduced 200 px:
On a large screen:
On a small screen:
mode
mode
Optional
Type: row
| column
| split
| collapsed
Default: row
Control the layout of buttons with a button group.
A button-group
in mode="row"
will switch to mode="column"
on devices with smaller screens.
Examples: Button group modes
Mode: row
Mode: column
Mode: split
When using split
mode, the first button is kept full, the rest of the buttons are converted to an action sheet, represented by an icon-only button that matches the style of the first button.
Mode: collapsed
Collapsed button-groups transforms all buttons to a single button that opens an Action Sheet when selected.
show-if
and hide-if
show-if
and hide-if
Note: A button-group
will also be hidden when it contains no visible buttons.
style
style
Optional
Type: solid
| outline
Default: solid
Set the style
of all buttons in the button-group
.
type
type
Optional
Type: normal
| primary
| floating
Default: normal
Specify the type of button-group
, in most cases the default will suffice.
Both special case types, i.e. primary
| floating
have different behaviors and constraints.
Examples: Button group types
Type: primary
Pin a button group at the bottom of the view
Only one button-group
with type="primary"
is allowed per view.
Type: floating
Add a floating action button (FAB) or button group to view. Different to type="primary"
, this FABs are pinned to the bottom right corner of the screen
Only one button-group
with type="floating"
is allowed per view.
Single floating button
Floating button group
Select the button to open the floating action button group:
Component Methods
The following component methods are available when an id
is assigned to the component and component.buttonGroup({id:'my-id'})
is called from JS/TS:
scrollIntoView
scrollIntoView
Programmatically scroll until the button-group
is visible in the view.
Last updated