Card - PowerShell Universal

Cards contain content and actions about a single subject.
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Simple Card
Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
1
New-UDCard -Title 'Simple Card' -Content {
2
    "This is some content"
3
}
Copied!
Advanced Card
You can use the body, header, footer and expand cmdlets to create advanced cards. The below example creates a card with various features based on a Hyper-V VM.
1
$VM = Get-VM -Name $VMName @ConnectionInfo
2
​
3
$Header = New-UDCardHeader -Title $VM.Name
4
​
5
$Footer = New-UDCardFooter -Content {
6
    if ($VM.State -eq 'Running')
7
    {
8
        New-UDButton -Variant text -Text 'Stop' -OnClick {
9
            Show-UDToast -Message 'Stopping VM...' -Duration 5000
10
            Stop-VM -VMName $VM.name @ConnectionInfo 
11
            Sync-UDElement -Id "$($VMName)_card"
12
        }
13
    } else {
14
        New-UDButton -Variant text -Text 'Start' -OnClick {
15
            Show-UDToast -Message 'Starting VM...' -Duration 5000
16
            Start-VM -VMName $VM.name @ConnectionInfo 
17
            Sync-UDElement -Id "$($VMName)_card"
18
        }
19
    }
20
​
21
}
22
​
23
$Body = New-UDCardBody -Content {
24
    New-UDTable -Data ($VM | Select-Object Name, State, CPUUsage, MemoryAssigned, Uptime)  -Dense 
25
}
26
​
27
$Expand = New-UDCardExpand -Content {
28
    New-UDElement -Tag 'div' -Content {
29
        New-UDTable -Data ($VM.DvdDrives | Select-Object Name, DvdMediaType, Path) -Title 'DVD Drives' -Dense
30
    } 
31
​
32
    $Drives = Get-VMHardDiskDrive -VMName $VM.Name @ConnectionInfo | Select-Object Name, Path
33
    New-UDTable -Data $Drives -Title 'Hard Disk Drives' -Dense
34
​
35
    New-UDTable -Data ($VM.NetworkAdapters | Select-Object 'SwitchName', 'MacAddress' ) -Dense -Title 'Network Adapters' 
36
}
37
​
38
New-UDStyle -Style '.ud-mu-cardexpand { display: block !important }' -Content {
39
    New-UDCard -Body $Body -Header $Header -Footer $Footer -Expand $Expand
40
}
Copied!
Expandable Card
New-UDCard
Name
Type
Description
Required
Id
String
The ID of the component. It defaults to a random GUID.
false
ClassName
String
A CSS class to assign to this card.
false
ShowToolBar
SwitchParameter
Whether to show the toolbar for this card.
false
ToolBar
Object
The toolbar for this card. Use New-UDCardToolbar to create a toolbar.
false
Header
Object
The header for this card. The header typically contains a title for the card. Use New-UDCardHeader to create a header.
false
Body
Object
The body for this card. This is the main content for the card. Use New-UDCardHeader to create a body.
false
Expand
Object
Th expand content for this card. Expand content is show when the user clicks the expansion button. Use New-UDCardExpand to create an expand.
false
Footer
Object
The footer for this card. Footer contents typically contain actions that are relavent to the card. Use New-UDCardFooter to create a footer.
false
Style
Hashtable
Styles to apply to the card.
false
Elevation
Int32
The amount of elevation to provide the card. The more elevation, the more it will appear the card is floating off the page.
false
Title
String
A title for the card.
false
TitleAlignment
String
The alignment for the title.
false
Content
ScriptBlock
The content of the card.
false
Image
String
An image to show in the card.
false

AppBar

Paper

Last modified 6mo ago

Copy link

Contents

Simple Card

Advanced Card