New-UDToggleButtonGroup

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> [[-Aria] <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

If specified, the component will be disabled.

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

-Exclusive

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

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

-Aria

A script block of New-UDAriaAttribute calls that supplies ARIA or role attributes for the toggle button group.

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

Common parameters

This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters.

Outputs

Examples

Example 1: Exclusive selection

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

With exclusive selection, selecting one option deselects any other.

Example 2: Multiple selection

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

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

Example 3: Size

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

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

Example 4: Orientation

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

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

Example 5: OnChange

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

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