143 lines
4.0 KiB
Markdown
143 lines
4.0 KiB
Markdown
# Separator
|
|
|
|
A thin dividing line. Use it to visually separate sections of a page or items in a toolbar. Like a ruled line on a notepad, it gives your layout breathing room and clarity.
|
|
|
|
---
|
|
|
|
## Quick example
|
|
|
|
```csharp
|
|
new Separator() // horizontal rule
|
|
new Separator(orientation: "vertical") // vertical bar
|
|
```
|
|
|
|
---
|
|
|
|
## All the options
|
|
|
|
```csharp
|
|
public Separator(
|
|
string orientation = "horizontal",
|
|
string extraClasses = "")
|
|
```
|
|
|
|
| Parameter | What it does |
|
|
|---|---|
|
|
| `orientation` | `"horizontal"` (default) renders an `<hr>`. `"vertical"` renders an inline bar. |
|
|
| `extraClasses` | Additional Tailwind classes to override spacing or colour. |
|
|
|
|
---
|
|
|
|
## Real-world examples
|
|
|
|
### Between sections on a settings page
|
|
|
|
```html
|
|
<h2 class="text-lg font-semibold">Account</h2>
|
|
<p class="text-sm text-muted-foreground">Manage your account details.</p>
|
|
$$Sep1$$
|
|
<h2 class="text-lg font-semibold">Notifications</h2>
|
|
```
|
|
|
|
```csharp
|
|
_sep1 = new Separator();
|
|
```
|
|
|
|
### Vertical bar in a text editor toolbar
|
|
|
|
```html
|
|
<div class="flex items-center gap-2">
|
|
<button>Bold</button>
|
|
$$Sep$$
|
|
<button>Italic</button>
|
|
$$Sep$$
|
|
<button>Underline</button>
|
|
</div>
|
|
```
|
|
|
|
```csharp
|
|
_sep = new Separator(orientation: "vertical");
|
|
```
|
|
|
|
### More or less spacing
|
|
|
|
```csharp
|
|
new Separator(extraClasses: "my-8") // extra breathing room above and below
|
|
new Separator(extraClasses: "my-2") // tighter spacing
|
|
```
|
|
|
|
---
|
|
|
|
## How it works
|
|
|
|
A horizontal separator is an `<hr>` element with a top border. A vertical separator is an inline `<span>` with a left border and a fixed height of 16px. Both use `border-border` which follows the theme's CSS variable and adapts to dark mode automatically.
|
|
|
|
## Tips and tricks
|
|
|
|
- The horizontal `Separator` is an `<hr>` element — it carries semantic meaning as a thematic break. Use it between content sections.
|
|
- The vertical `Separator` is an inline `<span>` — use it inside `flex` rows (toolbars, breadcrumb rows, stat rows, etc.).
|
|
- Override margins using `extraClasses` when the default `my-4` / `mx-2` doesn't fit the surrounding layout.
|
|
- Override margins using `extraClasses` when the default `my-4` / `mx-2` doesn't fit the surrounding layout.
|
|
|
|
---
|
|
|
|
## Complete page example
|
|
|
|
**`Templates/AboutPage.htmx`**
|
|
```html
|
|
<div class="max-w-2xl mx-auto py-10">
|
|
<h1 class="text-3xl font-bold mb-2">About BeepBoop</h1>
|
|
<p class="text-muted-foreground mb-4">A fast AOT-safe HTMX framework for .NET 10.</p>
|
|
$$SectionSep1$$
|
|
<h2 class="text-xl font-semibold mb-2">Mission</h2>
|
|
<p class="text-sm mb-4">$$MissionText$$</p>
|
|
$$SectionSep2$$
|
|
<h2 class="text-xl font-semibold mb-2">Team</h2>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span>Alice</span>
|
|
$$InlineSep$$
|
|
<span>Bob</span>
|
|
$$InlineSep$$
|
|
<span>Carol</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**`Templates/AboutPage.htmx.cs`**
|
|
```csharp
|
|
namespace Htmx.ApiDemo.Templates;
|
|
|
|
public sealed class AboutPage : AboutPageBase
|
|
{
|
|
private readonly IHtmxComponent _sep1;
|
|
private readonly IHtmxComponent _sep2;
|
|
private readonly IHtmxComponent _inline;
|
|
private readonly byte[] _mission;
|
|
|
|
public AboutPage()
|
|
{
|
|
_sep1 = new Components.Separator();
|
|
_sep2 = new Components.Separator();
|
|
_inline = new Components.Separator(orientation: "vertical");
|
|
_mission = "BeepBoop makes building server-rendered HTMX apps as fast and safe as possible.".ToUtf8Bytes();
|
|
}
|
|
|
|
protected override void RenderSectionSep1(HtmxRenderContext ctx) => _sep1.Render(ctx.Next());
|
|
protected override void RenderSectionSep2(HtmxRenderContext ctx) => _sep2.Render(ctx.Next());
|
|
protected override void RenderInlineSep(HtmxRenderContext ctx) => _inline.Render(ctx.Next());
|
|
protected override void RenderMissionText(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_mission);
|
|
}
|
|
```
|
|
|
|
**GET handler**
|
|
```csharp
|
|
[Handler]
|
|
[MapGet("/about")]
|
|
public static partial class GetAboutHandler
|
|
{
|
|
public record Query();
|
|
private static Task<IResult> HandleAsync(Query _, HttpContext ctx, CancellationToken ct)
|
|
=> ctx.WriteHtmxPage(new AboutPage(), title: "About");
|
|
}
|
|
```
|