●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Mobile phone mockup layout with status bar, app grid, dock and bottom navigation.
- Static app icon grid with hover scale effect and names.
- Dock with frequently used apps and simple navigation icons.
- Scoped CSS file for phone chrome, background image and icon styling.
## Key components
- Razor page and route: AndroidHomePage.razor (@page "/android-home").
- View model: AppViewModel (Name, IconClass, Color).
- Lifecycle: OnInitialized to populate Apps and DockApps lists.
- Razor patterns: foreach rendering of Apps and DockApps, anchor links for icons.
- Styling: AndroidHomePage.razor.css (scoped CSS) and Bootstrap utility classes (container-fluid, row, col-3, d-flex, justify-content-*, align-items-*).
- Icon set: FontAwesome icon classes (fas, fab, far).
## How it works
- Data is initialized in OnInitialized and stored in two Lists: Apps and DockApps.
- The Razor foreach loops render each AppViewModel into a circular app tile using IconClass and Color for inline styles.
- Clickable anchors are placeholders; no navigation or command handlers are wired.
- Visual interactions rely on CSS transitions (hover scale) and layout utilities (Bootstrap grid and flex helpers).
## Styling
- Uses a scoped CSS file (AndroidHomePage.razor.css) to create the phone frame, background, and component-specific styles.
- Bootstrap grid and utility classes provide the internal layout (container-fluid, row, col-3, gy-4, text-center).
- FontAwesome icon classes provide the glyphs; a Google font import (Roboto) is included in the scoped CSS.
- The phone size is fixed (380x800px) for a mockup; responsiveness is driven by Bootstrap utilities but the component is primarily designed as a fixed preview.
## Reuse steps
1. Add the Razor file to a Blazor project and include AppViewModel.cs in the shared/models folder.
2. Ensure Bootstrap CSS is included in the host project (default Blazor templates already include it) and add FontAwesome (cdn or npm) to _Host.cshtml or index.html.
3. Keep AndroidHomePage.razor.css as a scoped stylesheet or move styles to a global stylesheet as needed.
4. Register the route (the @page directive handles this) and add a navigation link in the app menu to view the mockup.
5. Replace static Apps/DockApps initialization with injected services or bind to a backend for dynamic data and implement click handlers or navigation.
## Limitations & next steps
- The page uses static in-memory data; integrate a service or API to provide dynamic app lists, favorites, or user-specific state.
- Anchor tags are placeholders; add NavigationManager or event handlers for tap/click behaviors and routing to app pages.
- Accessibility and keyboard navigation are minimal; add ARIA attributes, focus styles, and semantic controls for screen readers.
- The phone dimensions are fixed for a mockup; add responsive scaling or container queries to support different viewport sizes.
- Optional enhancements: touch gesture support, animated app launch transitions, lazy-loaded icons, and configurable themes.
This component is a single-page Instruct UI export and is editable in-project for integration and extension.