How to create a simple, clickable card with an onClick event


#1

This example illustrates how to make a simple card, in horizontal format with an onClick handler event.

First, our code. I’m using a custom New-UDCard with added -Horizontal parameter from a great post here. We essentially wrap our card in a New-UDElement with some css and html styles, which looks like this:

$OnClick = {
    Show-UDToast -Message 'Clicked!'
}

New-UDElement -Tag 'a' -Attributes @{
    onClick = $OnClick
    style   = @{
        'cursor' = 'pointer'
    }
               
} -Content {
    New-UDCustomCard -Horizontal -BackgroundColor "#88DABF" -Endpoint {
        New-UDElement -Tag 'img'  -Attributes @{
            src   = (Get-ImageBase64Uri -Path '.\assets\megaphone.svg')
            style = @{
                float          = 'left'
                width          = '80px'
                "margin-right" = '10px'
            }
        }
        New-UDElement -Tag 'span' -Attributes @{
            style = @{
                'cursor'      = 'pointer'
                'font-weight' = '300'
                'font-size'   = '14px'
            }
        } -Content {
            'Click here to test what happens on click!'
        }
    }
}

This produces: