Skip to content
Documentation
Components
Layout
ThreeColumn

ThreeColumn

The three-column layout of package navsplitview adds a sidebar to the TwoColumn layout. From left to right it shows sidebar, content and detail, e.g. folders, files and a preview. On large windows the sidebar collapses into a toggle button; on small and medium windows only one column is shown at a time.

ThreeColumn

return navsplitview.ThreeColumn(navsplitview.NavLinks{
	"folders": VStack(
		navsplitview.ListItem(navsplitview.KindContent, "work", Text("Work")).
			DeleteTarget(navsplitview.KindDetail),
		navsplitview.ListItem(navsplitview.KindContent, "private", Text("Private")).
			DeleteTarget(navsplitview.KindDetail),
	).FullWidth(),
	"none": Text("Nothing selected"),
	"work": VStack(
		navsplitview.ListItem(navsplitview.KindDetail, "report", Text("Report.pdf")),
	).FullWidth(),
	"private": VStack(
		navsplitview.ListItem(navsplitview.KindDetail, "photo", Text("Photo.jpg")),
	).FullWidth(),
	"report": Text("Quarterly report"),
	"photo":  Text("Holiday photo"),
}).Default("folders", "work", "none").
	WidthSidebar(L160).
	WidthContent(L200).
	BackgroundColorSidebar(ColorCardBody).
	Frame(Frame{Width: L880, Height: L160})

DeleteTarget(KindDetail) clears the detail column when another folder is selected. The screenshot was taken in a window 1300dp wide. The factories, ListItem and the navigation functions are described on the TwoColumn page; NavigateSidebar opens a view in the sidebar from code.

Constructors

ConstructorDescription
navsplitview.ThreeColumn(nav Factory) TThreeColumnCreates a three-column layout with the given navigation factory; the order is sidebar, content, detail.

Methods

MethodDescription
AlignmentContent(alignment ui.Alignment) TThreeColumnSets the alignment of the content column.
AlignmentDetail(alignment ui.Alignment) TThreeColumnSets the alignment of the detail column.
AlignmentSidebar(alignment ui.Alignment) TThreeColumnSets the alignment of the sidebar column.
BackgroundColorContent(bg ui.Color) TThreeColumnSets the background color of the content column.
BackgroundColorDetail(bg ui.Color) TThreeColumnSets the background color of the detail column.
BackgroundColorSidebar(bg ui.Color) TThreeColumnSets the background color of the sidebar column.
Default(sidebar, content, detail ViewID) TThreeColumnSets the views shown when nothing is selected.
Frame(frame ui.Frame) TThreeColumnSets the frame of the layout.
FullWidth() TThreeColumnSets the width to the full available width.
ID(id string) TThreeColumnSets the ID which distinguishes several split views on one page.
WidthContent(width ui.Length) TThreeColumnSets the width of the content column, 25rem by default.
WidthDetail(width ui.Length) TThreeColumnSets the width of the detail column, the remaining space by default.
WidthSidebar(width ui.Length) TThreeColumnSets the width of the sidebar column, 20rem by default.

The alignment setters only take effect on extra-large windows; in the other layouts the columns are centered.

Related