New-UDAvatar

Synopsis

Creates a new Avatar.

Syntax

New-UDAvatar [[-Id] <String>] [[-Image] <String>] [[-Alt] <String>] [[-ClassName] <String>] [[-Variant] <String>] [[-Sx] <Object>] [[-Children] <ScriptBlock>] [<CommonParameters>]

Description

Creates a new Avatar. An avatar is typically an image of a user.

Parameters

-Id

The ID of the component. It defaults to a random GUID.

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

-Image

The URL of an image to show in the avatar.

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

-Alt

The alt text to assign to the avatar.

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

-ClassName

Classes to assign to the avatar component.

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

-Variant

The variant type of the avatar. Valid values are: "square", "rounded"

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

-Sx

The sx property allows you to define custom CSS styles that will be applied to the component.

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

-Children

The content to display within the avatar.

Required?                    false
Position?                    7
Default value                { "A" }
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: Basic avatar

New-UDAvatar -Alt "Remy Sharp" -Image "/assets/logo.png"

Displays a basic avatar with an image.

Example 2: Square avatar

New-UDAvatar -Alt "Remy Sharp" -Content { "B" } -Variant square

Displays a square avatar with an image.

Example 3: Avatar with text

New-UDAvatar -Alt "Remy Sharp" -Content {
  "A"
} -Sx @{
  borderRadius = '50%'
}

Displays an avatar with text and custom CSS styles.

Example 4: Avatar group

New-UDAvatarGroup -Content {
  1..10 | ForEach-Object {
    New-UDAvatar -Alt "Remy Sharp" -Content {
        "A"
    } -Sx @{
        borderRadius    = '50%'
        backgroundColor = 'error.dark'
    }
  }
} -Sx @{
   width = "20%"
}

Displays a group of avatars.

Example 5: Sizes

New-UDAvatar -Alt "Remy Sharp" -Content {
  "A"
} -Sx @{
  width = 24
  height = 24
}
New-UDAvatar -Alt "Remy Sharp" -Content {
  "A"
}
New-UDAvatar -Alt "Remy Sharp" -Content {
  "A"
} -Sx @{
  width = 56
  height = 56
}

Displays a group of avatars with different sizes.

Example 6: Icons

New-UDAvatar -Alt "Remy Sharp" -Content {
  New-UDIcon -Icon "User"
}

Displays an avatar with an icon.

Example 7: Fallback

New-UDAvatar -Alt "Remy Sharp" -Image "/broken.png" -Content { "A" }

Displays an avatar with a fallback to a broken image.

Example 8: Badge

New-UDBadge -BadgeContent {
    10
} -Children {
    New-UDAvatar
}

Displays an avatar with a badge.