https://github.com/soenneker/soenneker.quark.steps
A series of Blazor Quark components for step controls.
https://github.com/soenneker/soenneker.quark.steps
blazor blazorlibrary csharp css dotnet elements html quark step steps ui wrapper
Last synced: 4 months ago
JSON representation
A series of Blazor Quark components for step controls.
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.quark.steps
- Owner: soenneker
- License: mit
- Created: 2025-09-12T20:22:36.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-09-21T00:45:20.000Z (4 months ago)
- Last Synced: 2025-09-21T00:46:45.317Z (4 months ago)
- Topics: blazor, blazorlibrary, csharp, css, dotnet, elements, html, quark, step, steps, ui, wrapper
- Language: HTML
- Homepage: https://soenneker.com
- Size: 91.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.quark.steps/)
[](https://github.com/soenneker/soenneker.quark.steps/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.quark.steps/)
[](https://soenneker.github.io/soenneker.quark.steps/)
#  Soenneker.Quark.Steps
### A comprehensive Blazor component library for step indicators and navigation.
## Installation
```
dotnet add package Soenneker.Quark.Steps
```
## Features
- **Step Navigation**: Clickable steps with built-in navigation
- **State Management**: Automatic step state tracking and management
- **Custom Markers**: Support for custom step markers and icons
- **Content Areas**: Separate content panels for each step
- **Render Modes**: Default, lazy load, and lazy reload rendering options
- **Color Theming**: Built-in color support for step styling
- **Navigation Control**: Optional navigation validation and control
- **Responsive Design**: Works across different screen sizes
## Components
### Steps
The main container component that manages step state and navigation.
```razor
```
### Step
Individual step component with customizable markers and content.
```razor
Step Title
```
### StepPanel
Content panel that displays when its corresponding step is active.
```razor
Step Content
This content shows when step1 is selected.
```
### StepContent
Separate content area that can be placed anywhere on the page.
```razor
Information content
Settings content
```
## Examples
### Basic Steps with Navigation
```razor
currentStep = 'step2'">Go to Step 2
```
### Steps with Content Areas
```razor
Information Panel
Step content here
Settings Panel
Settings content here
```
### Custom Markers
```razor
Custom Step
```
### Navigation Control
```razor
@code {
private bool ValidateNavigation(StepNavigationContext context)
{
// Custom validation logic
return context.NextStepIndex > context.CurrentStepIndex ||
CanGoBackward(context.NextStepIndex);
}
}
```
## Properties
### Steps Properties
- `SelectedStep` - Currently selected step name
- `RenderMode` - How steps content is rendered (Default, LazyLoad, LazyReload)
- `NavigationAllowed` - Function to validate step navigation
- `Items` - Template for step items
- `Content` - Template for step content panels
### Step Properties
- `Name` - Unique identifier for the step
- `Index` - Override the step index
- `Completed` - Mark step as completed
- `Color` - Step color theme
- `Marker` - Custom marker content
- `Caption` - Step title/caption content
### StepPanel Properties
- `Name` - Must match corresponding step name
- `ChildContent` - Panel content
## License
MIT License - see [LICENSE](LICENSE) file for details.