shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrote all the docs - more noob friendly now.

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Enciphered
2026-05-05 23:55:26 +05:00
parent c1e1f74557
commit b530bb8c97
35 changed files with 2159 additions and 2341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/Components/ToastViewport.md
+17 -55
View File
@@ -1,48 +1,14 @@
# ToastViewport
The fixed container that holds all `Toast` notifications. Place exactly one `ToastViewport` in your main layout (e.g. `MainLayout.htmx`). The viewport is invisible when empty and stacks toasts upward as they are added.
The fixed container where toast notifications appear. Place exactly one `ToastViewport` in your main layout — it sits in the corner of the screen and is invisible when no toasts are showing. New toasts stack upward as they are added.
---
## HTML structure
```
div[id={id}].toast-viewport.fixed.bottom-4.right-4.z-50.flex.flex-col-reverse.gap-2.w-80.pointer-events-none
```
---
## CSS mechanics
| Class | Effect |
|---|---|
| `fixed bottom-4 right-4` | Anchored to the bottom-right corner of the viewport |
| `z-50` | Floats above all other content including dialogs and dropdowns |
| `flex flex-col-reverse gap-2` | New toasts appear on top; older ones push downward |
| `w-80` | Matches the default toast width |
| `pointer-events-none` | The container itself doesn't capture clicks — toasts set `pointer-events-auto` individually |
---
## Constructor signature
```csharp
public ToastViewport(string id = "toast-viewport")
```
| Parameter | Description |
|---|---|
| `id` | Element id (default: `"toast-viewport"`). `components.js` queries `#toast-viewport` by default — only change this if you also update the JS lookup. |
---
## Usage examples
### Place in MainLayout
## Quick example
```html
<!-- MainLayout.htmx -->
<body class="...">
<body>
<main>$$Body$$</main>
$$ToastViewport$$
</body>
@@ -50,34 +16,30 @@ public ToastViewport(string id = "toast-viewport")
```csharp
// MainLayout.htmx.cs
public IHtmxComponent ToastViewport { get; } = new ToastViewport();
protected override void RenderToastViewport(HtmxRenderContext ctx)
=> ToastViewport.Render(ctx.Next());
_toastViewport = new ToastViewport();
```
### Custom id (advanced)
That's all. Every call to `window.showToast(...)` will now display in the bottom-right corner of the screen.
---
## All the options
```csharp
new ToastViewport(id: "notifications-container")
public ToastViewport(string id = "toast-viewport")
```
Then update the JS lookup:
| Parameter | What it does |
|---|---|
| `id` | The element id. `components.js` looks for `#toast-viewport` by default. Only change this if you also update the JavaScript. |
```js
// In components.js or a custom script:
const viewport = document.getElementById('notifications-container');
```
---
### Custom position (bottom-left)
## How it works
The position is set by Tailwind classes on the rendered element. To change position, subclass the component or pass `extraClasses` if supported, or override the `toast-viewport` class in your `input.css`:
ToastViewport renders a single fixed `<div>` anchored to the bottom-right of the screen. It has `pointer-events: none` so it doesn't block clicks on the page behind it. Individual toasts set `pointer-events: auto` so their dismiss buttons are still clickable.
```css
.toast-viewport {
bottom: 1rem;
left: 1rem;
right: auto;
Toasts are appended to this element by `window.showToast()` and removed after their duration expires.
}
```