Sidebar

组合可折叠的应用侧边栏。

实时预览

正在加载预览…

参数配置

标题 label侧栏宽度 width

全部字段 8

SidebarOptions

Title

ToggleLabel

Width

CollapsedWidth

Header

Footer

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
// Keep s (example state) outside the view. See the complete example.
ui.Row(c.Key("layout")).FillWidth().Height(260).Children(func() {
	nui.Sidebar(c.Key("sidebar"), t, &s.Collapsed, nui.SidebarOptions{Title: "Workspace", Width: nui.Set(float32(220))}, func(c *ui.Context, t nui.Theme, collapsed bool) {
		nui.Button(c.Key("home"), t, "Home", nui.ButtonOptions{Variant: nui.Ghost, Leading: lucide.House()})
	})
	ui.Text(c, "Workspace").Padding(20)
})

使用说明

切换侧边栏折叠状态，并调整展开宽度。示例把 Sidebar 与工作区放在同一 Row 中；应用导航可以在内容回调中根据 collapsed 状态调整展示。

API 参考

Sidebar

源码

func Sidebar(c *ui.Context, t Theme, collapsed *bool, o SidebarOptions, content func(*ui.Context, Theme, bool)) ui.Element

SidebarOptions

源码

type SidebarOptions struct {
	Title, ToggleLabel    string
	Width, CollapsedWidth Optional[float32]
	Header, Footer        func(*ui.Context, Theme)
	Decoration
}

字段	类型	说明
`Title`	`string` Go 零值: `""`	标题文字。
`ToggleLabel`	`string` Go 零值: `""`	折叠或展开操作的可访问名称。
`Width`	`Optional[float32]` Go 零值: `unset`	宽度，单位为 DIP。
`CollapsedWidth`	`Optional[float32]` Go 零值: `unset`	侧边栏折叠后的宽度。
`Header`	`func(*ui.Context, Theme)` Go 零值: `nil`	同步构建标题区域。
`Footer`	`func(*ui.Context, Theme)` Go 零值: `nil`	同步构建底部区域。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。