search

Sysinfocus / simple-ui

a Razor component library for Blazor, inspired by the shadcn/ui components.
MIT License
15 stars 0 forks source link

readme

Sysinfocus simple/ui

a Razor component library for Blazor, inspired by the shadcn/ui components.

Setup Instructions

  1. Download the NuGet package Sysinfocus.AspNetCore.Components to your project.

  2. Add @using Sysinfocus.AspNetCore.Components to your _import.razor file.

  3. Add builder.Services.AddSysinfocus("your-license-key"); to your Program.cs file. If you don't have license key, leave it empty and it will be treated as Trial version.

  4. Add the following CSS to your project's appropriate file as this depends upon the type of project being used.

    /// For .NET 8
<link rel="stylesheet" href="https://github.com/Sysinfocus/simple-ui/blob/master/_content/Sysinfocus.AspNetCore.Components/styles.css" />
<link rel="stylesheet" href="https://github.com/Sysinfocus/simple-ui/blob/master/_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css" />

/// For .NET 9
<link rel="stylesheet" href="https://github.com/Sysinfocus/simple-ui/blob/master/@Assets["_content/Sysinfocus.AspNetCore.Components/styles.css"]" />
<link rel="stylesheet" href="https://github.com/Sysinfocus/simple-ui/blob/master/@Assets["_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css"]" />

  5. Add the following initialization code to your MainLayout.razor or any layout file which you host the components.

    @inherits LayoutComponentBase
@inject Initialization init

<div @onclick="init.HandleMainLayoutClickEvent"> // this is required for some components to close on click outside of its hosting component.
  @Body
</div>

@code
{
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    // This initializes the theme for the components.
    // Then you can use init.ToggleTheme() to toggle between light and dark modes.    
    if (firstRender) await init.InitializeTheme(); 
  }
}

  6. For non-interactive Blazor SSR, you need to add the light or dark class to body tag manually as it can't initialize automatically.

  7. For more information, you can download the samples from this repo which has all these steps done and the projects are ready to explore.

  8. To see the demo of each component, check out Demo GitHub Repo

Release Notes

Release notes for Version 0.0.1.9

Updates / Bug fixes

  1. Updated Accordion component with bug fixes and new reduced animation.
  2. Fixed bugs in Widget, Checkbox and updated properties Style and Class for Badge components.

Release notes for Version 0.0.1.8

Updates / Bug fixes

  1. Fixed bug with CodeScanner component for missing assembly reference.
  2. Added FileManager component.

Release notes for Version 0.0.1.7

Updates / Bug fixes

  1. Added ClearState and PopFromState methods for StateManager to clear memory.
  2. Fixed issues with GeoLocation component registering DotNet reference.

Release notes for Version 0.0.1.6

Updates / Bug fixes

  1. SaveFilePicker component updated to fallback to regular download, in case any browser doesn't support the new APIs.
  2. Added new method to preload JS and CSS either all or some of the dependencies using PreloadJSAndCSSDependencies method of the Initialization class. This needs to be called in the Layouts.
  3. Fixed tab focus issues for Dialog and Alert Dialog components.

Release notes for Version 0.0.1.5

Updates / Bug fixes

  1. SpeechToText component added.
  2. TextToSpeech component added.
  3. Added new property ReadOnly for Input and TextArea components.
  4. Fixed UI for Verify Human component.
  5. Now the JS and CSS dependencies are used from local components' folder. If you want them to be served from CDNs, you can use the AddSysinfocus method's jsCssFromCDN parameter and set it to true, which toggle's this feature.

Release notes for Version 0.0.1.4

Bug fixes

  1. Fixed the issue in Popover component - GitHub Issues #2.
  2. Verify Human component added.

Release notes for Version 0.0.1.3

Bug fixes

  1. Fixed the issue in Select component.

Release notes for Version 0.0.1.2

Updates / Bug fixes

  1. Added new event for marker movement OnMarkerMoved for Maps component.
  2. Added DistanceKilometers and DistanceMiles methods to get distance between 2 locations in Geolocation component.
  3. Treeview component added.
  4. Following components have been made available in free tier.
    • Accordion
    • Alert
    • Dialog
    • Navigation Menu
    • Select
    • Table

Release notes for Version 0.0.1.1

Bug fixes

  1. Fixed input issue and dark theme forecolor issue in ComboBox component.
  2. Fixed the Accordion component animation.
  3. Fixed the tab button spacings in Tabs component for vertical direction.
  4. Fixed the Signature component bounce issue when using on touch devices.
  5. Updated Button component with Success, Warning and Info types.
  6. Updated Alert component with Success, Warning and Info types.
  7. Updated Badge component with Success, Warning and Info types.

For more information, you can download the samples from this repo which has all these steps done and the projects are ready to explore. To see the demo of each component, check out Demo GitHub Repo

Have issues?

Open an issue on this repo or email to issues@sysinfocus.com