ankow
OverviewBreadCrumbButtonButtonGroupClipboardDialogDirectoryViewFileUploaderFormTextInputPasswordInputEmailInputNumberInputDateTimeInputTagInputCheckBoxRadioButtonSwitchFormGroupInputGroupIconLayoutMainLayoutTopBarBottomBarListItemMenuMultiSelectNotificationOfflineBannerPopoverProgressBarSaveIndicatorSectionItemSettingsItemSingleSelectSplitLayoutSpinnerTabViewTableViewTooltipTextOverflowTreeViewLayout Components
MainLayout
The main application layout container with slots for header, body, footer, and dialogs. The body section is scrollable while header and footer remain fixed.
Structure
This is the main content area. It scrolls independently while the header and footer stay fixed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Usage
MainLayout Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | Boolean | true | Add margin between header and body |
MainLayout Slots
| Slot | Description |
|---|---|
| dialogs | Container for dialogs (rendered outside layout flow) |
| header | Fixed header area (typically TopBar) |
| body | Scrollable main content area |
| footer | Fixed footer area (typically BottomBar) |
TopBar
A responsive header bar with three slot areas (left, center, right) for navigation and actions.
Basic TopBar
With Center Grow
Use center-grow to make the center section expand to fill available space.
Usage
TopBar Props
| Prop | Type | Default | Description |
|---|---|---|---|
| leftGrow | Boolean | false | Make left slot expand to fill space |
| centerGrow | Boolean | false | Make center slot expand to fill space |
| rightGrow | Boolean | false | Make right slot expand to fill space |
| mobileCollapse | Boolean | true | Stack slots vertically on mobile screens |
TopBar Slots
| Slot | Description |
|---|---|
| left | Left section content (logo, breadcrumb, etc.) |
| center | Center section content (search, title, etc.) |
| right | Right section content (actions, user menu, etc.) |
BottomBar
A simple footer bar component with default Cloudron branding or custom content.
Default BottomBar
Custom Content
Usage
BottomBar Slots
| Slot | Description |
|---|---|
| default | Footer content (defaults to Cloudron branding) |