https://github.com/benopotamus/htmx-ext-shoelace

https://github.com/benopotamus/htmx-ext-shoelace

Last synced: 25 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/benopotamus/htmx-ext-shoelace
• Owner: benopotamus
• Created: 2022-12-06T09:09:28.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-07T08:05:25.000Z (5 months ago)
• Last Synced: 2024-08-03T17:08:58.706Z (4 months ago)
• Language: HTML
• Size: 21.5 KB
• Stars: 59
• Watchers: 4
• Forks: 6
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-htmx - htmx-ext-shoelace - An extension to make Shoelace elements work seamlessly with HTMX. (Tools)

README

        
# htmx-ext-shoelace

An extension to make [Shoelace](https://shoelace.style/) elements work even more seamlessly with htmx.

## Features

 1. Include `sl-rating` values. These are ignored by htmx as Shoelace doesn't implement the `name` attribute for `sl-rating` - and a name is needed for the formData key.

 2. Includes an `sl-radio-group` value only if it has a value set

 3. Prevents form submission if the form is not valid (e.g. a required field has no value)

## Usage

1. Import htmx and the extension

```

```

2. Add "shoelace" to the `hx-ext` parameter on a `form` or `body` tag. Adding it to the body tag will make **all** forms in the page include the values of Shoelace elements within them.

```

```

3. Don't forget to add a `name` attribute to your Shoelace elements 🤦