Overview
Top-level layout primitives in @fleetbase/ember-ui — Layout::Container, Layout::Header, Layout::Sidebar, Layout::Section, plus the standalone <Overlay>, <Drawer>, <ContentPanel>, and <Spacer>.
Layout Overview
@fleetbase/ember-ui ships two complementary sets of layout primitives:
- Top-level scaffolding —
<Layout::Container>,<Layout::Header>,<Layout::Sidebar>,<Layout::Section>,<Layout::Main>. These compose the overall page chrome. - Inline layout helpers —
<ContentPanel>,<Overlay>,<Drawer>,<Spacer>,<Floating>. These structure regions inside a page.
Most extension authors don't compose <Layout::*> directly — the host console already provides the chrome. But you'll use the inline helpers extensively.
Top-Level Scaffolding
| Component | Purpose |
|---|---|
<Layout::Container> | The outermost shell |
<Layout::Header> | Top app bar with logo, search, notifications |
<Layout::Sidebar> | Left navigation rail |
<Layout::Main> | The primary content area |
<Layout::Section> | A bordered scrollable panel inside Main |
<Layout::MobileNavbar> | Mobile-tablet bottom nav |
These are typically composed once at the application level.
Inline Layout Helpers
Choosing Between Overlay, Drawer, and Modal
| Use case | Component |
|---|---|
| Centered, blocking dialog | Modals |
| Slide-out side panel (e.g. detail view) | <Overlay> |
| Bottom-anchored tray (e.g. inline editor) | <Drawer> |
| Inline collapsible section in the page | <ContentPanel> |
Source
| File | Description |
|---|---|
addon/components/layout/ | Top-level layout components |
addon/components/ | Inline layout helpers (<name>.hbs/.js) |
Core Concepts
How ember-ui is structured — components, helpers, modifiers, services, and the conventions that make every Fleetbase extension feel native.
ContentPanel
<ContentPanel> is the canonical collapsible section used to organize forms, settings, and detail views. Supports titles, status badges, action buttons, and permission gating.