Attributes

Attributes are simple to understand, but an extremely powerful tool to shaping how Iridium behaves. They are a tool for scripting and customizing your components beyond what Iridium provides as options, without fully overriding components.

Forms, Tables, and other components, generally offer a Attributes or AttributesFn function, that allows you to pass in templ.Attributes (which are just map[string]any).

This lets you pass your own html attributes directly to any component. Joining this along with HTMX & Alpine.JS allows you to make your components behave in multi-faceted ways.

Iridium uses Attributes internally to set field behaviour, including setting the required HTMX attributes to power the Live method on form fields so user interaction will run the validation lifecycle on that particular field.

Danger! - XSS risk

Please be exceptionally careful when using attributes if you start templating them. Injecting content into your attributes that can be sourced from your users or other untrusted sources introduces your application to XSS

Cross-site scripting attacks. Read more here

attacks! Generally hardcoded attributes you write yourself are fine.

What can I do?

A fair amount, since you can include any HTML attribute including HTMX & Alpine attributes.

Styling

• For styling, you can provide your own class or style attributes. Providing a class attribute will NOT merge your class with any exisitng class. It will override the class attribute entirely. ?
  Hey buddy, i need to override your class not get rid of it! See here

Scripting

• For scripting, if you're not familiar with HTMX or Alpine.JS, reading their documentation is a good start.

What if I don't wanna/can't use HTMX or Alpine?

No worries friend, your attributes are your own. Perfer to call out to a JS script, or use some other inline attribute library? No problemo.

For now, you'll have to provide an additional meta tag for your panel, or override your page's root template, to load those scripts, and then feel free to hook into them anywhere.

Other

Again since we expand your attribute map inline on your component's core tag (like an input), you can include anything. Disable the input if you want with a "disabled": true tag, for example.

<input id="name" {i.AttributeMap...}/>

Need more? Here's a basic example:

Examples

Simple Scripting Example

Say you simply want to add a copy button on your form's input field. One way of doing this is including a postfix icon with a custom Alpine.JS attribute to copy the current input's value to the user's clipboard.

TextInput("name").
    PostfixIcon(icons.Copy.
        Mutate().
        Attributes(map[string]any { 
            // This is applied to the icon's SVG tag, not the name input
            "@click": "
                navigator.clipboard.writeText($refs.name.value)
            "
        }
    ))

This will produce the following simplified

I've remove some noise here from some of the tags for illustrative purposes. Your HTML will look different, but this gets the gist across. Inspect element helps or checkout our templ components!

HTML:

<div x-data> <!-- container div with Alpine.JS x-data attribute -->
    <svg path="..." @click="navigator.clipboard.writeText($refs.name.value)"></svg> <!-- your click attribute runs here-->
    <input x-ref="name"/> <!-- x-ref binds this input to the name ref -->
</div>

Therefore, now when you click on your copy icon, you'll grab the value of the input field and insert that into the user's clipboard!

Notes

When attributes aren't enough

Trying to do something and attributes just can't cut it?

For example, changing the actual HTML shape of your components

It's time to talk overriding.

Attributes can be messy

If you're turned off by inlining your scripts, perhaps you'd rather override your components or call out to a JS script. Iridium is built off a lot of inline scripting

Alpine.js is basically all inline scripting after-all.

, but it's not for everything/everyone and can get a little sloppy. We load in custom JS scripts for certain things too! Rules are made to be broken!