Skip to content

Classes, Styles and Attributes

Every element can be piped into either Add-PodeWebClass, Add-PodeWebStyle or Add-PodeWebAttribute. These functions let you you add custom classes, styles or attributes to elements, during creation, so you can control their look and functionality.

Classes

To add a class to an element you can pipe a new element into Add-PodeWebClass, and this will set the values on the element's class attribute on the frontend. The classes by themselves don't do anything, but you can use them to build custom CSS files and import them via Import-PodeWebStylesheet; you can also use the custom classes as references in custom JavaScript files, and import these via Import-PodeWebJavaScript.

For example, the following would apply the my-custom-textbox class to a textbox:

New-PodeWebTextbox -Name 'Message' |
    Add-PodeWebClass -Value 'my-custom-textbox'

Then you could create some /public/my-styles.css file with the following, to set the textbox's text colour to purple:

.my-custom-textbox {
    color: purple
}

and import it via: Import-PodeWebStylesheet -Url '/my-styles.css'.

or, you can create some JavaScript file at /public/my-scripts.js with an event to write to console on key-up. jQuery works here, as Pode.Web uses jQuery. We just have to reference the class applied to the element:

$('.my-custom-textbox').off('keyup').on('keyup', (e) => {
    console.log($(e.target).val());
})

and import it via: Import-PodeWebJavaScript -Url '/my-scripts.js'.

You can add/remove adhoc classes on elements using the Class actions. (This will add classes onto the element itself, not the parent).

Styles

To add a CSS style to an element you can pipe a new element into Add-PodeWebStyle, and this will set the value on the element's style attribute on the frontend. The -Key is the name of a CSS style property.

For example, the following would display a paragraph with yellow text:

New-PodeWebParagraph -Content @(
    New-PodeWebText -Value 'And then here is some more text, that also includes a '
    New-PodeWebLink -Value 'link' -Url 'https://google.com'
    New-PodeWebText -Value ' that takes you to Google'
) |
    Add-PodeWebStyle -Key 'color' -Value 'yellow'

You can add/remove adhoc CSS style properties on elements using the Style actions.

Attributes

To add an attribute to an element you can pipe a new element into Add-PodeWebAttribute, and this will set the attribute on the element on the frontend. The -Key is the name of an HTML attribute.

For example, the following would add the hx-confirm attribute to a button:

New-PodeWebButton -Name 'Example' -ScriptBlock {} |
    Add-PodeWebAttribute -Key 'hx-confirm' -Value 'Are you sure?'

You can add/remove adhoc attributes on elements using the Attribute actions.

Visibility

You can hide an element on creation by piping it into Hide-PodeWebElement. For example, the following will hide a textbox initially when it's created:

New-PodeWebTextbox -Name 'Message' |
    Hide-PodeWebElement

You can later show the element by using the Visibility actions.