Skip to content

Commit 5b491eb

Browse files
committed
docs(portal): use gn-example, cleanup
1 parent ec0dd0e commit 5b491eb

1 file changed

Lines changed: 1 addition & 38 deletions

File tree

  • apps/docs/src/pages/components/primitives

apps/docs/src/pages/components/primitives/portal.md

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,8 @@ Renderless teleport wrapper with automatic z-index stacking.
2727

2828
Portal wraps Vue's `<Teleport>` with automatic `useStack` integration. Content is teleported to `body` by default and receives a `zIndex` via slot props for proper overlay ordering.
2929

30-
::: example
30+
::: gn-example
3131
/components/portal/basic
32-
33-
### Basic
34-
35-
Toggle a floating element that teleports to the body on desktop or renders inline on mobile. Uses `disabled` with `useBreakpoints` for responsive behavior. Portal registers with the stack and provides `zIndex` for proper layering.
36-
3732
:::
3833

3934
## Anatomy
@@ -48,38 +43,6 @@ Toggle a floating element that teleports to the body on desktop or renders inlin
4843
</template>
4944
```
5045

51-
## Architecture
52-
53-
Portal is a thin abstraction over two existing v0 systems:
54-
55-
```mermaid "Portal Flow"
56-
flowchart LR
57-
Portal["Portal"]:::primary
58-
Teleport["Vue Teleport"]
59-
Stack["useStack"]
60-
61-
Portal --> Teleport
62-
Portal --> Stack
63-
64-
Teleport -->|"to prop"| Target["Target (body)"]
65-
Stack -->|"register()"| ZIndex["zIndex slot prop"]
66-
```
67-
68-
When mounted, Portal registers a stack ticket. The ticket's computed `zIndex` is exposed as a slot prop. When the component unmounts, the ticket is automatically cleaned up via scope disposal.
69-
70-
The `disabled` prop controls teleporting — when `true`, content renders inline instead of being teleported. Stack registration is always active regardless of `disabled` state.
71-
72-
## Examples
73-
74-
::: example
75-
/components/portal/stacking
76-
77-
### Stacking
78-
79-
Each Portal registers its own stack ticket. Add multiple layers to see how `useStack` assigns incrementing `zIndex` values — each new Portal layers above the previous one. Layers can be dismissed via the close button or programmatically. The `zIndex` slot prop updates reactively as layers are added and removed.
80-
81-
:::
82-
8346
## Accessibility
8447

8548
Portal is transparent — it adds no DOM elements, ARIA attributes, or keyboard behavior. Accessibility is the responsibility of the content you teleport.

0 commit comments

Comments
 (0)