first commit
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
# SbIcon
|
||||
|
||||
Renders SVG icons from the Sufi Icons library with support for sizing, coloring, and accessibility features. Can also render custom SVG content.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Name | string? | null | Icon name from the Sufi Icons library (e.g., "home" or "si-home") |
|
||||
| Size | SbSize | Md | Icon size (Sm, Md, Lg, Xl) |
|
||||
| Color | SbColor? | null | Icon color. When null, inherits from parent via currentColor |
|
||||
| AriaLabel | string? | null | Accessible label. When set, icon becomes semantic (role="img") |
|
||||
| Mirror | bool | false | Mirrors icon in RTL layouts (for directional icons) |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
| Style | string? | null | Inline styles |
|
||||
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
|
||||
|
||||
## Templates / Slots
|
||||
|
||||
| Slot | Type | Description |
|
||||
|------|------|-------------|
|
||||
| CustomContent | RenderFragment? | Custom SVG or content (takes precedence over Name) |
|
||||
|
||||
### Template Usage
|
||||
|
||||
```razor
|
||||
<SbIcon>
|
||||
<CustomContent>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<!-- Custom SVG paths -->
|
||||
</svg>
|
||||
</CustomContent>
|
||||
</SbIcon>
|
||||
```
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-icon` - Base class
|
||||
- `sb-icon--sm` - Small size
|
||||
- `sb-icon--md` - Medium size
|
||||
- `sb-icon--lg` - Large size
|
||||
- `sb-icon--xl` - Extra large size
|
||||
- `sb-icon--primary` - Primary color
|
||||
- `sb-icon--secondary` - Secondary color
|
||||
- `sb-icon--success` - Success color
|
||||
- `sb-icon--warning` - Warning color
|
||||
- `sb-icon--danger` - Danger color
|
||||
- `sb-icon--mirror` - Mirrored for RTL
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Decorative icons** (no `AriaLabel`): Uses `aria-hidden="true"` to hide from screen readers
|
||||
- **Semantic icons** (with `AriaLabel`): Uses `role="img"` and `aria-label` for screen readers
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Icons
|
||||
|
||||
```razor
|
||||
<SbIcon Name="home" />
|
||||
<SbIcon Name="user" />
|
||||
<SbIcon Name="settings" />
|
||||
<SbIcon Name="search" />
|
||||
<SbIcon Name="menu" />
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
```razor
|
||||
<SbIcon Name="star" Size="SbSize.Sm" />
|
||||
<SbIcon Name="star" Size="SbSize.Md" />
|
||||
<SbIcon Name="star" Size="SbSize.Lg" />
|
||||
<SbIcon Name="star" Size="SbSize.Xl" />
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
```razor
|
||||
<SbIcon Name="circle" Color="SbColor.Primary" />
|
||||
<SbIcon Name="circle" Color="SbColor.Secondary" />
|
||||
<SbIcon Name="circle" Color="SbColor.Success" />
|
||||
<SbIcon Name="circle" Color="SbColor.Warning" />
|
||||
<SbIcon Name="circle" Color="SbColor.Danger" />
|
||||
```
|
||||
|
||||
### Inheriting Color
|
||||
|
||||
```razor
|
||||
@* Icon inherits the parent's text color *@
|
||||
<span style="color: purple;">
|
||||
<SbIcon Name="heart" /> Favorite
|
||||
</span>
|
||||
|
||||
<SbButton Color="SbColor.Primary">
|
||||
<SbIcon Name="save" /> Save
|
||||
</SbButton>
|
||||
```
|
||||
|
||||
### Accessible Icons
|
||||
|
||||
```razor
|
||||
@* Decorative icon (hidden from screen readers) *@
|
||||
<SbButton>
|
||||
<SbIcon Name="save" /> Save Document
|
||||
</SbButton>
|
||||
|
||||
@* Semantic icon (announced by screen readers) *@
|
||||
<SbIcon Name="warning" AriaLabel="Warning" />
|
||||
|
||||
@* Icon-only button with accessible label *@
|
||||
<SbIconButton Icon="close" AriaLabel="Close dialog" />
|
||||
```
|
||||
|
||||
### RTL Mirror
|
||||
|
||||
```razor
|
||||
@* Arrow icons that should flip in RTL layouts *@
|
||||
<SbIcon Name="arrow-right" Mirror="true" />
|
||||
<SbIcon Name="chevron-left" Mirror="true" />
|
||||
```
|
||||
|
||||
### Custom SVG Content
|
||||
|
||||
```razor
|
||||
<SbIcon Size="SbSize.Lg">
|
||||
<CustomContent>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
|
||||
</svg>
|
||||
</CustomContent>
|
||||
</SbIcon>
|
||||
```
|
||||
|
||||
### In Buttons
|
||||
|
||||
```razor
|
||||
<SbButton>
|
||||
<SbIcon Name="plus" Size="SbSize.Sm" /> Add Item
|
||||
</SbButton>
|
||||
|
||||
<SbButton Variant="SbButtonVariant.Outlined">
|
||||
<SbIcon Name="download" Size="SbSize.Sm" /> Download
|
||||
</SbButton>
|
||||
|
||||
<SbIconButton Icon="edit" />
|
||||
```
|
||||
|
||||
### In Navigation
|
||||
|
||||
```razor
|
||||
<SbNavMenu>
|
||||
<SbNavItem Href="/dashboard">
|
||||
<IconTemplate>
|
||||
<SbIcon Name="home" />
|
||||
</IconTemplate>
|
||||
Dashboard
|
||||
</SbNavItem>
|
||||
<SbNavItem Href="/users">
|
||||
<IconTemplate>
|
||||
<SbIcon Name="users" />
|
||||
</IconTemplate>
|
||||
Users
|
||||
</SbNavItem>
|
||||
</SbNavMenu>
|
||||
```
|
||||
|
||||
### Status Indicators
|
||||
|
||||
```razor
|
||||
<span>
|
||||
<SbIcon Name="check-circle" Color="SbColor.Success" /> Active
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<SbIcon Name="clock" Color="SbColor.Warning" /> Pending
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<SbIcon Name="x-circle" Color="SbColor.Danger" /> Failed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Loading State
|
||||
|
||||
```razor
|
||||
<SbIcon Name="loader" Class="spin" />
|
||||
|
||||
<style>
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Icon List
|
||||
|
||||
```razor
|
||||
<SbStack Direction="SbDirection.Row" Gap="SbSpacing.Sm">
|
||||
<SbIcon Name="facebook" Size="SbSize.Lg" />
|
||||
<SbIcon Name="twitter" Size="SbSize.Lg" />
|
||||
<SbIcon Name="linkedin" Size="SbSize.Lg" />
|
||||
<SbIcon Name="github" Size="SbSize.Lg" />
|
||||
</SbStack>
|
||||
```
|
||||
@@ -0,0 +1,245 @@
|
||||
# SbMarkdownViewer
|
||||
|
||||
Renders markdown content as HTML using the Markdig library. Supports advanced markdown extensions including tables, task lists, and code blocks.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Content | string? | null | The markdown content to render |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
| Style | string? | null | Inline styles |
|
||||
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-markdown-viewer` - Base class applied to the container
|
||||
|
||||
## Markdown Features
|
||||
|
||||
The component uses Markdig with advanced extensions enabled, supporting:
|
||||
|
||||
- **Standard Markdown**: Headings, paragraphs, lists, links, images, emphasis
|
||||
- **Extended Syntax**: Tables, task lists, strikethrough
|
||||
- **Code Blocks**: Fenced code blocks with language specification
|
||||
- **Auto-links**: Automatic URL linking
|
||||
- **And more**: Abbreviations, footnotes, etc.
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```razor
|
||||
<SbMarkdownViewer Content="@markdownContent" />
|
||||
|
||||
@code {
|
||||
private string markdownContent = """
|
||||
# Hello World
|
||||
|
||||
This is **bold** and this is *italic*.
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
""";
|
||||
}
|
||||
```
|
||||
|
||||
### From External Source
|
||||
|
||||
```razor
|
||||
@inject HttpClient Http
|
||||
|
||||
<SbMarkdownViewer Content="@readmeContent" />
|
||||
|
||||
@code {
|
||||
private string? readmeContent;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
readmeContent = await Http.GetStringAsync("README.md");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### With Code Blocks
|
||||
|
||||
```razor
|
||||
<SbMarkdownViewer Content="@codeExample" />
|
||||
|
||||
@code {
|
||||
private string codeExample = """
|
||||
## Code Example
|
||||
|
||||
Here's how to create a button:
|
||||
|
||||
```razor
|
||||
<SbButton OnClick="HandleClick">
|
||||
Click Me
|
||||
</SbButton>
|
||||
```
|
||||
|
||||
And the handler:
|
||||
|
||||
```csharp
|
||||
private void HandleClick()
|
||||
{
|
||||
Console.WriteLine("Clicked!");
|
||||
}
|
||||
```
|
||||
""";
|
||||
}
|
||||
```
|
||||
|
||||
### With Tables
|
||||
|
||||
```razor
|
||||
<SbMarkdownViewer Content="@tableContent" />
|
||||
|
||||
@code {
|
||||
private string tableContent = """
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Name | string | null | The component name |
|
||||
| Size | SbSize | Md | Component size |
|
||||
| Disabled | bool | false | Disables the component |
|
||||
""";
|
||||
}
|
||||
```
|
||||
|
||||
### With Task Lists
|
||||
|
||||
```razor
|
||||
<SbMarkdownViewer Content="@taskList" />
|
||||
|
||||
@code {
|
||||
private string taskList = """
|
||||
## TODO
|
||||
|
||||
- [x] Create component
|
||||
- [x] Add parameters
|
||||
- [ ] Write documentation
|
||||
- [ ] Add tests
|
||||
""";
|
||||
}
|
||||
```
|
||||
|
||||
### Documentation Page
|
||||
|
||||
```razor
|
||||
<SbCard>
|
||||
<Header>
|
||||
<SbHeading Level="2">SbButton Documentation</SbHeading>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<SbMarkdownViewer Content="@buttonDocs" Class="documentation-content" />
|
||||
</ChildContent>
|
||||
</SbCard>
|
||||
|
||||
@code {
|
||||
private string buttonDocs = """
|
||||
A versatile button component for triggering actions.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```razor
|
||||
<SbButton>Click Me</SbButton>
|
||||
```
|
||||
|
||||
## Variants
|
||||
|
||||
- **Primary**: Default filled button
|
||||
- **Outlined**: Button with border
|
||||
- **Ghost**: Transparent button
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| Variant | SbButtonVariant | Visual style |
|
||||
| Size | SbSize | Button size |
|
||||
| Disabled | bool | Disables interaction |
|
||||
""";
|
||||
}
|
||||
```
|
||||
|
||||
### Styled Container
|
||||
|
||||
```razor
|
||||
<SbMarkdownViewer
|
||||
Content="@content"
|
||||
Class="custom-markdown"
|
||||
Style="max-width: 800px; margin: 0 auto;" />
|
||||
|
||||
<style>
|
||||
.custom-markdown h1 {
|
||||
border-bottom: 2px solid var(--sb-primary);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.custom-markdown code {
|
||||
background-color: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-markdown pre {
|
||||
background-color: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Blog Post
|
||||
|
||||
```razor
|
||||
<article>
|
||||
<SbHeading Level="1">@post.Title</SbHeading>
|
||||
<SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
|
||||
@post.Date.ToLongDateString() · @post.ReadTime min read
|
||||
</SbText>
|
||||
<SbDivider />
|
||||
<SbMarkdownViewer Content="@post.Body" />
|
||||
</article>
|
||||
```
|
||||
|
||||
### Component Demo Page
|
||||
|
||||
```razor
|
||||
<SbTabs>
|
||||
<SbTab Title="Preview">
|
||||
@* Live component demo *@
|
||||
<SbButton Variant="SbButtonVariant.Primary">Demo Button</SbButton>
|
||||
</SbTab>
|
||||
<SbTab Title="Code">
|
||||
<SbMarkdownViewer Content="@codeSnippet" />
|
||||
</SbTab>
|
||||
<SbTab Title="API">
|
||||
<SbMarkdownViewer Content="@apiDocs" />
|
||||
</SbTab>
|
||||
</SbTabs>
|
||||
|
||||
@code {
|
||||
private string codeSnippet = """
|
||||
```razor
|
||||
<SbButton Variant="SbButtonVariant.Primary">
|
||||
Demo Button
|
||||
</SbButton>
|
||||
```
|
||||
""";
|
||||
|
||||
private string apiDocs = """
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default |
|
||||
|-----------|------|---------|
|
||||
| Variant | SbButtonVariant | Primary |
|
||||
| Size | SbSize | Md |
|
||||
""";
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user