263 lines
9.6 KiB
Go
263 lines
9.6 KiB
Go
package main
|
|
|
|
var essentialsPages = []page{
|
|
{
|
|
ID: "481", Name: "SplitButton", ZhName: "拆分按钮 主操作 下拉", Category: "Essentials",
|
|
Demo: splitButtonDemo,
|
|
Code: `view := func(c *ui.Context) {
|
|
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
|
|
}
|
|
})
|
|
if r.Changed() {
|
|
// save
|
|
}
|
|
}`,
|
|
Keys: "Tab reaches the main half, then the menu half. Enter or Space runs the action; on the menu half, Enter, Space or Down opens the menu.",
|
|
},
|
|
{
|
|
ID: "482", Name: "CopyButton", ZhName: "复制按钮 剪贴板", Category: "Essentials",
|
|
Demo: copyButtonDemo,
|
|
Code: `view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
{
|
|
ID: "483", Name: "HoldToConfirm", ZhName: "按住确认 危险操作", Category: "Essentials",
|
|
Demo: holdToConfirmDemo,
|
|
Code: `view := func(c *ui.Context) {
|
|
core.Use(c, core.Settings{})
|
|
if input.HoldToConfirm(c, "Delete project", input.HoldToConfirmOptions{}).Changed() {
|
|
// delete the project
|
|
}
|
|
}`,
|
|
Keys: "Focus it and hold Space for the full duration; a click, Enter or a short Space does nothing.",
|
|
},
|
|
{
|
|
ID: "484", Name: "BulkActionBar", ZhName: "批量操作条 多选", Category: "Essentials",
|
|
Demo: bulkActionBarDemo,
|
|
Code: `selected := 3
|
|
view := func(c *ui.Context) {
|
|
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
|
|
}
|
|
}`,
|
|
Keys: "Tab moves through the bar's actions; Escape inside it clears the selection.",
|
|
},
|
|
{
|
|
ID: "485", Name: "ScrubInput", ZhName: "拖动数值 拖动标签", Category: "Essentials",
|
|
Demo: scrubInputDemo,
|
|
Code: `opacity := 0.6
|
|
view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
{
|
|
ID: "486", Name: "CurrencyInput", ZhName: "货币输入 金额 千分位", Category: "Essentials",
|
|
Demo: currencyInputDemo,
|
|
Code: `cents := int64(123450)
|
|
view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
{
|
|
ID: "487", Name: "MaskedInput", ZhName: "掩码输入 电话 卡号", Category: "Essentials",
|
|
Demo: maskedInputDemo,
|
|
Code: `phone := ""
|
|
view := func(c *ui.Context) {
|
|
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 := "", []input.Mention(nil)
|
|
people := []input.MentionCandidate{{ID: "u1", Name: "Alice"}, {ID: "u2", Name: "Bob"}}
|
|
view := func(c *ui.Context) {
|
|
core.Use(c, core.Settings{})
|
|
input.MentionInput(c, &text, &mentions, input.MentionInputOptions{
|
|
Label: "Comment",
|
|
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)
|
|
}
|
|
}
|
|
return out
|
|
},
|
|
})
|
|
}`,
|
|
Keys: "After @, Up and Down pick a candidate, Enter or Tab inserts it, Escape closes the list. Arrows step over a mention; Backspace removes it whole.",
|
|
},
|
|
{
|
|
ID: "489", Name: "ChoiceChips", ZhName: "筛选芯片 单选 多选", Category: "Essentials",
|
|
Demo: choiceChipsDemo,
|
|
Code: `var status []string
|
|
view := func(c *ui.Context) {
|
|
core.Use(c, core.Settings{})
|
|
input.ChoiceChips(c, &status, []input.ToggleItem[string]{
|
|
{Value: "open", Label: "Open"}, {Value: "closed", Label: "Closed"},
|
|
}, input.ChoiceChipsOptions{Multiple: true, Label: "Status"})
|
|
}`,
|
|
Keys: "The chips are one Tab stop; Left and Right move, skipping disabled chips; Space or Enter toggles.",
|
|
},
|
|
{
|
|
ID: "490", Name: "Knob", ZhName: "旋钮 调节", Category: "Essentials",
|
|
Demo: knobDemo,
|
|
Code: `gain := 35.0
|
|
view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
{
|
|
ID: "491", Name: "VerticalSlider", ZhName: "纵向滑块", Category: "Essentials",
|
|
Demo: verticalSliderDemo,
|
|
Code: `level := 40.0
|
|
view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
{
|
|
ID: "492", Name: "ColorPalette", ZhName: "预设色板 颜色", Category: "Essentials",
|
|
Demo: colorPaletteDemo,
|
|
Code: `color := ui.Hex("#7D2034")
|
|
view := func(c *ui.Context) {
|
|
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"},
|
|
}, 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 [][]input.SignaturePoint
|
|
view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
{
|
|
ID: "494", Name: "Banner", ZhName: "横幅 页面提示", Category: "Essentials",
|
|
Demo: bannerDemo,
|
|
Code: `open := true
|
|
view := func(c *ui.Context) {
|
|
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 {
|
|
// show the details
|
|
}
|
|
}`,
|
|
Keys: "Tab reaches the action and the dismiss button; Enter or Space presses them.",
|
|
},
|
|
{
|
|
ID: "495", Name: "UndoToast", ZhName: "撤销提示 倒计时", Category: "Essentials",
|
|
Demo: undoToastDemo,
|
|
Code: `open := true
|
|
view := func(c *ui.Context) {
|
|
core.Use(c, core.Settings{})
|
|
feedback.UndoToast(c, &open, "Note deleted", feedback.UndoToastOptions{
|
|
OnUndo: func() {
|
|
// restore the note
|
|
},
|
|
})
|
|
}`,
|
|
Keys: "It never takes the focus. Tab reaches Undo and the close button after the page; Escape inside closes it. Hover or focus pauses the countdown.",
|
|
},
|
|
{
|
|
ID: "496", Name: "Masonry", ZhName: "瀑布流 卡片", Category: "Essentials",
|
|
Demo: masonryDemo,
|
|
Code: `titles := []string{"Sea", "Forest", "Desert", "Glacier"}
|
|
view := func(c *ui.Context) {
|
|
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])
|
|
}).Size(380, 280)
|
|
}`,
|
|
Keys: "Scroll with the wheel or the scrollbar; only cards in view are built.",
|
|
},
|
|
{
|
|
ID: "497", Name: "ResizablePanelGroup", ZhName: "可调面板 分隔条", Category: "Essentials",
|
|
Demo: resizablePanelGroupDemo,
|
|
Code: `var sizes []float32
|
|
view := func(c *ui.Context) {
|
|
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") }},
|
|
}, input.ResizablePanelGroupOptions{})
|
|
if r.Committed {
|
|
// save sizes
|
|
}
|
|
}`,
|
|
Keys: "Tab focuses a divider; arrows move it, Home and End go to the limits, Enter collapses or restores a collapsible neighbor.",
|
|
},
|
|
{
|
|
ID: "498", Name: "DockPanel", ZhName: "停靠面板 标签", Category: "Essentials",
|
|
Demo: dockPanelDemo,
|
|
Code: `var layout input.DockLayout
|
|
view := func(c *ui.Context) {
|
|
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, "$") }},
|
|
}, input.DockPanelOptions{})
|
|
if r.Changed() {
|
|
// save layout
|
|
}
|
|
}`,
|
|
Keys: "Each zone's tabs are one Tab stop; Left and Right switch tabs. Shift+Alt+Left, Right or Down docks the focused tab to that edge; Shift+Alt+Up returns it to the center.",
|
|
},
|
|
{
|
|
ID: "499", Name: "QRCode", ZhName: "二维码", Category: "Essentials",
|
|
Demo: qrCodeDemo,
|
|
Code: `view := func(c *ui.Context) {
|
|
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 := []feedback.Activity{
|
|
{ID: "1", Actor: "Lin", Action: "commented on", Object: "Quarterly report", Time: time.Now()},
|
|
}
|
|
view := func(c *ui.Context) {
|
|
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.",
|
|
},
|
|
}
|