Layout and Navigation

布局与导航

Use these components to build responsive layouts, navigation structures, and progressive disclosure without dropping down to custom templates.

使用这些组件构建响应式布局、导航结构和渐进展示交互，而不必退回自定义模板。

paw.Containerpaw.Rowpaw.Panelpaw.Linkpaw.Navbarpaw.Dialog

Covered APIs

涵盖 API

API 接口	Description 说明
`Container, Row, Panel`	Core layout primitives for page shells, cards, and responsive columns. 页面壳、卡片和响应式列布局的核心原语。
`Link, Links, Link.Button(), Link.Primary(), Link.Success(), Link.Danger()`	Text links, button-style actions, and grouped action rows. 文本链接、按钮式动作以及成组动作按钮。
`Navbar, NavTabs`	Top-level navigation and tabbed sub-navigation. 顶层导航与标签页式子导航。
`Popover, Collapse`	Inline hints and expandable content. 行内提示和可展开内容。
`Dialog, ConfirmLink`	Modal workflows and confirmation wrappers around link actions. 模态框工作流，以及围绕链接动作的确认封装。
`Pagination`	Turns a base URL and item counts into page links. 根据基础 URL 和总条目数生成分页链接。

Minimal Example: Panels in a responsive row

最小示例：响应式行布局中的面板

Most pages start with a container, then add rows and panels for the actual content.

大多数页面都从容器开始，再用行布局和面板承载真实内容。

Overview

概览

Rows handle the responsive layout for you.

Row 会帮你处理响应式布局。

Primary action

Actions

操作

Links can stay inline or become grouped buttons.

链接既可以保持行内，也可以组合成按钮组。

Save Delete

body := paw.Container{
	Body: paw.Row{
		ColumnMax: 2,
		Columns: paw.List{
			paw.Panel{
				Title: paw.String("Overview"),
				Body:  paw.String("Rows handle the responsive layout."),
			},
			paw.Panel{
				Title: paw.String("Actions"),
				Body: paw.Links{
					{Name: "Save"}.Success(),
					{Name: "Delete"}.Danger(),
				},
			},
		},
	},
}

Advanced Example: Tabs, disclosure, dialogs, and paging

进阶示例：标签页、展开区、对话框与分页

Navigation and interaction patterns can stay in the same composition model as the rest of the page.

导航和交互模式可以和页面其他部分保持同一套组合模型。

Hover for a reminder.

悬停可查看提示。

Show hidden details

Collapse keeps secondary content nearby without turning it into a new page.

Collapse 可以把次级内容留在当前页面，而不必单独跳转。

Open dialog

1 2 3 4 5 6 7 8 9 10 11

paw.Navbar{
	Brand: paw.Link{Name: "Paw Docs", Url: "/"},
	Links: []paw.Link{
		{Name: "Core", Url: "/CorePrimitives"},
		{Name: "Forms", Url: "/FormsBasic"},
	},
}

paw.Link{Url: template.URL("tel:+123456789"), Icon: "telephone-forward"}

paw.Collapse{
	Trigger: paw.Link{Name: "Show details"}.Button().Primary(),
	Body:    paw.String("Collapsed content"),
}

Notes and Related Docs

说明与相关文档

Notes

说明

Link.Url accepts string or template.URL. Reserve template.URL for trusted values such as tel:, custom schemes, or deliberate javascript: hooks.

Link.Url 支持 string 和 template.URL。template.URL 应仅保留给可信值，例如 tel:、自定义协议或你明确控制的 javascript: hook。

ConfirmLink is implemented with Dialog under the hood, so it is best for short confirmation flows instead of large forms.

ConfirmLink 底层由 Dialog 实现，因此更适合短确认流程，而不是承载大型表单。

Pagination preserves the existing query string and only rewrites the page parameter.

Pagination 会保留现有 query string，只重写分页参数。

Notes

Related Pages