package showcase
import "github.com/axzilla/templui/internal/components/button"
templ ToastDefault() {
<div>
<form
class="flex flex-col gap-2"
hx-post="/docs/toast/demo"
hx-trigger="submit"
hx-target="#toast-container"
hx-vals='{
"title": "You have a new notification",
"description": "Test Notification",
"dismissible": "on"
}'
>
@button.Button(button.Props{
Type: button.TypeSubmit,
}) {
Show Toast
}
</form>
<div id="toast-container"></div>
</div>
}
Installation
Install the component
templui add toastAdd the JavaScript to your layout
@toast.Script()Call this template in your base layout file (e.g., in the <head> section).
// Template
templ UserForm() {
<form hx-post="/save" hx-target="#toast">
<input name="email" />
</form>
<div id="toast"></div>
}
// Handler
func Save(w http.ResponseWriter, r *http.Request) {
if err != nil {
components.Toast(components.ToastProps{
Text: err.Error(),
Variant: components.ToastVariantError,
}).Render(r.Context(), w)
}
}// Template
templ UserForm(error string) {
if error != "" {
@components.Toast(components.ToastProps{
Text: error,
Variant: components.ToastVariantError,
})
}
<form method="POST">
<input name="email"/>
</form>
}
// Handler
func Save(w http.ResponseWriter, r *http.Request) {
if err != nil {
UserForm(err.Error()).Render(r.Context(), w)
}
}Examples
Playground
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/card"
"github.com/axzilla/templui/internal/components/form"
"github.com/axzilla/templui/internal/components/input"
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/selectbox"
"github.com/axzilla/templui/internal/components/toggle"
)
templ ToastPlayground() {
<div class="w-full max-w-4xl mx-auto p-8">
<section class="mb-12">
@card.Card() {
@card.Content() {
<form
class="flex flex-col gap-2"
hx-post="/docs/toast/demo"
hx-trigger="submit"
hx-target="#toast-advanced-container"
>
// Message
@form.Item() {
@form.Label(form.LabelProps{
For: "title",
}) {
Message
}
@input.Input(input.Props{
Value: "You have a new notification",
ID: "title",
Name: "title",
})
}
// Description
@form.Item() {
@form.Label(form.LabelProps{
For: "description",
}) {
Description
}
@input.Input(input.Props{
Value: "Test Notification",
ID: "description",
Name: "description",
})
}
// Type
@form.Item() {
@form.Label(form.LabelProps{
For: "type",
}) {
Type
}
@selectbox.SelectBox() {
@selectbox.Trigger(selectbox.TriggerProps{
Name: "type",
ID: "type",
}) {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Default",
})
}
@selectbox.Content() {
@selectbox.Group() {
@selectbox.Item(selectbox.ItemProps{
Value: "default",
Selected: true,
}) {
Default
}
@selectbox.Item(selectbox.ItemProps{
Value: "success",
}) {
Success
}
@selectbox.Item(selectbox.ItemProps{
Value: "error",
}) {
Error
}
@selectbox.Item(selectbox.ItemProps{
Value: "warning",
}) {
Warning
}
@selectbox.Item(selectbox.ItemProps{
Value: "info",
}) {
Info
}
}
}
}
}
// Position
@form.Item() {
@form.Label(form.LabelProps{
For: "position",
}) {
Position
}
@selectbox.SelectBox() {
@selectbox.Trigger(selectbox.TriggerProps{
Name: "position",
ID: "position",
}) {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Bottom Right",
})
}
@selectbox.Content() {
@selectbox.Group() {
@selectbox.Item(selectbox.ItemProps{
Value: "top-right",
}) {
Top Right
}
@selectbox.Item(selectbox.ItemProps{
Value: "top-left",
}) {
Top Left
}
@selectbox.Item(selectbox.ItemProps{
Value: "top-center",
}) {
Top Center
}
@selectbox.Item(selectbox.ItemProps{
Value: "bottom-right",
Selected: true,
}) {
Bottom Right
}
@selectbox.Item(selectbox.ItemProps{
Value: "bottom-left",
}) {
Bottom Left
}
@selectbox.Item(selectbox.ItemProps{
Value: "bottom-center",
}) {
Bottom Center
}
}
}
}
}
// Duration
@form.Item() {
@form.Label(form.LabelProps{
For: "duration",
}) {
Duration (ms)
}
@input.Input(input.Props{
Type: input.TypeNumber,
Value: "3000",
ID: "duration",
Name: "duration",
})
}
// Options
@form.Item() {
@form.Label(form.LabelProps{
For: "dismissible",
}) {
Dismissible
}
@form.ItemFlex() {
@toggle.Toggle(toggle.Props{
Name: "dismissible",
Checked: true,
ID: "dismissible",
})
@label.Label(label.Props{
For: "dismissible",
}) {
Dimissible
}
}
@form.ItemFlex() {
@toggle.Toggle(toggle.Props{
Name: "icon",
Checked: true,
})
@label.Label(label.Props{
For: "icon",
}) {
Show Icon
}
}
@form.ItemFlex() {
@toggle.Toggle(toggle.Props{
ID: "indicator",
Name: "indicator",
Checked: true,
})
@label.Label(label.Props{
For: "indicator",
}) {
Show Indicator
}
}
}
// Submit
@button.Button(button.Props{
Type: button.TypeSubmit,
Class: "w-full",
}) {
Show Toast
}
</form>
}
}
</section>
<div id="toast-advanced-container"></div>
</div>
}