本文へスキップ
QuickGUI

オーバーレイとダイアログ

アプリ風の内容には QuickGUI のオーバーレイを使い、ファイル選択やアラートにはシステムダイアログを使います。

#Popover

Popover にはトリガーとポップアップがあります。表示する辺は希望の位置です。溢れる場合は配置が反転します。

func PopoverExample() *ui.Element {
	popover := ui.NewPopover().Side("bottom").SideOffset(8)
	return popover.Root().Children(
		popover.Trigger().Child("Account"),
		popover.Positioner().Child(
			popover.Popup().Width(240).Padding(16).Children(
				popover.Title().Child("Account"),
				popover.Description().Child("Manage your account settings."),
				popover.Close().Child("Done"),
			),
		),
	)
}

#Dialog

モーダルな内容は Portal の下に組み立てます。Title と Description はアクセシビリティのためにダイアログに名前を付けます。確認には AlertDialog を使います。

func DialogExample() *ui.Element {
	dialog := ui.NewDialog()
	return dialog.Root().Children(
		dialog.Trigger().Child("Open dialog"),
		dialog.Portal().Children(
			dialog.Backdrop(),
			dialog.Popup().Padding(20).Width(360).Children(
				dialog.Title().Child("Confirm action"),
				dialog.Description().Child("Review the details before continuing."),
				dialog.Close().Child("Cancel"),
			),
		),
	)
}

#システムポップオーバー

SystemPopover は原生子ウィンドウを開き、親ウィンドウの端を越えて伸びられます。

func SystemPopoverExample() *ui.Element {
	popover := ui.NewSystemPopover()
	return popover.Root().Children(
		popover.Trigger().Child("Account"),
		popover.Content(ui.PopoverContentProps{
			Width:     240,
			Height:    120,
			Placement: "bottom-start",
		}).Child("Account settings"),
	)
}

#ネイティブダイアログ

描画中に親ウィンドウをキャプチャし、それをリクエストに渡します。オープンパネルがキャンセルされると Canceled: true になります。

func OpenFolderButton() *ui.Element {
	window := native.CurrentWindow()
	return ui.Button().Child("Open folder").OnClick(func() {
		native.ShowOpenDialog(
			native.OpenDialogOptions{
				Window:     window,
				Title:      "Open folder",
				Properties: []string{"openDirectory"},
			},
			func(result native.OpenDialogResult, err error) {
				if err == nil && !result.Canceled {
					fmt.Println(result.FilePaths)
				}
			},
		)
	})
}