Skip to content

Latest commit

 

History

History
58 lines (45 loc) · 2.63 KB

Readme.md

File metadata and controls

58 lines (45 loc) · 2.63 KB
Raw

Project SparkPlug is a collection of C# Razor Class Libraries that can be used with Blazor (wasm) applications.

  • SparkPlug - Accordion is an all-in-one multi-tiered accordion with animated arrow feature.
  • SparkPlug - AudioPlayer offers a simplified audio component with all the feature you want. When you need a custom player to play, pause, and track audio without the swiss-army-knife defaults of the regular html audio element.

Usage

Each C# Razor Class Library is optimized to work independently with only a project reference to the Library from a Blazor wasm applicaition and a @using statement in the _Imports.razor file.

  • all bootstrap icons, css, and javascript files are isolated and need no additional references or files to be added.

  • Technical aspects of the Blazor app implementation at this time.

    • Sdk

      • Microsoft.NET.Sdk.BlazorWebAssembly"

    • TargetFramework

      • net6.0

    • PackageReference

      • Microsoft.AspNetCore.Components. WebAssembly
      • Version "6.0.1"
      • Microsoft.AspNetCore.Components.WebAssembly.DevServer - Version="6.0.1"

SparkPlug Accordion

How to use it

Accordion has three parameters to create the component and an area to place content or additional accordion sub-elements.

  1. IsTopLevel
    • A bool that defines the blue color of a top level accordion element.
    • This allows nesting of addional accordion elements which can then be subsequently assigned ( false ) to enable a lighter blue heading color.
  2. HeaderContents
    • A string defining the text content of the accordion element.
  3. Size
    • An enum of HeadingSize.(h1,h2,h3,h4,h5).
  4. Content
    • Not a property, rather a space to place content or add additional accordion elements.

The Blazor project CylinderHead included in this project has sample tabs to show examples of component usage in action.

SparkPlug AudioPlayer

How to use it

AudioPlayer has two elements. Elements can be used independent of each other or together to create a complete audio component.

The SPAudioDetails component has three properties.

  1. ArtistName
    • A string defining the name of the artist or group.
  2. AudioTitle
    • A string defining the audio title.
  3. ImageSource
    • A string defining the file location of an image that is displayed in a 75px x 75px round image element.
    • It would be helpful to reduce any images to 75px x 75px.

The SPCustomAudioPlayer has only one parameter.

  1. AudioSource
    • A string defining the file location of the .mp3 audio file.

The Blazor project CylinderHead included in this project has sample tabs to show examples of component usage in action.