PanoramicData.Blazor

UI components for Blazor. Try it out on our Demo page!

We needed the following Blazor UI components for several projects, including ReportMagic v3.0:

• Block Overlay
• Table
• Pager
• Tree
• Splitter
• File Explorer
• Context Menu
• Toolbar
• Form
• File Modal

Rather than buying them in, we made our own, Open Sourced them on Github and made them free (both speech and beer).

More will follow, as we need them. However, we are much more excited to see:

• what you need
• your Pull Requests

Please do contribute!

Dependencies

• Bootstrap (a default Library in a new blazor project) >= 5.1.3

Component Documentation

To improve our project's documentation and make it easier to work with our Blazor components, we've introduced a new automated documentation generation process.

What's New?

• ComponentDocumentation.md: A new markdown file in the root of the project that provides a comprehensive overview of all PD* Blazor components, including their parameters and descriptions.
• Automated Generation: This file is generated by a PowerShell script named GenerateDocs.ps1. This script scans all components and their parameters, extracting the XML summary comments to build the documentation.
• Improved Code Comments: All components have been updated with XML summary comments for their parameters to ensure the generated documentation is as complete as possible.

How to Use It

To update the documentation, simply run the GenerateDocs.ps1 script from a PowerShell terminal in the project root:

.\GenerateDocs.ps1

The script will automatically detect any changes to the documentation and prompt you to commit them. Please note that running this script is currently a manual step required to keep the documentation in sync with the code.

Your Contribution

To ensure the documentation remains complete and accurate, please add XML summary comments to any new components or parameters you create. For example:

/// <summary> /// A brief description of the parameter. /// </summary> [Parameter] public string MyParameter { get; set; }

This automated process ensures that our documentation stays up-to-date with the codebase, making it easier for everyone to understand how to use our components. It will also help new team members get up to speed more quickly.

Demo Application Documentation

The demo application includes comprehensive documentation for each component, accessible via the Documentation tab on each component's demo page.

Documentation Features

• Three-tab layout: Demo | Source | Documentation
• Interactive examples: Live component demos alongside code
• Progressive complexity: Examples build from basic to advanced
• Deep linking: Direct URLs to specific tabs and sections (e.g., /pdtiles?tab=docs#row-curves)
• Mobile responsive: Code and demo stack vertically on narrow screens

Creating Documentation for New Components

1. Create a PDComponentDocumentation.razor file in Pages/
2. Use the DocExample component for each example:

<DocExample Title="Example Title" AnchorId="unique-anchor" Code="@_codeString" Language="razor" DemoStyle="height: 300px;"> <DemoContent> <!-- Live component demo --> </DemoContent> <Description> <p>Explanation of the example...</p> </Description> </DocExample>

3. Add to the demo page:

<DemoSourceView SourceFiles="..."> <DocumentationContent> <PDComponentDocumentation /> </DocumentationContent> <ChildContent> <!-- Existing demo content --> </ChildContent> </DemoSourceView>

See PDTilesDocumentation.razor for a complete example.