Branch | Build Azure | Build Github |
---|---|---|
master | ||
develop |
These components aim to provide the same components that are available in Semantic UI React, but for the new Blazor framework
You can clone this repository and execute the demo project to see the components in action, demo use Blazor WebAssembly
- 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>
...
- Button
- Container
- Divider
- Flag
- Icon
- Header
- Image
- Input
- List
- Label
- Loader
- Placeholder
- Reveal
- Rail
- Segment
- Step
- Breadcrumb
- Grid
- Form
- Menu
- Message
- Table
- Advertisement
- Card
- Comment
- Feed
- Item
- Statistic
- Checkbox
- Accordion
- Dimmer
- Dropdown
- Embed
- Modal
- Popup
- Progress
- Search
- Rating
- Sidebar
- Sticky
- Tab
- Transition
- Visibility
- Confirm
- Mount Node
- Portal
- Pagination
- Radio
- Ref
- Responsive
- Select
- Text Area
- Transitionable Portal