New-UDTypography

Synopsis

Typography allows you to configure and display text.

Syntax

New-UDTypography [-Id <String>] [-Variant <String>] [[-Text] <String>] [-Style <Hashtable>] [-ClassName <String>] [-Align <String>] [-GutterBottom] [-NoWrap] [-Truncate] [-FontWeight <String>] [-Sx <Hashtable>] [<CommonParameters>]

New-UDTypography [-Id <String>] [-Variant <String>] [-Content <ScriptBlock>] [-Style <Hashtable>] [-ClassName <String>] [-Align <String>] [-GutterBottom] [-NoWrap] [-Truncate] [-FontWeight <String>] [-Sx <Hashtable>] [<CommonParameters>]

Description

Creates typography. Typography allows you to configure text within a dashboard.

Parameters

-Id

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

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

-Variant

The type of text to display.

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

-Text

The text to format.

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

-Content

The content to format.

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

-Style

A set of CSS styles to apply to the typography.

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

-ClassName

A CSS className to apply to the typography.

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

-Align

How to align the typography.

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

-GutterBottom

The gutter bottom.

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

-NoWrap

Disables text wrapping.

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

-Truncate

Disables text wrapping and adds ellipsis for overflow.

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

-FontWeight

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

-Sx

Theme-based styling hashtable.

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: Basic Typography

New-UDTypography -Text "Hello World" -Variant "h1" -Id "typography1"

A basic typography component that displays a header.

Example 2: Typography with Style

New-UDTypography -Text "Hello World" -Variant "h1" -Style @{color = "red"} -Id "typography2"

A typography component that displays a header with a red color.

Example 3: Alignment

New-UDTypography -Text "Hello World" -Id "typography3" -Align "center"

A typography component that displays with a centered alignment.

Example 4: Gutter Bottom

New-UDTypography -Text "Hello World" -Id "typography4" -GutterBottom

A typography component that displays with a space below the text.

Example 5: No Wrap

New-UDTypography -Text "Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!" -Id "typography5" -NoWrap

A typography component that displays with no wrapping.

Example 6: Font Weight

New-UDTypography -Text "Hello World" -Id "typography6" -FontWeight "bold"

A typography component that displays with a bold font weight.

Example 7: Sx

New-UDTypography -Text "Hello World" -Id "typography11" -Sx @{color = "red"}

A typography component that displays with a red color using the theme sx property.

Example 8: Content

New-UDTypography -Id "typography12" -Content {
    New-UDButton -Text "Click Me" -Id "button1"
}

A typography component that displays with a button inside of it.

Example 9: Variants

@("h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2",  "caption", "button", "overline", "srOnly", "inherit",  "display4", "display3", "display2", "display1", "headline", "title", "subheading") | ForEach-Object {
      New-UDTypography -Variant $_ -Text $_ -GutterBottom
      New-UDElement -Tag 'p' -Content {}
}

A typography component that displays all of the variants.