/SemanticUI-Blazor-Components

Semantic UI components for .NET (Blazor, Razor)

Primary LanguageC#MIT LicenseMIT

Build status

Quality Gate Status Lines of Code Maintainability Rating Bugs Vulnerabilities

Branch Build Azure Build Github
master Build Status Master Actions Status
develop Build Status Develop

Blazor/Razor Semantic UI Components

These components aim to provide the same components that are available in Semantic UI React, but for the new Blazor framework

Demo

You can clone this repository and execute the demo project to see the components in action, demo use Blazor WebAssembly

How to use

  • Add Semantic UI CSS, for example from CDN
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
        ...
    </head>
    <body>
    ...
    </body>
</html>
  • Add Nuget package
dotnet add package QD.Components.Semantic
  • Add usings in _imports.razor
@using QD.Components.Semantic.Elements
  • Create amazing app
@page "/buttons"
@using QD.Components.Semantic.Enums.Button
@using Icon = QD.Components.Semantic.Enums.Elements.Icon

...

<h2>Loading</h2>
<Icon loading name="@Icon.Spinner" />

...

<h2>Animated Button</h2>
<Button animated="@Animation.Horizontal">
    <ButtonContent visible>Text 1</ButtonContent>
    <ButtonContent hidden>Text 2</ButtonContent>
</Button>

...

Features

Elements

  • Button
  • Container
  • Divider
  • Flag
  • Icon
  • Header
  • Image
  • Input
  • List
  • Label
  • Loader
  • Placeholder
  • Reveal
  • Rail
  • Segment
  • Step

Collections

  • Breadcrumb
  • Grid
  • Form
  • Menu
  • Message
  • Table

Views

  • Advertisement
  • Card
  • Comment
  • Feed
  • Item
  • Statistic

Modules

  • Checkbox
  • Accordion
  • Dimmer
  • Dropdown
  • Embed
  • Modal
  • Popup
  • Progress
  • Search
  • Rating
  • Sidebar
  • Sticky
  • Tab
  • Transition

Behaviours

  • Visibility

Addons

  • Confirm
  • Mount Node
  • Portal
  • Pagination
  • Radio
  • Ref
  • Responsive
  • Select
  • Text Area
  • Transitionable Portal