New-UDToggleButtonGroup

Sinopsis

Un botón de alternancia puede utilizarse para agrupar opciones relacionadas.

Sintaxis

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

Descripción

Un botón de alternancia puede utilizarse para agrupar opciones relacionadas.

Parámetros

-Id

El ID del componente. Si no se especifica, se asignará un GUID aleatorio.

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

-Color

El color del componente. Los valores válidos son 'standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning'.

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

-Disabled

Si se especifica, el componente estará deshabilitado.

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

-Exclusive

Si se especifica, el componente solo permitirá una única selección.

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

-FullWidth

Si se especifica, el componente ocupará todo el ancho de su contenedor.

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

-OnChange

El endpoint al que se llama cuando cambia el valor del componente.

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

-Size

El tamaño del componente. Los valores válidos son 'small', 'medium', 'large'.

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

-Orientation

La orientación del componente. Los valores válidos son 'horizontal', 'vertical'.

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

-Sx

El estilo del componente.

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

-Value <String[]>

El valor del componente.

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

-Children

El contenido del componente. Utilice New-UDToggleButton para crear botones de alternancia.

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

Parámetros comunes

Este cmdlet admite los parámetros comunes: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable y OutVariable. Para más información, consulte about_CommonParameters.

Salidas

Ejemplos

Ejemplo 1: selección exclusiva

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

Con la selección exclusiva, al seleccionar una opción se deselecciona cualquier otra.

Ejemplo 2: selección múltiple

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'
}

Con la selección múltiple, al seleccionar una opción no se deselecciona ninguna otra.

Ejemplo 3: tamaño

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'

El tamaño pequeño equivale al estilo de botón de alternancia denso.

Ejemplo 4: orientación

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'

La orientación vertical puede utilizarse para mostrar una columna de botones de alternancia.

Ejemplo 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"
}

Se llama al endpoint OnChange cuando cambia el valor del componente. Los datos del evento son el valor del componente.