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

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