README
¶
RightPanel Layout
Distribution
RightPanel implements a grid-based distribution inspired by the pa100t shell:
- Title Row: Top horizontal band.
- Content Area: A grid containing the Main Article (left) and Aside Panel (right).
Styling
Uses semantic tokens from github.com/tinywasm/css for all colors and spacing.
Proportions are controlled via --rp-main-width and --rp-aside-width.
Documentation
¶
Index ¶
- Constants
- type RightPanel
- func (r *RightPanel) AsidePanelID() string
- func (r *RightPanel) MainPanelID() string
- func (r *RightPanel) Render() *Element
- func (r *RightPanel) RenderCSS() *css.Stylesheet
- func (r *RightPanel) RenderSheet() *style.Sheet
- func (r *RightPanel) ShowAside()
- func (r *RightPanel) ShowMain()
- func (r *RightPanel) WidgetKind() widget.Kind
- func (r *RightPanel) WidgetName() widget.Name
Constants ¶
const NameRightPanel widget.Name = "rp"
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type RightPanel ¶
type RightPanel struct {
Element
// Module provides the ID for the root wrapper element.
Module layout.Module
// Title is rendered as <h1> in the header.
Title string
// Head is rendered beside the <h1> (e.g. status badge, icon).
Head Component
// HeadControls is rendered below the title row (e.g. select with search).
HeadControls Component
// Article is the main content area.
Article Component
// AsideControls is rendered at the top of the aside panel (e.g. search + filter).
AsideControls Component
// Aside is the content area of the aside panel (e.g. detail view, info card).
Aside Component
// content (e.g. a primary action button). It keeps its size while the
// content between it and AsideControls takes the slack.
AsideFooter Component
}
RightPanel is a two-column layout skeleton:
- Left: main content area with header (title + controls) and article.
- Right: aside panel with its own header (controls) and content.
All slots are optional. A nil slot is simply not rendered. The layout does not define what the slots contain — that is the consumer's job.
IMPORTANT: All Component implementors passed as slots MUST embed Element as a value, not as a pointer. See tinywasm/dom interface.dom.go for details.
Usage:
panel := &rightpanel.RightPanel{
Module: myModel, // implements ModelName() string
Title: "Users",
HeadControls: mySelectSearch,
Article: myTable,
AsideControls: myFilterBar,
Aside: myDetailPanel,
AsideFooter: myActionButton,
}
panel.Render()
func (*RightPanel) AsidePanelID ¶ added in v0.1.2
func (r *RightPanel) AsidePanelID() string
func (*RightPanel) MainPanelID ¶ added in v0.1.2
func (r *RightPanel) MainPanelID() string
MainPanelID and AsidePanelID identify the two scroll-snap targets of the mobile strip. A host that drives the snap (see ShowMain/ShowAside) does not need them; they are exported because a host may want to link to a panel.
func (*RightPanel) Render ¶
func (r *RightPanel) Render() *Element
Render builds the layout element tree. Implements ViewRenderer.
func (*RightPanel) RenderCSS ¶
func (r *RightPanel) RenderCSS() *css.Stylesheet
RenderCSS implements visual contract for rightpanel layout.
func (*RightPanel) RenderSheet ¶ added in v0.1.0
func (r *RightPanel) RenderSheet() *style.Sheet
RenderSheet returns the style Sheet containing the rules for rightpanel.
func (*RightPanel) ShowAside ¶ added in v0.1.2
func (r *RightPanel) ShowAside()
func (*RightPanel) ShowMain ¶ added in v0.1.2
func (r *RightPanel) ShowMain()
ShowMain brings the main panel into view; ShowAside brings the aside back.
Both are no-ops on a wide screen, and that guard is the whole point: ScrollIntoView walks EVERY scrollable ancestor, not just the nearest one the caller had in mind. Side by side there is nothing to scroll here, so an unguarded call reached the platform's module deck instead and slid the whole application to the next module.
func (*RightPanel) WidgetKind ¶ added in v0.0.23
func (r *RightPanel) WidgetKind() widget.Kind
func (*RightPanel) WidgetName ¶ added in v0.0.23
func (r *RightPanel) WidgetName() widget.Name
Source Files