slidytabs 0.1.3 → 0.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 +117 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# slidytabs
|
|
2
|
+
|
|
3
|
+
A DOM-level utility for animating shadcn `<Tabs />`
|
|
4
|
+
|
|
5
|
+
Works with [`shadcn`](https://ui.shadcn.com/docs/components/tabs), [`shadcn-svelte`](https://www.shadcn-svelte.com/docs/components/tabs), and [`shadcn-vue`](https://www.shadcn-vue.com/docs/components/tabs).
|
|
6
|
+
|
|
7
|
+
Examples/demo at https://slidytabs.dev
|
|
8
|
+
|
|
9
|
+
## Why this exists
|
|
10
|
+
|
|
11
|
+
- `shadcn` `<Tabs />` jump between positions, which can feel abrupt in motion-oriented UIs. A solution should work with Tabs as-is, not as a wrapper.
|
|
12
|
+
|
|
13
|
+
- **Separately:** Tabs are good for discrete structure; sliders are good for continuous interaction — there isn't a clear way to combine the two. [See the first `slider()` example](http://slidytabs.dev#slider) (demo site)
|
|
14
|
+
|
|
15
|
+
## Install
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm i slidytabs
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
`tabs()` adds a sliding animation where `value` updates would normally be “jumpy”. Use `slider()` or `range()` instead, for additional functionality. `tabs()`, `slider()`, and `range()` each return a setup function, automatically called by your framework.
|
|
24
|
+
|
|
25
|
+
### React
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { tabs } from "slidytabs";
|
|
29
|
+
import { Tabs } from "@/components/ui/tabs";
|
|
30
|
+
|
|
31
|
+
<Tabs ref={tabs()}>
|
|
32
|
+
…
|
|
33
|
+
</Tabs>;
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
[What’s a ref callback?](https://react.dev/reference/react-dom/components/common#ref-callback)
|
|
37
|
+
|
|
38
|
+
### Svelte
|
|
39
|
+
|
|
40
|
+
```svelte
|
|
41
|
+
<script lang="ts">
|
|
42
|
+
import { tabs } from "slidytabs";
|
|
43
|
+
import * as Tabs from "$lib/components/ui/tabs/index.js";
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<Tabs.Root {@attach tabs()}>
|
|
47
|
+
…
|
|
48
|
+
</Tabs>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
[What’s an attachment?](https://svelte.dev/docs/svelte/@attach)
|
|
52
|
+
|
|
53
|
+
### Vue
|
|
54
|
+
|
|
55
|
+
```vue
|
|
56
|
+
<script setup lang="ts">
|
|
57
|
+
import { tabs } from "slidytabs";
|
|
58
|
+
import { Tabs } from "@/components/ui/tabs";
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<Tabs :ref="tabs()">
|
|
62
|
+
…
|
|
63
|
+
</Tabs>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
[What’s a ref callback?](https://vuejs.org/guide/essentials/template-refs#function-refs)
|
|
67
|
+
|
|
68
|
+
## Usage
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
import { tabs, slider, range } from "slidytabs";
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Make tabs slide with `tabs()`
|
|
75
|
+
|
|
76
|
+
`value` is a single index. `tabs()` works uncontrolled, or can be controlled via `shadcn`’s `value`/`onValueChange` props _or_ via `slidytabs`’ index-based props.
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
tabs(options?: {
|
|
80
|
+
value?: number;
|
|
81
|
+
onValueChange?: (value: number) => void;
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Make tabs a slider with `slider()`
|
|
86
|
+
|
|
87
|
+
Same as `tabs()`, with a draggable tab.
|
|
88
|
+
|
|
89
|
+
`sticky: number` appears visually as a range slider, with one fixed endpoint. `sticky` is not compatible with `shadcn` control props.
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
slider(options?: {
|
|
93
|
+
value?: number;
|
|
94
|
+
onValueChange?: (value: number) => void;
|
|
95
|
+
sticky?: number;
|
|
96
|
+
});
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Make tabs a range slider with `range()`
|
|
100
|
+
|
|
101
|
+
`value` is a pair of indices `[start, end]`. Not compatible with `shadcn` control props.
|
|
102
|
+
|
|
103
|
+
`push: boolean` lets one endpoint push the other.
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
range(options?: {
|
|
107
|
+
value: [number, number];
|
|
108
|
+
onValueChange?: (value: [number, number]) => void;
|
|
109
|
+
push?: boolean;
|
|
110
|
+
});
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Bugs
|
|
114
|
+
|
|
115
|
+
Getting this to work requires some `document.styleSheets` acrobatics, and this is an early release, so edge cases likely exist.
|
|
116
|
+
|
|
117
|
+
Please open issues, especially if your Tabs component works as expected without `slidytabs`, but behaves unexpectedly once `slidytabs` is applied.
|