Badgerati / Pode.Web

Web template framework for use with the Pode PowerShell web server
MIT License
189 stars 24 forks source link

Add support for logically grouping element together; Adds Actions for Padding, Margin, and Display; Adds new Span Element #571

Closed Badgerati closed 4 months ago

Badgerati commented 4 months ago

Description of the Change

Adds support for logically grouping elements together, so that inputs can be serialized on button clicks and for events as well.

Also adds:

Related Issue

Resolves #457

Examples

The following has a button each for Name and City, and then a global Button to submit both Name and City together:

New-PodeWebElementGroup -Content @(
    New-PodeWebElementGroup -Content @(
        New-PodeWebText -Value 'Name:'
        New-PodeWebTextbox -Name 'Name' -Type Text | Set-PodeWebMargin -Left 1 -Right 1
        New-PodeWebButton -Name 'Submit Name' -ScriptBlock {
            Show-PodeWebToast -Message "Hi, $($WebEvent.Data.Name)!"
        }
    ) |
        Set-PodeWebDisplay -Value Flex

    New-PodeWebElementGroup -Content @(
        New-PodeWebText -Value 'City:'
        New-PodeWebTextbox -Name 'City' -Type Text | Set-PodeWebMargin -Left 1 -Right 1
        New-PodeWebButton -Name 'Submit City' -ScriptBlock {
            Show-PodeWebToast -Message "Hi, $($WebEvent.Data.City)!"
        }
    ) |
        Set-PodeWebDisplay -Value Flex |
        Set-PodeWebMargin -Top 1

    New-PodeWebButton -Name 'Submit All' -ScriptBlock {
        Show-PodeWebToast -Message "Hi, $($WebEvent.Data.Name) from $($WebEvent.Data.City)!"
    } |
        Set-PodeWebMargin -Top 1
)