コンポーネント詳細

Overlay System Demo

Modal/drawer/popover/tooltip overlay demo

サンプル

参照情報

テンプレート
ui/overlay/overlay-core.js
ゴールデン
ui/overlay/README.md

Go(Marionette)サンプル

この実装例は Go の Marionette を使っています。ソース: docs/site-astro/public/examples/go/overlay-system.go

package goexamples

import (
	mb "github.com/YoshihideShirai/marionette/backend"
	mf "github.com/YoshihideShirai/marionette/frontend"
)

// RegisterOverlaySystemExample wires a Marionette page used in docs snippets.
func RegisterOverlaySystemExample(app *mb.App) {
	app.Page("/overlay-system", func(ctx *mb.Context) mf.Node {
		return mf.Modal(mf.ModalProps{
			Title:   "Overlay demo",
			Body:    mf.TextComponent(mf.TextProps{Text: "Modal uses the shared overlay layer in the runtime shell."}),
			Actions: mf.Button("Close", mf.ComponentProps{Variant: "ghost", Size: "sm"}),
			Open:    true,
		})
	})
}