Gallery: display demos use the shell's code card
This commit is contained in:
3 files changed
-22
No files matched your search
@@ -74,7 +74,6 @@ func textDemo(c *ui.Context, log func(string)) {
|
|||||||
log("edit canceled")
|
log("edit canceled")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
displayCode(c, textCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const textCode = `mujica.Text(c, "Order ID: 4821-AX", mujica.TextOptions{Selectable: true})
|
const textCode = `mujica.Text(c, "Order ID: 4821-AX", mujica.TextOptions{Selectable: true})
|
||||||
@@ -113,7 +112,6 @@ func headingDemo(c *ui.Context, log func(string)) {
|
|||||||
mujica.Heading(c, fmt.Sprintf("Level %d · 宫廷", l), mujica.HeadingOptions{Level: l})
|
mujica.Heading(c, fmt.Sprintf("Level %d · 宫廷", l), mujica.HeadingOptions{Level: l})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
displayCode(c, headingCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const headingCode = `mujica.Heading(c, "The Grand Hall", mujica.HeadingOptions{Subtitle: "Winter ceremonies", Divider: true})
|
const headingCode = `mujica.Heading(c, "The Grand Hall", mujica.HeadingOptions{Subtitle: "Winter ceremonies", Divider: true})
|
||||||
@@ -163,7 +161,6 @@ func iconDemo(c *ui.Context, log func(string)) {
|
|||||||
mujica.Icon(c, "missing-name", mujica.IconOptions{Size: 20})
|
mujica.Icon(c, "missing-name", mujica.IconOptions{Size: 20})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
displayCode(c, iconCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const iconCode = `ui.Row(c).Gap(8).Children(func() {
|
const iconCode = `ui.Row(c).Gap(8).Children(func() {
|
||||||
@@ -203,7 +200,6 @@ func avatarGroupDemo(c *ui.Context, log func(string)) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
displayCode(c, avatarGroupCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const avatarGroupCode = `mujica.AvatarGroup(c, people, mujica.AvatarGroupOptions{Max: 3})`
|
const avatarGroupCode = `mujica.AvatarGroup(c, people, mujica.AvatarGroupOptions{Max: 3})`
|
||||||
@@ -250,7 +246,6 @@ func badgeDemo(c *ui.Context, log func(string)) {
|
|||||||
mujica.Badge(c, opts, func() { mujica.Avatar(c, "Sakiko Togawa", mujica.AvatarOptions{Size: 40}) })
|
mujica.Badge(c, opts, func() { mujica.Avatar(c, "Sakiko Togawa", mujica.AvatarOptions{Size: 40}) })
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
displayCode(c, badgeCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const badgeCode = `mujica.Badge(c, mujica.BadgeOptions{Text: "New", Tone: mujica.BadgeNeutral}, nil)
|
const badgeCode = `mujica.Badge(c, mujica.BadgeOptions{Text: "New", Tone: mujica.BadgeNeutral}, nil)
|
||||||
@@ -303,7 +298,6 @@ func tagDemo(c *ui.Context, log func(string)) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
displayCode(c, tagCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const tagCode = `for i, t := range tags {
|
const tagCode = `for i, t := range tags {
|
||||||
@@ -345,7 +339,6 @@ func linkDemo(c *ui.Context, log func(string)) {
|
|||||||
log("in-app action")
|
log("in-app action")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
displayCode(c, linkCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const linkCode = `mujica.Link(c, "Read the charter", mujica.LinkOptions{URL: "https://example.com/charter"})
|
const linkCode = `mujica.Link(c, "Read the charter", mujica.LinkOptions{URL: "https://example.com/charter"})
|
||||||
@@ -384,7 +377,6 @@ func kbdDemo(c *ui.Context, log func(string)) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
displayCode(c, kbdCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const kbdCode = `ui.Row(c).Gap(6).Children(func() {
|
const kbdCode = `ui.Row(c).Gap(6).Children(func() {
|
||||||
|
|||||||
@@ -59,7 +59,6 @@ func imageDemo(c *ui.Context, log func(string)) {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
displayCode(c, imageCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const imageCode = `img := mujica.Image(c, photo, mujica.ImageOptions{
|
const imageCode = `img := mujica.Image(c, photo, mujica.ImageOptions{
|
||||||
@@ -111,7 +110,6 @@ func avatarDemo(c *ui.Context, log func(string)) {
|
|||||||
mujica.Avatar(c, "", mujica.AvatarOptions{Size: 40})
|
mujica.Avatar(c, "", mujica.AvatarOptions{Size: 40})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
displayCode(c, avatarCode, log)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const avatarCode = `ui.Row(c).Gap(8).Children(func() {
|
const avatarCode = `ui.Row(c).Gap(8).Children(func() {
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import (
|
|||||||
"github.com/egoist/mygo/ui"
|
"github.com/egoist/mygo/ui"
|
||||||
|
|
||||||
mujica "mujicaui"
|
mujica "mujicaui"
|
||||||
"mujicaui/theme"
|
|
||||||
)
|
)
|
||||||
|
|
||||||
// displaySection shows a titled block of a demo.
|
// displaySection shows a titled block of a demo.
|
||||||
@@ -22,17 +21,6 @@ func displayControls(c *ui.Context, fn func()) {
|
|||||||
ui.Row(c).Gap(16).Wrap().AlignItems(ui.Center).Children(fn)
|
ui.Row(c).Gap(16).Wrap().AlignItems(ui.Center).Children(fn)
|
||||||
}
|
}
|
||||||
|
|
||||||
// displayCode shows a page's snippet with a copy button.
|
|
||||||
func displayCode(c *ui.Context, code string, log func(string)) {
|
|
||||||
displaySection(c, "Code", func() {
|
|
||||||
if mujica.Button(c, "Copy code", mujica.ButtonOptions{Variant: mujica.Secondary}).AlignSelf(ui.Start).Clicked() {
|
|
||||||
c.WriteClipboard(code)
|
|
||||||
log("code copied")
|
|
||||||
}
|
|
||||||
mujica.Text(c, code, mujica.TextOptions{Selectable: true}).Font(theme.MonoFont).FontSize(12)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// displayLog logs a control's new value when it changed.
|
// displayLog logs a control's new value when it changed.
|
||||||
func displayLog[T any](log func(string), e *ui.Element, name string, v *T) {
|
func displayLog[T any](log func(string), e *ui.Element, name string, v *T) {
|
||||||
if e.Changed() {
|
if e.Changed() {
|
||||||
|
|||||||
Reference in new issue
Block a user