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
ContentPanel
Collapsible section with title, status, and action buttons. The most-used layout component.
Overlay
Edge-docked sliding panel — left, right, top, or bottom. Resizable, minimizable.
Drawer
Bottom-anchored, vertically resizable panel for inline detail views.
Floating
Floating element positioned relative to a trigger — popovers, tooltips, dropdown panels.
ResourceTabular
Standard list/detail page layout for resource pages.
Spacer
Empty box for adding fixed-size space between elements.
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) |