●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Tabbed navigation using Bootstrap nav-tabs and tab-pane content areas.
- Category-based card lists rendered with foreach loops (Electronics, Books, Home Goods).
- Responsive Bootstrap card grid (col-lg-6) with images, titles, content and footer actions.
- Simple client-side state for active tab switching via @onclick and a backing string field.
## Key components
- Razor markup: nav, ul.nav-tabs, div.tab-content, div.tab-pane, foreach loops.
- Data model: CardInfoModel (Title, Content, ImageUrl).
- Lifecycle: OnInitialized for sample data population.
- Events/state: @onclick, SetActiveTab, private string activeTab, @bind-like conditional rendering.
- HTML/CSS: Bootstrap classes (container, row, card, btn, col-lg-6) and Font Awesome icons in tab headers.
## How it works
- OnInitialized seeds three List<CardInfoModel> collections used by the three tab panes.
- Tab buttons call SetActiveTab(tabName) which updates the activeTab field and triggers a rerender; each pane applies conditional classes ("show active") based on activeTab.
- Cards render image, title and text; footer contains action buttons with placeholder links.
- No server calls or services are invoked in this component; it is purely client-side rendering of in-memory data.
## Styling
- Uses Bootstrap layout and utility classes: container, nav nav-tabs, tab-content, tab-pane, row, col-lg-6, card, card-img-top, card-body, card-footer, btn btn-primary.
- Incorporates Font Awesome icon classes in tab buttons (requires icon CSS in host page).
- Responsive behavior relies on Bootstrap grid (col-lg-6 for two-column on large screens, single column on smaller viewports).
## Reuse steps
1. Add the CardInfoModel class to the project (or adapt an existing product model).
2. Ensure Bootstrap CSS (and optionally Font Awesome) is included in index.html/_Host.cshtml.
3. Drop the Razor file into a Blazor Pages/Components folder and register the route (already has @page).
4. Replace sample data in OnInitialized with real data via injected service (e.g., IProductService) or API calls.
5. Add accessibility improvements (keyboard focus handling, aria-controls/aria-selected) and lazy loading for large images.
## Limitations & next steps
- This is a single-page UI example generated by Instruct UI and does not include data services, DI registration, or authentication.
- No server-side paging, filtering, or sorting is implemented; large datasets will need virtualization or paging.
- Accessibility attributes for tabs (aria roles/states) and keyboard navigation are minimal and should be added.
- Replace placeholder links and images with real URLs, wire an API or injected service for dynamic content, and add tests for tab behavior.