Shoelace Style Blazor Components

This repository contains Blazor components built on top of the Shoelace library, enabling developers to use Shoelace UI elements in their Blazor applications.

Getting Started

Prerequisites

• .NET SDK (8.0 or higher)
• A Blazor application (Blazor Server or Blazor WebAssembly)

Installation

1. Install the nuget package:

   dotnet add package Shoelace.Style --version 1.0.0.4

2. Download the latest version of the @shoelace-style package. We suggest using libman with this configuration:

   {
     "version": "1.0",
     "defaultProvider": "jsdelivr",
     "libraries": [
       {
         "library": "@shoelace-style/shoelace@2.17.1",
         "destination": "wwwroot/shoelace/",
         "files": [
           "cdn/!(react)/**/*.{js,svg,css}",
           "cdn/*.js"
         ]
       }
     ]
   }

3. Add the links to reference the css and js in index.html/App.razor/_Host.cshtml:

    <link rel="stylesheet"
          media="(prefers-color-scheme:light)"
          href="shoelace/cdn/themes/light.min.css" />
   
    <link rel="stylesheet"
          media="(prefers-color-scheme:dark)"
          href="shoelace/cdn/themes/dark.min.css"
          onload="document.documentElement.classList.add('sl-theme-dark');" />

    <script src="shoelace/cdn/shoelace-autoloader.min.js" type="module" data-shoelace="/shoelace/cdn"></script>

   Or follow the instructions in the Installation page of the main site.

Usage

Import the main namespaces inside the _Import.razor file:

@using Shoelace.Style.Components
@using Shoelace.Style.Services

Add the service collection extension in you Program.cs:

builder.Services.AddShoelaceStyle();

Shoelace Components Checklist

• Alert (<sl-alert>)
• Animated Image (<sl-animated-image>)
• Animation (<sl-animation>)
• Avatar (<sl-avatar>)
• Badge (<sl-badge>)
• Breadcrumb (<sl-breadcrumb>)
• Breadcrumb Item (<sl-breadcrumb-item>)
• Button (<sl-button>)
• Button Group (<sl-button-group>)
• Card (<sl-card>)
• Carousel (<sl-carousel>)
• Carousel Item (<sl-carousel-item>)
• Checkbox (<sl-checkbox>)
• Color Picker (<sl-color-picker>)
• Copy Button (<sl-copy-button>)
• Details (<sl-details>)
• Dialog (<sl-dialog>)
• Divider (<sl-divider>)
• Drawer (<sl-drawer>)
• Dropdown (<sl-dropdown>)
• Format Bytes (<sl-format-bytes>)
• Format Date (<sl-format-date>)
• Format Number (<sl-format-number>)
• Icon (<sl-icon>)
• Icon Button (<sl-icon-button>)
• Image Comparer (<sl-image-comparer>)
• Include (<sl-include>)
• Input (<sl-input>)
• Menu (<sl-menu>)
• Menu Item (<sl-menu-item>)
• Menu Label (<sl-menu-label>)
• Mutation Observer (<sl-mutation-observer>)
• Option (<sl-option>)
• Popup (<sl-popup>)
• Progress Bar (<sl-progress-bar>)
• Progress Ring (<sl-progress-ring>)
• QR Code (<sl-qr-code>)
• Radio (<sl-radio>)
• Radio Button (<sl-radio-button>)
• Radio Group (<sl-radio-group>)
• Range (<sl-range>)
• Rating (<sl-rating>)
• Relative Time (<sl-relative-time>)
• Resize Observer (<sl-resize-observer>)
• Select (<sl-select>)
• Skeleton (<sl-skeleton>)
• Spinner (<sl-spinner>)
• Split Panel (<sl-split-panel>)
• Switch (<sl-switch>)
• Tab (<sl-tab>)
• Tab Group (<sl-tab-group>)
• Tab Panel (<sl-tab-panel>)
• Tag (<sl-tag>)
• Textarea (<sl-textarea>)
• Tooltip (<sl-tooltip>)
• Tree (<sl-tree>)
• Tree Item (<sl-tree-item>)
• Visually Hidden (<sl-visually-hidden>)

Contributing

Contributions are welcome! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new feature branch (git checkout -b feature/YourFeature).
3. Make your changes and commit them (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgments

• Shoelace for the UI components.
• Blazor for enabling web applications with C#.

Contact

For questions or support, please contact Koja Dennis.