Layer Provider
@astryxdesign/core v0.7.1 · LayerProvider
Props
| Prop | Type | Default | Description |
|---|---|---|---|
toast | LayerToastConfig | — | Toast viewport configuration: position, maxVisible, and a toast-only inset that overrides the provider inset per edge for toasts shown through useToast(). |
inset | LayerInset | every edge 0 | A persistent bar floating over a viewport edge, declared once: blockStart, blockEnd, inlineStart, inlineEnd as pixel numbers or CSS lengths. Each edge adds to the gutter every anchored layer keeps from that edge and moves the toast viewport by the same amount. |
Slots
| Slot | Description |
|---|---|
default | Application subtree that can use the shared layer context. |
LayerToastConfig
| Field | Type | Default | Description |
|---|---|---|---|
position | ToastPlacement | 'bottom-end' | Corner the toast viewport sits in: top-start, top-center, top-end, bottom-start, bottom-center, or bottom-end. A placement on ToastViewport still wins. |
maxVisible | number | no limit | How many toasts stay on screen at once. When more are queued, only the newest ones render. |
inset | LayerInset | — | Per-edge offset for the toast viewport only. An edge written here replaces the provider inset for that edge; edges left out keep the provider value. |
LayerInset
| Field | Type | Description |
|---|---|---|
blockStart | number | string | Offset added to the gutter at the top edge. A number is pixels; a string is any CSS length, such as '4rem' or 'env(safe-area-inset-top, 0px)'. |
blockEnd | number | string | Same, for the bottom edge. |
inlineStart | number | string | Same, for the inline-start edge. |
inlineEnd | number | string | Same, for the inline-end edge. |
Exports
| Export | Type | Description |
|---|---|---|
useLayerConfig | () => ComputedRef<LayerContextValue> | null | The nearest provider configuration, or null outside one. |
useLayerGutter | () => ComputedRef<LayerGutter> | Distance an anchored layer keeps from each viewport edge: the larger of the spacing-4 step and the device safe area, plus the provider inset. |
resolveInset | (inset?: LayerInset) => ResolvedLayerInset | Turns an inset into pixels. |
mergeInset | (primary?: LayerInset, fallback?: LayerInset) => ResolvedLayerInset | Merges two insets edge by edge: an edge set on primary wins, the rest come from fallback. |
Native attributes
The component renders no element of its own, so class and style are not forwarded.