sufi-chain/sufi-blazor
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Pooria Shariatzadeh
2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/actions/SbButton.md
+172
View File
@@ -0,0 +1,172 @@
# SbButton
Primary action element with multiple variants, sizes, and states. Can render as a button or anchor element.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Variant | SbButtonVariant | Solid | Button style variant (Solid, Outline, Ghost, Link) |
| Size | SbSize | Md | Button size (Xs, Sm, Md, Lg, Xl) |
| Color | SbColor | Primary | Color intent (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted) |
| Disabled | bool | false | Whether the button is disabled |
| Loading | bool | false | Whether the button shows a loading spinner |
| FullWidth | bool | false | Whether the button takes full container width |
| Type | string | "button" | HTML button type (button, submit, reset) |
| Href | string? | null | If set, renders as anchor element instead of button |
| Target | string? | null | Target for anchor links (_blank, _self, etc.) |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes (e.g. aria-*, data-*) |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnClick | EventCallback<MouseEventArgs> | Fired when the button is clicked |
## Templates / Slots (RenderFragments)
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | The button's text or content |
| StartIcon | RenderFragment | Icon rendered before the content |
| EndIcon | RenderFragment | Icon rendered after the content |
### Template Usage Examples
#### Basic Content
```razor
<SbButton>Click Me</SbButton>
```
#### With Start Icon
```razor
<SbButton>
<StartIcon><SbIcon Name="plus" Size="SbSize.Sm" /></StartIcon>
<ChildContent>Add Item</ChildContent>
</SbButton>
```
#### With End Icon
```razor
<SbButton Variant="SbButtonVariant.Outline">
<ChildContent>Download</ChildContent>
<EndIcon><SbIcon Name="download" Size="SbSize.Sm" /></EndIcon>
</SbButton>
```
#### With Both Icons
```razor
<SbButton>
<StartIcon><SbIcon Name="save" Size="SbSize.Sm" /></StartIcon>
<ChildContent>Save Changes</ChildContent>
<EndIcon><SbIcon Name="check" Size="SbSize.Sm" /></EndIcon>
</SbButton>
```
## CSS Classes
- `sb-button` - Base class
- `sb-button--solid` - Solid variant
- `sb-button--outline` - Outline variant
- `sb-button--ghost` - Ghost variant
- `sb-button--link` - Link variant
- `sb-button--xs` - Extra small size
- `sb-button--sm` - Small size
- `sb-button--md` - Medium size
- `sb-button--lg` - Large size
- `sb-button--xl` - Extra large size
- `sb-button--primary` - Primary color
- `sb-button--secondary` - Secondary color
- `sb-button--success` - Success color
- `sb-button--warning` - Warning color
- `sb-button--danger` - Danger color
- `sb-button--info` - Info color
- `sb-button--muted` - Muted color
- `sb-button--disabled` - Disabled state
- `sb-button--loading` - Loading state
- `sb-button--full-width` - Full width
## Accessibility
- Uses native `<button>` or `<a>` elements
- Keyboard navigation: Tab to focus, Enter/Space to activate
- `aria-disabled` set when disabled (for anchor variant)
- `aria-busy` set when loading
- `rel="noopener noreferrer"` automatically added for external links
## Examples
### Variants
```razor
<SbStack Direction="SbStackDirection.Row" Gap="3">
<SbButton Variant="SbButtonVariant.Solid">Solid</SbButton>
<SbButton Variant="SbButtonVariant.Outline">Outline</SbButton>
<SbButton Variant="SbButtonVariant.Ghost">Ghost</SbButton>
<SbButton Variant="SbButtonVariant.Link">Link</SbButton>
</SbStack>
```
### Colors
```razor
<SbStack Direction="SbStackDirection.Row" Gap="3">
<SbButton Color="SbColor.Primary">Primary</SbButton>
<SbButton Color="SbColor.Secondary">Secondary</SbButton>
<SbButton Color="SbColor.Success">Success</SbButton>
<SbButton Color="SbColor.Warning">Warning</SbButton>
<SbButton Color="SbColor.Danger">Danger</SbButton>
</SbStack>
```
### Sizes
```razor
<SbStack Direction="SbStackDirection.Row" Gap="3" Align="SbAlign.Center">
<SbButton Size="SbSize.Sm">Small</SbButton>
<SbButton Size="SbSize.Md">Medium</SbButton>
<SbButton Size="SbSize.Lg">Large</SbButton>
</SbStack>
```
### States
```razor
<SbStack Direction="SbStackDirection.Row" Gap="3">
<SbButton>Normal</SbButton>
<SbButton Disabled="true">Disabled</SbButton>
<SbButton Loading="true">Loading</SbButton>
</SbStack>
```
### As Link
```razor
<SbButton Href="https://github.com" Target="_blank">
Go to GitHub
</SbButton>
```
### Form Submit
```razor
<SbButton Type="submit" Color="SbColor.Success">
Submit Form
</SbButton>
```
### Click Handler (OnClick)
```razor
<SbButton OnClick="HandleClick">Click me</SbButton>
@code {
private void HandleClick(MouseEventArgs e) { ... }
}
```
docs/components/actions/SbIconButton.md
+177
View File
@@ -0,0 +1,177 @@
# SbIconButton
Icon-only button for toolbar actions, close buttons, and other compact interactions. Use **AriaLabel** (or **Title**) for accessibility when there is no visible text.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Icon | RenderFragment? | null | Icon content when set explicitly (e.g. `Icon="@(...)"`) |
| ChildContent | RenderFragment? | null | Icon content when placed between tags. At least one of Icon or ChildContent should be set. |
| AriaLabel | string? | null | Accessible label for screen readers (recommended for icon-only buttons) |
| Variant | SbButtonVariant | Ghost | Button style variant (Solid, Outline, Ghost, Link) |
| Size | SbSize | Md | Button size (Xs, Sm, Md, Lg, Xl) |
| Color | SbColor | Default | Color intent (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted) |
| Disabled | bool | false | Whether the button is disabled |
| Loading | bool | false | Whether the button shows a loading spinner |
| Type | string | "button" | HTML button type (button, submit, reset) |
| Title | string? | null | Tooltip text |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes (e.g. aria-*, data-*) |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnClick | EventCallback<MouseEventArgs> | Fired when the button is clicked |
## Templates / Slots (RenderFragments)
| Slot | Type | Description |
|------|------|-------------|
| Icon | RenderFragment? | Icon when set explicitly (e.g. `Icon="@(...)"`) |
| ChildContent | RenderFragment? | Icon when placed between tags (default slot). Use either Icon or ChildContent. |
### Template Usage Examples
#### Using ChildContent (content between tags)
```razor
<SbIconButton AriaLabel="Close">
<SbIcon Name="x" />
</SbIconButton>
```
#### Using Icon slot
```razor
<SbIconButton AriaLabel="Settings" Title="Open Settings">
<Icon><SbIcon Name="settings" /></Icon>
</SbIconButton>
```
## CSS Classes
- `sb-icon-button` - Base class
- `sb-icon-button--solid` - Solid variant
- `sb-icon-button--outline` - Outline variant
- `sb-icon-button--ghost` - Ghost variant
- `sb-icon-button--link` - Link variant
- `sb-icon-button--xs` - Extra small size
- `sb-icon-button--sm` - Small size
- `sb-icon-button--md` - Medium size
- `sb-icon-button--lg` - Large size
- `sb-icon-button--xl` - Extra large size
- `sb-icon-button--primary` - Primary color
- `sb-icon-button--secondary` - Secondary color
- `sb-icon-button--success` - Success color
- `sb-icon-button--warning` - Warning color
- `sb-icon-button--danger` - Danger color
- `sb-icon-button--info` - Info color
- `sb-icon-button--muted` - Muted color
- `sb-icon-button--disabled` - Disabled state
- `sb-icon-button--loading` - Loading state
## Accessibility
- Uses native `<button>` element
- **AriaLabel** (or **Title**) is recommended for icon-only buttons so screen readers have a label
- `aria-busy` set when loading
- `title` attribute provides tooltip on hover
- Keyboard accessible: Tab to focus, Enter/Space to activate
## Examples
### Basic Usage
```razor
<SbIconButton AriaLabel="Close dialog">
<SbIcon Name="x" />
</SbIconButton>
```
### Colors
```razor
<SbStack Direction="SbStackDirection.Row" Gap="2">
<SbIconButton AriaLabel="Edit" Color="SbColor.Primary">
<SbIcon Name="edit" />
</SbIconButton>
<SbIconButton AriaLabel="Delete" Color="SbColor.Danger">
<SbIcon Name="trash" />
</SbIconButton>
<SbIconButton AriaLabel="Favorite" Color="SbColor.Warning">
<SbIcon Name="star" />
</SbIconButton>
</SbStack>
```
### Sizes
```razor
<SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
<SbIconButton AriaLabel="Small" Size="SbSize.Sm">
<SbIcon Name="heart" Size="SbSize.Sm" />
</SbIconButton>
<SbIconButton AriaLabel="Medium" Size="SbSize.Md">
<SbIcon Name="heart" />
</SbIconButton>
<SbIconButton AriaLabel="Large" Size="SbSize.Lg">
<SbIcon Name="heart" Size="SbSize.Lg" />
</SbIconButton>
</SbStack>
```
### Variants
```razor
<SbStack Direction="SbStackDirection.Row" Gap="2">
<SbIconButton AriaLabel="Ghost" Variant="SbButtonVariant.Ghost">
<SbIcon Name="settings" />
</SbIconButton>
<SbIconButton AriaLabel="Outline" Variant="SbButtonVariant.Outline">
<SbIcon Name="settings" />
</SbIconButton>
<SbIconButton AriaLabel="Solid" Variant="SbButtonVariant.Solid">
<SbIcon Name="settings" />
</SbIconButton>
<SbIconButton AriaLabel="Link" Variant="SbButtonVariant.Link">
<SbIcon Name="settings" />
</SbIconButton>
</SbStack>
```
### States (Disabled, Loading)
```razor
<SbStack Direction="SbStackDirection.Row" Gap="2">
<SbIconButton AriaLabel="Delete"><SbIcon Name="trash" /></SbIconButton>
<SbIconButton AriaLabel="Delete (disabled)" Disabled="true"><SbIcon Name="trash" /></SbIconButton>
<SbIconButton AriaLabel="Loading" Loading="true"><SbIcon Name="trash" /></SbIconButton>
</SbStack>
```
### With Tooltip
```razor
<SbIconButton AriaLabel="Refresh data" Title="Refresh">
<SbIcon Name="refresh" />
</SbIconButton>
```
### In a Toolbar
```razor
<SbStack Direction="SbStackDirection.Row" Gap="1">
<SbIconButton AriaLabel="Bold" Title="Bold (Ctrl+B)">
<SbIcon Name="bold" Size="SbSize.Sm" />
</SbIconButton>
<SbIconButton AriaLabel="Italic" Title="Italic (Ctrl+I)">
<SbIcon Name="italic" Size="SbSize.Sm" />
</SbIconButton>
<SbIconButton AriaLabel="Underline" Title="Underline (Ctrl+U)">
<SbIcon Name="underline" Size="SbSize.Sm" />
</SbIconButton>
</SbStack>
```
docs/components/actions/SbLink.md
+145
View File
@@ -0,0 +1,145 @@
# SbLink
Styled anchor element for navigation with support for external links, underline styles, and colors.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Href | string? | null | The URL to navigate to |
| Target | string? | null | Link target (_blank, _self, etc.) |
| Rel | string? | null | Custom rel attribute |
| Disabled | bool | false | Whether the link is disabled |
| External | bool | false | Shows external link indicator icon |
| Color | SbColor | Primary | Link color (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted) |
| Underline | SbLinkUnderline | Hover | Underline behavior (Always, Hover, None) |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes (e.g. aria-*, data-*) |
## Events
| Event | Type | Description |
|-------|------|-------------|
| OnClick | EventCallback<MouseEventArgs> | Fired when the link is clicked |
## Templates / Slots (RenderFragments)
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | The link text or content |
### Template Usage Examples
#### Basic Link
```razor
<SbLink Href="/about">About Us</SbLink>
```
#### With Custom Content
```razor
<SbLink Href="/profile">
<SbStack Direction="SbStackDirection.Row" Gap="1" Align="SbAlign.Center">
<SbIcon Name="user" Size="SbSize.Sm" />
<span>View Profile</span>
</SbStack>
</SbLink>
```
## CSS Classes
- `sb-link` - Base class
- `sb-link--primary` - Primary color
- `sb-link--secondary` - Secondary color
- `sb-link--success` - Success color
- `sb-link--warning` - Warning color
- `sb-link--danger` - Danger color
- `sb-link--info` - Info color
- `sb-link--muted` - Muted color
- `sb-link--default` - Default color
- `sb-link--underline-always` - Always show underline
- `sb-link--underline-hover` - Underline on hover
- `sb-link--underline-none` - No underline
- `sb-link--disabled` - Disabled state
- `sb-link--external` - External link styling
## Accessibility
- Uses native `<a>` element
- `aria-disabled` set when disabled
- `tabindex="-1"` when disabled to remove from tab order
- `rel="noopener noreferrer"` automatically added for external links and `target="_blank"`
- External link indicator is hidden from screen readers
## Examples
### Basic Usage
```razor
<SbLink Href="/home">Go Home</SbLink>
```
### External Link
```razor
<SbLink Href="https://github.com" External="true" Target="_blank">
GitHub
</SbLink>
```
### Colors
```razor
<SbStack Direction="SbStackDirection.Row" Gap="4">
<SbLink Href="#" Color="SbColor.Primary">Primary</SbLink>
<SbLink Href="#" Color="SbColor.Secondary">Secondary</SbLink>
<SbLink Href="#" Color="SbColor.Success">Success</SbLink>
<SbLink Href="#" Color="SbColor.Danger">Danger</SbLink>
<SbLink Href="#" Color="SbColor.Muted">Muted</SbLink>
</SbStack>
```
### Underline Styles
```razor
<SbStack Direction="SbStackDirection.Row" Gap="4">
<SbLink Href="#" Underline="SbLinkUnderline.Always">Always Underlined</SbLink>
<SbLink Href="#" Underline="SbLinkUnderline.Hover">Underline on Hover</SbLink>
<SbLink Href="#" Underline="SbLinkUnderline.None">No Underline</SbLink>
</SbStack>
```
### Disabled Link
```razor
<SbLink Href="/admin" Disabled="true">
Admin (Restricted)
</SbLink>
```
### In Text
```razor
<SbText>
For more information, please visit our
<SbLink Href="/help">help center</SbLink> or
<SbLink Href="/contact">contact us</SbLink>.
</SbText>
```
### With Click Handler
```razor
<SbLink Href="#" OnClick="HandleLinkClick">
Click me to track
</SbLink>
@code {
private void HandleLinkClick(MouseEventArgs args)
{
// Track click analytics
}
}
```