Card
Card component for Universal Dashboard
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
API
Last modified 3mo ago
Copy link