Basic Components
Page Container
The page container component provides a unified page layout structure that automatically handles spacing for navigation bars and bottom navigation.
Features
- Consistent page layout
- Automatic navigation bar spacing
- Responsive design
- Support for mobile device safe areas
- Mobile device adaptation
- Loading state overlay
- Multiple display modes
- Navigation bar display control
Usage Examples
Basic Usage
The most basic page layout with standard content area.
Fullscreen Mode
Fullscreen mode locks the page height to viewport height, suitable for scenarios requiring fixed height.
Full Width Mode
Full width mode removes maximum width limitation, suitable for data visualization, maps, and other scenarios requiring maximum space.
Hide Navigation Bar
Use this mode when you need to maximize content area or create custom navigation.
Loading State
Display loading state when the page is loading data or processing requests.
Error Page
When a page encounters an error and needs to display an error message, you can set the error property to show an error page.
Authentication Check
You can set the auth property to control page access permissions, including requiring user login, admin privileges, or just checking authentication status.
Properties
Property | Basic component module for translation keys shared across all component documentation pages | Type | Default |
---|---|---|---|
busy | Show loading overlay | boolean | false |
mode | Page display mode (normal, fullscreen, full-width) | string | normal |
showNav | Whether to show navigation bar | boolean | true |
auth | Page access control (null (no auth required), login (login required), admin (admin privileges required), check (check auth state only)) | string | null |
error | Display error page, when set this property will replace page content, only used when page has an error | string | null |