Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Panel

Panel creates a local structured work area inside a page or workspace. It provides fixed regions for header, subheader, sidebar, scrollable content, aside, and footer.

Use it for admin modules, settings areas, editors, detail panes, inspectors, dashboard sections, and other local surfaces that need their own header, footer, side columns, and scrollable body.

Panel is not the top-level application shell; use Layout for that. It is also not a small content card; use Card for that. Use Drawer for overlay side panels, and TailwindCSS grid or flex for simple layout.

Key features:
  • Dedicated regions for header, subheader, content, sidebar, aside, and footer.
  • Scrollable content area through ngs-panel-content.
  • Optional absolute mode to fill the parent bounds.
  • TailwindCSS classes can be used for sizing, borders, spacing, and inner layout.

Properties

PropTypeDefault
absolute
Whether the panel should have absolute positioning
booleanfalse

Directives / Components

SelectorDescription
ngs-panel-headerHeader section of the panel
ngs-panel-subheaderSubheader section of the panel
ngs-panel-sidebarSidebar section of the panel
ngs-panel-contentMain content section of the panel
ngs-panel-asideAside section of the panel
ngs-panel-footerFooter section of the panel