Skip to content
Documentation
Components
Feedback & Overlays
Modal

Modal

A modal places its content in a layer above the view. Modal centers the content and blocks the background, it is the base of all dialogs. Overlay positions the content absolutely with Top, Left, Right and Bottom and keeps the background usable, e.g. for popovers or hints. NotificationsOverlay is an overlay which stays in front of other overlays, see Banner Messages. Show a modal conditionally with If.

Modal

presented := core.AutoState[bool](wnd)

VStack(
	PrimaryButton(func() { presented.Set(true) }).Title("Show hint"),
	If(presented.Get(), Overlay(
		VStack(
			Text("Tip of the day").Font(SubTitle),
			Text("Press Escape to close dialogs."),
			SecondaryButton(func() { presented.Set(false) }).Title("Got it"),
		).Alignment(Leading).
			Gap(L8).
			BackgroundColor(M1).
			Border(Border{}.Radius(L16).Shadow(L8)).
			Padding(Padding{}.All(L16)),
	).Top(L24).Right(L24)),
)

Constructors

ConstructorDescription
func Modal(content core.View) TModalModal places the content and blocks the background controls.
func Overlay(content core.View) TModalPlaces the content at absolute positions without blocking the background.
func NotificationsOverlay(content core.View) TModalLike Overlay, but positioned in front of other overlays.

Methods

MethodDescription
AllowBackgroundScrolling(allowBackgroundScrolling bool) TModalAllowBackgroundScrolling configures whether background content can scroll while the modal is open.
Bottom(bottom Length) TModalBottom sets the bottom offset of the modal.
Left(left Length) TModalLeft sets the left offset of the modal.
OnDismissRequest(fn func()) TModalOnDismissRequest sets an event handler for the dismiss event.
Right(right Length) TModalRight sets the right offset of the modal.
Top(top Length) TModalTop sets the top offset of the modal.

Related