New-UDToggleButtonGroup

A Toggle Button can be used to group related options.

Synopsis

A Toggle Button can be used to group related options.

Syntax

New-UDToggleButtonGroup [[-Id] <String>] [[-Color] <String>] [-Disabled] [-Exclusive] [-FullWidth] [[-OnChange] <Endpoint>] [[-Size] <String>] [[-Orientation] <String>] [[-Sx] <Hashtable>] [[-Value] <String[]>] [-Children] <ScriptBlock> [<CommonParameters>]

Description

A Toggle Button can be used to group related options.

Parameters

-Id

The ID of the component. If not specified, a random GUID will be assigned.

Required?                    false
Position?                    1
Default value                [Guid]::NewGuid().ToString()
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Color

The color of the component. Valid values are 'standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning'.

Required?                    false
Position?                    2
Default value                standard
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

    -Disabled [<SwitchParameter>]
        If specified, the component will be disabled.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

    -Exclusive [<SwitchParameter>]
        If specified, the component will only allow a single selection.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

    -FullWidth [<SwitchParameter>]
        If specified, the component will take up the full width of its container.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnChange

The endpoint to call when the value of the component changes.

Required?                    false
Position?                    3
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Size

The size of the component. Valid values are 'small', 'medium', 'large'.

Required?                    false
Position?                    4
Default value                medium
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Orientation

The orientation of the component. Valid values are 'horizontal', 'vertical'.

Required?                    false
Position?                    5
Default value                horizontal
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Sx

The style of the component.

Required?                    false
Position?                    6
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Value <String[]>

The value of the component.

Required?                    false
Position?                    7
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Children

The content of the component. Use New-UDToggleButton to create toggle buttons.

Required?                    true
Position?                    8
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

    <CommonParameters>
        This cmdlet supports the common parameters: Verbose, Debug,
        ErrorAction, ErrorVariable, WarningAction, WarningVariable,
        OutBuffer, PipelineVariable, and OutVariable. For more information, see
        about_CommonParameters (https://go.microsoft.com/fwlink/?LinkID=113216).

Outputs

-------------------------- EXAMPLE 1 --------------------------

PS >New-UDToggleButtonGroup -Content {
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     } -Id 'test'
PS > } -Exclusive

Exclusive selection|With exclusive selection, selecting one option deselects any other.




-------------------------- EXAMPLE 2 --------------------------

PS >New-UDToggleButtonGroup -Content {
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     } -Id 'test'
PS > }

Multiple selection|With multiple selection, selecting one option does not deselect any other.




-------------------------- EXAMPLE 3 --------------------------

PS >New-UDToggleButtonGroup -Content {
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     } -Id 'test'
PS > } -Size 'small'

Size|The small size is equivalent to the dense toggle button styling.




-------------------------- EXAMPLE 4 --------------------------

PS >New-UDToggleButtonGroup -Content {
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     } -Id 'test'
PS > } -Orientation 'vertical'

Orientation|The vertical orientation can be used to display a column of toggle buttons.




-------------------------- EXAMPLE 5 --------------------------

PS >New-UDToggleButtonGroup -Content {
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     }
PS >     New-UDToggleButton -Content {
PS >         New-UDIcon -Icon 'User'
PS >     } -Id 'test'
PS > } -OnChange {
PS >     Show-UDToast -Message "You selected $EventData"
PS > }

OnChange|The OnChange endpoint is called when the value of the component changes. The event data is the value of the component.