jops-core 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -842,6 +842,7 @@ Add the `screens` attribute to give the Router a container of its own, with ever
|
|
|
842
842
|
- The `<Router>` tag is replaced by `<div class="jops-router">` (plus the tag's own `id` and `class`), styled `position: relative; overflow: hidden`. Its routes are placed inside it, not in the tag's parent element.
|
|
843
843
|
- **Give the container its size in your CSS**, e.g. fill the rest of a flex column: `.jops-router { flex: 1; min-height: 0; }`. Without a height it has none, and nothing is visible.
|
|
844
844
|
- Each route and each view opened with `navigate()` or `replace()` is wrapped in a `<div class="jops-screen">` that fills the container (`position: absolute; inset: 0`), **scrolls on its own** (`overflow: auto`) and has an opaque background. Set the background with the `--jops-screen-bg` CSS variable (default `Canvas`, the browser's page colour in light and dark mode): `.jops-router { --jops-screen-bg: var(--bg); }`.
|
|
845
|
+
- **Styling screens:** `.jops-screen` and `.jops-router` are hooks for your own CSS, e.g. padding inside every screen: `.jops-screen { padding: 0 24px 32px; }`. The properties the Router sets inline (`position`, `inset`, `overflow` and `background` on screens; `position` and `overflow` on the container) take precedence over your stylesheet; use `--jops-screen-bg` for the background.
|
|
845
846
|
- A new view **covers** the current one, which stays alive underneath. During the transition both are visible; afterwards the covered screen is `visibility: hidden` and `inert` (not painted, not focusable), so it keeps its scroll position and is shown again unchanged on Back. Inactive flat routes are hidden the same way.
|
|
846
847
|
- `slide` and `fade` move only the upper screen (the new one forward, the leaving one on Back), and also work for views with several top-level elements.
|
|
847
848
|
- Without `screens` (the default), routes are placed in the parent element and scroll with the page, as before.
|