New-UDTypography

Typography allows you to configure and display text.

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 [<SwitchParameter>]
        The gutter bottom.

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

    -NoWrap [<SwitchParameter>]
        Disables text wrapping.

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

    -Truncate [<SwitchParameter>]
        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

    <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-UDTypography -Text "Hello World" -Variant "h1" -Id "typography1"

Basic Typography|A basic typography component that displays a header.




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

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

Typography with Style|A typography component that displays a header with a red color.




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

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

Alignment|A typography component that displays with a centered alignment.




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

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

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




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

PS >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

No Wrap|A typography component that displays with no wrapping.




-------------------------- EXAMPLE 6 --------------------------

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

Font Weight|A typography component that displays with a bold font weight.




-------------------------- EXAMPLE 7 --------------------------

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

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




-------------------------- EXAMPLE 8 --------------------------

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

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




-------------------------- EXAMPLE 9 --------------------------

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

Variants|A typography component that displays all of the variants.