Shoelace.Style 1.9.1

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.9.1
   

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

   {
     "version": "1.0",
     "defaultProvider": "jsdelivr",
     "libraries": [
       {
         "library": "@shoelace-style/shoelace@2.19.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.