Page Template

Application page shell: toolbar (title, primary/secondary actions), main content slots, optional details panel (drawer mode).

HTML tag: c-ed3bf938c6331494cbfcd7679ed8ae97c

When to use

• full application page with toolbar and body
• list/detail page with resizable details pane
• app shell with primary and secondary actions

Props

Prop	Type	Default	Description
layout	string	toolbar-top
primary_actions	array
secondary_actions	array
title	string
details_open	boolean
details_mode	string	drawer
density	string	comfortable
hidden_actions	array
context_event	string	context:update
footer_sticky	boolean	true
title_position	string	toolbar
subtitle	string
details_position	string	right
details_resizable	boolean	true
details_resize_max	number	960
details_title	string
details_width	string
details_height	string
details_actions	array
details_actions_placement	string	footer
details_backdrop_close	boolean	true
context	object
context_mode	string	uncontrolled
context_merge_strategy	string	shallow
resolved_context	object
fit_to_parent	boolean
disable_background	boolean	false

Rules

• Use layout (e.g. toolbar-top) and slots for page regions.
• primary_actions / secondary_actions arrays like ab-actions; listen for action event with detail.id.
• details_open + details_mode for side details; details:opened|closed|resized events.
• context / page:context-changed for shared page state.

Events

Event	Detail
action	id: string, meta: object, context: object
details:closed
details:opened
details:resized	width: string, height: string
page:context-changed	value: object

Methods

Signature	Description
refreshLayout(force: any)
getContext()
setContext(partial: object)

What to avoid

Do not use for a single modal (ab-dialog). Do not use for dashboard KPI layout (ab-dashboard).

Example

<c-ed3bf938c6331494cbfcd7679ed8ae97c .title=${'Orders'} .primary_actions=${actions} .details_open=${showDetail} @action=${onAction}>...</c-ed3bf938c6331494cbfcd7679ed8ae97c>