@sticky-aside/svelte 1.0.0 → 1.1.0
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 +45 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,13 +6,55 @@ Svelte 5 adapter for [@sticky-aside/core](https://github.com/maprox/sticky-aside
|
|
|
6
6
|
npm install @sticky-aside/svelte
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
+
The offset is a CSS length. Two ways to set it.
|
|
10
|
+
|
|
11
|
+
### Your own class
|
|
12
|
+
|
|
13
|
+
`topClass` replaces `sticky-aside-top`. `bottomClass` replaces `sticky-aside-bottom`. The library measures the gap between those two rules, so both have to exist. This variant leaves out `offsets.css`.
|
|
14
|
+
|
|
15
|
+
The classes land on an inner element and on a measure node created in script. A scoped selector has to use `:global` to reach them.
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import { StickyAside } from '@sticky-aside/svelte'
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<div class="layout">
|
|
23
|
+
<StickyAside as="aside" topClass="top-10" bottomClass="bottom-0">
|
|
24
|
+
<nav>...</nav>
|
|
25
|
+
</StickyAside>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<style>
|
|
29
|
+
.layout :global(.top-10) {
|
|
30
|
+
top: 40px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.layout :global(.bottom-0) {
|
|
34
|
+
bottom: 0;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### `offsets.css`
|
|
40
|
+
|
|
41
|
+
Import the stylesheet once. It defines `sticky-aside-top` and `sticky-aside-bottom`. Set `--sticky-aside-top` on an ancestor. The default is `0px`.
|
|
42
|
+
|
|
9
43
|
```svelte
|
|
10
44
|
<script lang="ts">
|
|
11
45
|
import { StickyAside } from '@sticky-aside/svelte'
|
|
12
46
|
import '@sticky-aside/core/offsets.css'
|
|
13
47
|
</script>
|
|
14
48
|
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
49
|
+
<div class="layout">
|
|
50
|
+
<StickyAside as="aside">
|
|
51
|
+
<nav>...</nav>
|
|
52
|
+
</StickyAside>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<style>
|
|
56
|
+
.layout {
|
|
57
|
+
--sticky-aside-top: 40px;
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
18
60
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sticky-aside/svelte",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Svelte adapter for @sticky-aside/core.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sticky",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"dist"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@sticky-aside/core": "^1.
|
|
34
|
+
"@sticky-aside/core": "^1.1.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"svelte": "^5.0.0"
|