Confirm?

Are you sure you want to proceed?
L
Leigh Pointer

Document Management Library

Clone & Customize via AI

The Blazor Documentation Page presents a books listing built with Bootstrap cards, an InputSelect sort control and side panels. It demonstrates a card grid, sort toggle and a dark-mode switch.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Books listing rendered as a responsive Bootstrap card grid. - Sort control using InputSelect and a toggle for ascending/descending order. - Reusable BookCard component showing title, description and optional details (created/updated relative times). - ActionsSidebar component with EventCallback hooks for toggling details and dark mode. - Search input in the header (unbound HTML input in this page). ## Key components - Razor page: DocumentationPage.razor - Child components: BookCard.razor, ActionsSidebar.razor - Data model: BookViewModel (Title, Description, CreatedDate, UpdatedDate) - Blazor primitives: InputSelect, @bind-Value, EventCallback, foreach rendering ## How it works - Data is loaded in OnInitialized into an in-memory allBooks list and exposed via a SortedBooks accessor. - Sorting uses an enum (SortOption) and LINQ OrderBy/OrderByDescending based on sortBy and sortAscending flags; ToggleSortDirection flips the direction. - BookCard receives a BookViewModel via a [Parameter] and optionally shows footer details when ShowDetails is true. - ActionsSidebar exposes EventCallback parameters that the parent binds to inline lambdas to toggle local state (showDetails and isDarkMode). - The header search input is a plain HTML input and is not bound to any filter logic in this page. ## Styling - Uses Bootstrap layout classes (navbar, container-fluid, row, col-*) for responsive grid behavior. - Custom CSS in app.css provides card hover, sidebar panels, colors and a dark-mode modifier (.dark-mode) that flips palette and form control styles. - Font Awesome icon classes are used for visual affordances in cards, nav and sidebar. ## Reuse steps 1. Add a Blazor project and include Bootstrap and Font Awesome in index.html or _Host.cshtml. 2. Copy BookViewModel, DocumentationPage.razor, BookCard.razor, ActionsSidebar.razor and app.css into the project. 3. Register any required CSS references and ensure the components' namespaces are available in _Imports.razor. 4. Replace the sample in-memory data with application services or API calls and bind search input to a filter handler. 5. Wire authentication, data services, and localization as needed for production behavior. ## Limitations & next steps - This is a single-page UI scaffold generated by Instruct UI and focuses on front-end rendering; no persistent data store or API integration is included. - The search input is present but not wired to filtering logic; implement two-way binding or a search handler to filter SortedBooks. - Add validation or EditForm patterns if inline editing is required; consider pagination or virtualization for large data sets. - Connect to application services for data, implement routing for book detail pages, and secure actions with authentication/authorization.