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/typography/SbHeading.md
+175
View File
@@ -0,0 +1,175 @@
# SbHeading
Semantic heading component that renders h1-h6 elements with consistent typography styles. Supports visual size override for flexible design while maintaining proper document structure.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Level | int | 2 | Semantic heading level (1-6), determines the HTML tag |
| Size | int? | null | Visual size override (1-6). If not set, matches Level |
| Color | SbColor | Default | Text color |
| Align | SbTextAlign | Start | Text alignment (Start, Center, End) |
| Truncate | bool | false | Truncates text with ellipsis on overflow |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment? | Heading text content |
## CSS Classes
- `sb-heading` - Base class
- `sb-heading--h1` through `sb-heading--h6` - Size variants
- `sb-heading--primary` - Primary color
- `sb-heading--secondary` - Secondary color
- `sb-heading--success` - Success color
- `sb-heading--warning` - Warning color
- `sb-heading--danger` - Danger color
- `sb-heading--align-center` - Center aligned
- `sb-heading--align-end` - End aligned
- `sb-heading--truncate` - Text truncation
## Rendered Element
Renders the appropriate heading tag based on `Level`:
- Level 1 → `<h1>`
- Level 2 → `<h2>`
- Level 3 → `<h3>`
- Level 4 → `<h4>`
- Level 5 → `<h5>`
- Level 6 → `<h6>`
## Examples
### Basic Headings
```razor
<SbHeading Level="1">Heading 1</SbHeading>
<SbHeading Level="2">Heading 2</SbHeading>
<SbHeading Level="3">Heading 3</SbHeading>
<SbHeading Level="4">Heading 4</SbHeading>
<SbHeading Level="5">Heading 5</SbHeading>
<SbHeading Level="6">Heading 6</SbHeading>
```
### Visual Size Override
Use `Size` to visually style a heading differently from its semantic level. This is useful for maintaining proper document structure while achieving desired visual hierarchy.
```razor
@* Semantically h2, but visually styled as h4 *@
<SbHeading Level="2" Size="4">Section Title</SbHeading>
@* Semantically h3, but visually styled as h1 *@
<SbHeading Level="3" Size="1">Important Subsection</SbHeading>
```
### Colors
```razor
<SbHeading Level="3" Color="SbColor.Primary">Primary Heading</SbHeading>
<SbHeading Level="3" Color="SbColor.Secondary">Secondary Heading</SbHeading>
<SbHeading Level="3" Color="SbColor.Success">Success Heading</SbHeading>
<SbHeading Level="3" Color="SbColor.Warning">Warning Heading</SbHeading>
<SbHeading Level="3" Color="SbColor.Danger">Danger Heading</SbHeading>
```
### Text Alignment
```razor
<SbHeading Level="3" Align="SbTextAlign.Start">Left Aligned</SbHeading>
<SbHeading Level="3" Align="SbTextAlign.Center">Center Aligned</SbHeading>
<SbHeading Level="3" Align="SbTextAlign.End">Right Aligned</SbHeading>
```
### Text Truncation
```razor
<div style="width: 200px;">
<SbHeading Level="4" Truncate="true">
This is a very long heading that will be truncated
</SbHeading>
</div>
```
### Page Header
```razor
<header>
<SbHeading Level="1">Dashboard</SbHeading>
<SbText Variant="SbTextVariant.BodySmall" Color="SbColor.Secondary">
Welcome back, John
</SbText>
</header>
```
### Card Header
```razor
<SbCard>
<Header>
<SbHeading Level="3" Size="4">Card Title</SbHeading>
</Header>
<ChildContent>
<p>Card content goes here.</p>
</ChildContent>
</SbCard>
```
### Section with Subheading
```razor
<section>
<SbHeading Level="2">Main Section</SbHeading>
<SbText Color="SbColor.Secondary">
Introduction paragraph for this section.
</SbText>
<SbHeading Level="3">Subsection A</SbHeading>
<p>Content for subsection A...</p>
<SbHeading Level="3">Subsection B</SbHeading>
<p>Content for subsection B...</p>
</section>
```
### Hero Section
```razor
<div class="hero" style="text-align: center;">
<SbHeading Level="1" Align="SbTextAlign.Center">
Build Better Apps
</SbHeading>
<SbText Variant="SbTextVariant.Body" Align="SbTextAlign.Center">
A comprehensive component library for Blazor applications.
</SbText>
<SbButton Size="SbSize.Lg">Get Started</SbButton>
</div>
```
### Accessibility Best Practices
```razor
@* Maintain proper heading hierarchy for accessibility *@
<article>
<SbHeading Level="1">Article Title</SbHeading>
<section>
<SbHeading Level="2">First Section</SbHeading>
<p>Content...</p>
<SbHeading Level="3">Subsection</SbHeading>
<p>More content...</p>
</section>
<section>
<SbHeading Level="2">Second Section</SbHeading>
<p>Content...</p>
</section>
</article>
```
docs/components/typography/SbText.md
+205
View File
@@ -0,0 +1,205 @@
# SbText
A versatile typography component for rendering text with various styles and semantic elements. Supports multiple variants, colors, and alignment options.
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Variant | SbTextVariant | Body | Typography style variant |
| Tag | string? | null | Override the semantic HTML tag |
| Color | SbColor | Default | Text color |
| Align | SbTextAlign | Start | Text alignment (Start, Center, End) |
| Truncate | bool | false | Truncates text with ellipsis on overflow |
| Class | string? | null | Additional CSS classes |
| Style | string? | null | Inline styles |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
## Text Variants
| Variant | Default Tag | Description |
|---------|-------------|-------------|
| Body | `<p>` | Standard body text |
| BodySmall | `<p>` | Smaller body text |
| Caption | `<span>` | Small caption text |
| Overline | `<span>` | Small uppercase text |
| Code | `<code>` | Monospace code text |
## Templates / Slots
| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment? | Text content |
## CSS Classes
- `sb-text` - Base class
- `sb-text--body` - Body variant
- `sb-text--bodysmall` - Small body variant
- `sb-text--caption` - Caption variant
- `sb-text--overline` - Overline variant
- `sb-text--code` - Code variant
- `sb-text--primary` - Primary color
- `sb-text--secondary` - Secondary color
- `sb-text--success` - Success color
- `sb-text--warning` - Warning color
- `sb-text--danger` - Danger color
- `sb-text--align-center` - Center aligned
- `sb-text--align-end` - End aligned
- `sb-text--truncate` - Text truncation
## Examples
### Basic Variants
```razor
<SbText Variant="SbTextVariant.Body">
This is regular body text for paragraphs and general content.
</SbText>
<SbText Variant="SbTextVariant.BodySmall">
This is smaller body text for secondary information.
</SbText>
<SbText Variant="SbTextVariant.Caption">
Caption text for labels and small annotations
</SbText>
<SbText Variant="SbTextVariant.Overline">
OVERLINE TEXT
</SbText>
<SbText Variant="SbTextVariant.Code">
const value = "code";
</SbText>
```
### Colors
```razor
<SbText Color="SbColor.Primary">Primary colored text</SbText>
<SbText Color="SbColor.Secondary">Secondary colored text</SbText>
<SbText Color="SbColor.Success">Success colored text</SbText>
<SbText Color="SbColor.Warning">Warning colored text</SbText>
<SbText Color="SbColor.Danger">Danger colored text</SbText>
```
### Text Alignment
```razor
<SbText Align="SbTextAlign.Start">Left aligned text</SbText>
<SbText Align="SbTextAlign.Center">Center aligned text</SbText>
<SbText Align="SbTextAlign.End">Right aligned text</SbText>
```
### Custom HTML Tag
```razor
@* Render as a <div> instead of default tag *@
<SbText Tag="div" Variant="SbTextVariant.Body">
Content in a div element
</SbText>
@* Render as a <label> *@
<SbText Tag="label" Variant="SbTextVariant.Caption">
Form field label
</SbText>
@* Render as a <small> *@
<SbText Tag="small" Variant="SbTextVariant.BodySmall">
Fine print text
</SbText>
```
### Text Truncation
```razor
<div style="width: 200px;">
<SbText Truncate="true">
This is a very long text that will be truncated with an ellipsis when it exceeds the container width.
</SbText>
</div>
```
### Article Content
```razor
<article>
<SbHeading Level="1">Article Title</SbHeading>
<SbText Variant="SbTextVariant.Overline" Color="SbColor.Primary">
CATEGORY
</SbText>
<SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
Published on January 15, 2024 · 5 min read
</SbText>
<SbText Variant="SbTextVariant.Body">
Main article content goes here. This is the primary body text
that makes up the bulk of the article.
</SbText>
<SbText Variant="SbTextVariant.BodySmall" Color="SbColor.Secondary">
Additional notes or less important information.
</SbText>
</article>
```
### Form Field with Labels
```razor
<div class="form-field">
<SbText Tag="label" Variant="SbTextVariant.Caption">
Email Address
</SbText>
<SbTextField @bind-Value="email" />
<SbText Variant="SbTextVariant.BodySmall" Color="SbColor.Secondary">
We'll never share your email with anyone else.
</SbText>
</div>
```
### Code Snippet
```razor
<SbText Variant="SbTextVariant.Body">
To install the package, run:
</SbText>
<SbText Variant="SbTextVariant.Code">
dotnet add package SufiChain.SufiBlazor
</SbText>
```
### Card with Typography
```razor
<SbCard>
<Header>
<SbText Variant="SbTextVariant.Overline" Color="SbColor.Primary">
FEATURED
</SbText>
<SbHeading Level="3">Product Name</SbHeading>
</Header>
<ChildContent>
<SbText Variant="SbTextVariant.Body">
Product description with all the important details about this item.
</SbText>
<SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
SKU: PRD-12345
</SbText>
</ChildContent>
</SbCard>
```
### Status Message
```razor
<SbText Color="SbColor.Success">
<SbIcon Name="check-circle" Size="SbSize.Sm" /> Operation completed successfully!
</SbText>
<SbText Color="SbColor.Danger">
<SbIcon Name="alert-circle" Size="SbSize.Sm" /> An error occurred. Please try again.
</SbText>
```