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,
		})
	})
}