Component Detail
Modal
Overlay dialog for confirmations and detail tasks
Example
References
- Template
templates/components/modal.html- Golden
testdata/golden/modal_open.golden.html
Go (Marionette) Example
This implementation example uses Marionette in Go. Source: docs/site-astro/public/examples/go/modal.go
package goexamples
import (
mb "github.com/YoshihideShirai/marionette/backend"
mf "github.com/YoshihideShirai/marionette/frontend"
)
func RegisterModalExample(app *mb.App) {
app.Page("/modal", func(ctx *mb.Context) mf.Node {
return mf.Modal(mf.ModalProps{
Title: "Delete user",
Body: mf.TextComponent(mf.TextProps{Text: "Confirm deletion before continuing."}),
Actions: mf.Actions(mf.ActionsProps{Align: "end", Gap: "sm"},
mf.Button("Cancel", mf.ComponentProps{Variant: "ghost", Size: "sm"}),
mf.Button("Delete", mf.ComponentProps{Variant: "danger", Size: "sm"}),
),
Open: true,
})
})
}