Header

为应用提供标题与主要操作区。

实时预览

正在加载预览…

参数配置

标题 label

全部字段 6

HeaderOptions

Title

Description

Leading

Actions

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
nui.HeaderLayout(c.Key("header"), t, nui.HeaderOptions{Title: "NuxtUI Go", Description: "Native components, familiar design", Actions: func(c *ui.Context, t nui.Theme) {
	nui.Button(c.Key("new"), t, "New project", nui.ButtonOptions{Leading: lucide.Plus()})
}})

使用说明

修改标题查看 HeaderLayout 的标题、说明与操作区组合。New project 按钮仅展示布局，应用可在 Actions 回调中添加自己的按钮和行为。

API 参考

HeaderLayout

源码

func HeaderLayout(c *ui.Context, t Theme, o HeaderOptions) ui.Element

HeaderOptions

源码

type HeaderOptions struct {
	Title, Description string
	Leading, Actions   func(*ui.Context, Theme)
	Decoration
}

字段	类型	说明
`Title`	`string` Go 零值: `""`	标题文字。
`Description`	`string` Go 零值: `""`	补充说明文字。
`Leading`	`func(*ui.Context, Theme)` Go 零值: `nil`	内容前方的 SVG 图标。
`Actions`	`func(*ui.Context, Theme)` Go 零值: `nil`	附加操作或操作区域构建函数。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。