Split into category packages; module github.com/ZacharyZhang-NY/MujicaUI
This commit is contained in:
1822 files changed
+24568
-21314
No files matched your search
@@ -5,9 +5,9 @@ var essentialsPages = []page{
|
||||
ID: "481", Name: "SplitButton", ZhName: "拆分按钮 主操作 下拉", Category: "Essentials",
|
||||
Demo: splitButtonDemo,
|
||||
Code: `view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
r := mujica.SplitButton(c, "Save", mujica.SplitButtonOptions{}, func(m *mujica.PopupMenu) {
|
||||
if m.Item("Save as…", mujica.PopupMenuItemOptions{}) {
|
||||
core.Use(c, core.Settings{})
|
||||
r := overlay.SplitButton(c, "Save", overlay.SplitButtonOptions{}, func(m *overlay.PopupMenu) {
|
||||
if m.Item("Save as…", overlay.PopupMenuItemOptions{}) {
|
||||
// ask for a file name
|
||||
}
|
||||
})
|
||||
@@ -21,8 +21,8 @@ var essentialsPages = []page{
|
||||
ID: "482", Name: "CopyButton", ZhName: "复制按钮 剪贴板", Category: "Essentials",
|
||||
Demo: copyButtonDemo,
|
||||
Code: `view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.CopyButton(c, "https://example.com/invite/42", mujica.CopyButtonOptions{Label: "Copy link"})
|
||||
core.Use(c, core.Settings{})
|
||||
input.CopyButton(c, "https://example.com/invite/42", input.CopyButtonOptions{Label: "Copy link"})
|
||||
}`,
|
||||
Keys: "Tab focuses; Enter or Space copies. The copied state is announced.",
|
||||
},
|
||||
@@ -30,8 +30,8 @@ var essentialsPages = []page{
|
||||
ID: "483", Name: "HoldToConfirm", ZhName: "按住确认 危险操作", Category: "Essentials",
|
||||
Demo: holdToConfirmDemo,
|
||||
Code: `view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
if mujica.HoldToConfirm(c, "Delete project", mujica.HoldToConfirmOptions{}).Changed() {
|
||||
core.Use(c, core.Settings{})
|
||||
if input.HoldToConfirm(c, "Delete project", input.HoldToConfirmOptions{}).Changed() {
|
||||
// delete the project
|
||||
}
|
||||
}`,
|
||||
@@ -42,9 +42,9 @@ var essentialsPages = []page{
|
||||
Demo: bulkActionBarDemo,
|
||||
Code: `selected := 3
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
r := mujica.BulkActionBar(c, selected, mujica.BulkActionBarOptions{}, func() {
|
||||
mujica.Button(c, "Archive", mujica.ButtonOptions{Variant: mujica.Secondary})
|
||||
core.Use(c, core.Settings{})
|
||||
r := input.BulkActionBar(c, selected, input.BulkActionBarOptions{}, func() {
|
||||
input.Button(c, "Archive", input.ButtonOptions{Variant: input.Secondary})
|
||||
})
|
||||
if r.Changed() {
|
||||
selected = 0
|
||||
@@ -57,8 +57,8 @@ view := func(c *ui.Context) {
|
||||
Demo: scrubInputDemo,
|
||||
Code: `opacity := 0.6
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.ScrubInput(c, "Opacity", &opacity, mujica.ScrubInputOptions{Max: 1, Step: 0.1})
|
||||
core.Use(c, core.Settings{})
|
||||
input.ScrubInput(c, "Opacity", &opacity, input.ScrubInputOptions{Max: 1, Step: 0.1})
|
||||
}`,
|
||||
Keys: "The label is pointer-only; in the field, Up and Down step and typing sets the value.",
|
||||
},
|
||||
@@ -67,8 +67,8 @@ view := func(c *ui.Context) {
|
||||
Demo: currencyInputDemo,
|
||||
Code: `cents := int64(123450)
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.CurrencyInput(c, ¢s, mujica.CurrencyInputOptions{Symbol: "$", Label: "Price"})
|
||||
core.Use(c, core.Settings{})
|
||||
input.CurrencyInput(c, ¢s, input.CurrencyInputOptions{Symbol: "$", Label: "Price"})
|
||||
}`,
|
||||
Keys: "Tab focuses the field, which shows plain digits while focused and groups thousands when left.",
|
||||
},
|
||||
@@ -77,22 +77,22 @@ view := func(c *ui.Context) {
|
||||
Demo: maskedInputDemo,
|
||||
Code: `phone := ""
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.MaskedInput(c, &phone, mujica.MaskedInputOptions{Mask: "(999) 999-9999", Label: "Phone"})
|
||||
core.Use(c, core.Settings{})
|
||||
input.MaskedInput(c, &phone, input.MaskedInputOptions{Mask: "(999) 999-9999", Label: "Phone"})
|
||||
}`,
|
||||
Keys: "Arrows, Home and End move the caret; Backspace and Delete remove; paste keeps the characters that fit; Enter submits.",
|
||||
},
|
||||
{
|
||||
ID: "488", Name: "MentionInput", ZhName: "提及输入 @ 候选", Category: "Essentials",
|
||||
Demo: mentionInputDemo,
|
||||
Code: `text, mentions := "", []mujica.Mention(nil)
|
||||
people := []mujica.MentionCandidate{{ID: "u1", Name: "Alice"}, {ID: "u2", Name: "Bob"}}
|
||||
Code: `text, mentions := "", []input.Mention(nil)
|
||||
people := []input.MentionCandidate{{ID: "u1", Name: "Alice"}, {ID: "u2", Name: "Bob"}}
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.MentionInput(c, &text, &mentions, mujica.MentionInputOptions{
|
||||
core.Use(c, core.Settings{})
|
||||
input.MentionInput(c, &text, &mentions, input.MentionInputOptions{
|
||||
Label: "Comment",
|
||||
Candidates: func(q string) []mujica.MentionCandidate {
|
||||
var out []mujica.MentionCandidate
|
||||
Candidates: func(q string) []input.MentionCandidate {
|
||||
var out []input.MentionCandidate
|
||||
for _, p := range people {
|
||||
if strings.HasPrefix(strings.ToLower(p.Name), strings.ToLower(q)) {
|
||||
out = append(out, p)
|
||||
@@ -109,10 +109,10 @@ view := func(c *ui.Context) {
|
||||
Demo: choiceChipsDemo,
|
||||
Code: `var status []string
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.ChoiceChips(c, &status, []mujica.ToggleItem[string]{
|
||||
core.Use(c, core.Settings{})
|
||||
input.ChoiceChips(c, &status, []input.ToggleItem[string]{
|
||||
{Value: "open", Label: "Open"}, {Value: "closed", Label: "Closed"},
|
||||
}, mujica.ChoiceChipsOptions{Multiple: true, Label: "Status"})
|
||||
}, input.ChoiceChipsOptions{Multiple: true, Label: "Status"})
|
||||
}`,
|
||||
Keys: "The chips are one Tab stop; Left and Right move, skipping disabled chips; Space or Enter toggles.",
|
||||
},
|
||||
@@ -121,8 +121,8 @@ view := func(c *ui.Context) {
|
||||
Demo: knobDemo,
|
||||
Code: `gain := 35.0
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.Knob(c, &gain, mujica.KnobOptions{Label: "Gain", Ticks: 11})
|
||||
core.Use(c, core.Settings{})
|
||||
input.Knob(c, &gain, input.KnobOptions{Label: "Gain", Ticks: 11})
|
||||
}`,
|
||||
Keys: "Arrows step the value; Home and End go to the ends; drag up or down with the pointer.",
|
||||
},
|
||||
@@ -131,8 +131,8 @@ view := func(c *ui.Context) {
|
||||
Demo: verticalSliderDemo,
|
||||
Code: `level := 40.0
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.VerticalSlider(c, &level, mujica.VerticalSliderOptions{Step: 10, Label: "Level"})
|
||||
core.Use(c, core.Settings{})
|
||||
input.VerticalSlider(c, &level, input.VerticalSliderOptions{Step: 10, Label: "Level"})
|
||||
}`,
|
||||
Keys: "Up and Right raise the value, Down and Left lower it, Home and End go to the ends.",
|
||||
},
|
||||
@@ -141,23 +141,23 @@ view := func(c *ui.Context) {
|
||||
Demo: colorPaletteDemo,
|
||||
Code: `color := ui.Hex("#7D2034")
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.ColorPalette(c, &color, []mujica.ColorSwatch{
|
||||
core.Use(c, core.Settings{})
|
||||
input.ColorPalette(c, &color, []input.ColorSwatch{
|
||||
{Color: ui.Hex("#7D2034"), Name: "Wine"},
|
||||
{Color: ui.Hex("#AD9164"), Name: "Old gold"},
|
||||
{Color: ui.Hex("#355E80"), Name: "Slate blue"},
|
||||
}, mujica.ColorPaletteOptions{Custom: true, Label: "Tag color"})
|
||||
}, input.ColorPaletteOptions{Custom: true, Label: "Tag color"})
|
||||
}`,
|
||||
Keys: "The palette is one Tab stop; Left and Right move by one swatch, Up and Down by a row; Enter or Space chooses.",
|
||||
},
|
||||
{
|
||||
ID: "493", Name: "SignaturePad", ZhName: "签名板 手写", Category: "Essentials",
|
||||
Demo: signaturePadDemo,
|
||||
Code: `var strokes [][]mujica.SignaturePoint
|
||||
Code: `var strokes [][]input.SignaturePoint
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
if mujica.SignaturePad(c, &strokes, mujica.SignaturePadOptions{}).Changed() {
|
||||
_ = mujica.SignaturePath(strokes) // SVG path data to store
|
||||
core.Use(c, core.Settings{})
|
||||
if input.SignaturePad(c, &strokes, input.SignaturePadOptions{}).Changed() {
|
||||
_ = input.SignaturePath(strokes) // SVG path data to store
|
||||
}
|
||||
}`,
|
||||
Keys: "Tab focuses the pad; Delete or Backspace clears it. Drawing needs the pointer.",
|
||||
@@ -167,9 +167,9 @@ view := func(c *ui.Context) {
|
||||
Demo: bannerDemo,
|
||||
Code: `open := true
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
r := mujica.Banner(c, &open, "Maintenance tonight at 22:00.", mujica.BannerOptions{
|
||||
Severity: mujica.SeverityWarning,
|
||||
core.Use(c, core.Settings{})
|
||||
r := input.Banner(c, &open, "Maintenance tonight at 22:00.", input.BannerOptions{
|
||||
Severity: core.SeverityWarning,
|
||||
Action: "Details",
|
||||
})
|
||||
if r.Action {
|
||||
@@ -183,8 +183,8 @@ view := func(c *ui.Context) {
|
||||
Demo: undoToastDemo,
|
||||
Code: `open := true
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.UndoToast(c, &open, "Note deleted", mujica.UndoToastOptions{
|
||||
core.Use(c, core.Settings{})
|
||||
feedback.UndoToast(c, &open, "Note deleted", feedback.UndoToastOptions{
|
||||
OnUndo: func() {
|
||||
// restore the note
|
||||
},
|
||||
@@ -197,8 +197,8 @@ view := func(c *ui.Context) {
|
||||
Demo: masonryDemo,
|
||||
Code: `titles := []string{"Sea", "Forest", "Desert", "Glacier"}
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.Masonry(c, len(titles), mujica.MasonryOptions{
|
||||
core.Use(c, core.Settings{})
|
||||
input.Masonry(c, len(titles), input.MasonryOptions{
|
||||
Key: func(i int) string { return titles[i] },
|
||||
}, func(i int) {
|
||||
ui.Text(c, titles[i])
|
||||
@@ -211,11 +211,11 @@ view := func(c *ui.Context) {
|
||||
Demo: resizablePanelGroupDemo,
|
||||
Code: `var sizes []float32
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
r := mujica.ResizablePanelGroup(c, &sizes, []mujica.ResizablePanel{
|
||||
core.Use(c, core.Settings{})
|
||||
r := input.ResizablePanelGroup(c, &sizes, []input.ResizablePanel{
|
||||
{Label: "Files", Collapsible: true, Build: func() { ui.Text(c, "Files") }},
|
||||
{Label: "Editor", Build: func() { ui.Text(c, "Editor") }},
|
||||
}, mujica.ResizablePanelGroupOptions{})
|
||||
}, input.ResizablePanelGroupOptions{})
|
||||
if r.Committed {
|
||||
// save sizes
|
||||
}
|
||||
@@ -225,13 +225,13 @@ view := func(c *ui.Context) {
|
||||
{
|
||||
ID: "498", Name: "DockPanel", ZhName: "停靠面板 标签", Category: "Essentials",
|
||||
Demo: dockPanelDemo,
|
||||
Code: `var layout mujica.DockLayout
|
||||
Code: `var layout input.DockLayout
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
r := mujica.DockPanel(c, &layout, []mujica.DockItem{
|
||||
core.Use(c, core.Settings{})
|
||||
r := input.DockPanel(c, &layout, []input.DockItem{
|
||||
{ID: "files", Title: "Files", Build: func() { ui.Text(c, "Files") }},
|
||||
{ID: "terminal", Title: "Terminal", Build: func() { ui.Text(c, "$") }},
|
||||
}, mujica.DockPanelOptions{})
|
||||
}, input.DockPanelOptions{})
|
||||
if r.Changed() {
|
||||
// save layout
|
||||
}
|
||||
@@ -242,20 +242,20 @@ view := func(c *ui.Context) {
|
||||
ID: "499", Name: "QRCode", ZhName: "二维码", Category: "Essentials",
|
||||
Demo: qrCodeDemo,
|
||||
Code: `view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.QRCode(c, "https://example.com/mujica", mujica.QRCodeOptions{Level: mujica.QRQuartile})
|
||||
core.Use(c, core.Settings{})
|
||||
input.QRCode(c, "https://example.com/mujica", input.QRCodeOptions{Level: input.QRQuartile})
|
||||
}`,
|
||||
Keys: "Not focusable; assistive technology reads its name.",
|
||||
},
|
||||
{
|
||||
ID: "500", Name: "ActivityFeed", ZhName: "活动流 动态", Category: "Essentials",
|
||||
Demo: activityFeedDemo,
|
||||
Code: `events := []mujica.Activity{
|
||||
Code: `events := []feedback.Activity{
|
||||
{ID: "1", Actor: "Lin", Action: "commented on", Object: "Quarterly report", Time: time.Now()},
|
||||
}
|
||||
view := func(c *ui.Context) {
|
||||
mujica.Use(c, mujica.Settings{})
|
||||
mujica.ActivityFeed(c, events, mujica.ActivityFeedOptions{}).Size(380, 280)
|
||||
core.Use(c, core.Settings{})
|
||||
feedback.ActivityFeed(c, events, feedback.ActivityFeedOptions{}).Size(380, 280)
|
||||
}`,
|
||||
Keys: "Scroll with the wheel or the scrollbar; only rows in view are built.",
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user