@gnireeg/accordion 0.1.8 → 0.1.9
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 +32 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,17 +29,40 @@ npm install @gnireeg/accordion
|
|
|
29
29
|
</script>
|
|
30
30
|
|
|
31
31
|
<accordion-item>
|
|
32
|
-
<button slot="trigger">Click to expand</button>
|
|
32
|
+
<button slot="trigger-container">Click to expand</button>
|
|
33
33
|
<div>Your content here</div>
|
|
34
34
|
</accordion-item>
|
|
35
35
|
|
|
36
36
|
<!-- Start expanded -->
|
|
37
37
|
<accordion-item open>
|
|
38
|
-
<button slot="trigger">Already open</button>
|
|
38
|
+
<button slot="trigger-container">Already open</button>
|
|
39
39
|
<div>This content is visible by default</div>
|
|
40
40
|
</accordion-item>
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
### Selective Trigger (Advanced)
|
|
44
|
+
|
|
45
|
+
Use the `accordion-trigger` attribute to specify which element should toggle the accordion. This allows you to place additional interactive elements alongside the trigger:
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<accordion-item>
|
|
49
|
+
<div slot="trigger-container" class="flex gap-2">
|
|
50
|
+
<!-- Only this button toggles the accordion -->
|
|
51
|
+
<button accordion-trigger class="flex-1">
|
|
52
|
+
Expand details
|
|
53
|
+
</button>
|
|
54
|
+
|
|
55
|
+
<!-- These buttons won't toggle the accordion -->
|
|
56
|
+
<button onclick="edit()">Edit</button>
|
|
57
|
+
<button onclick="delete()">Delete</button>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div>Your content here</div>
|
|
61
|
+
</accordion-item>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
> **Note:** If no element with the `accordion-trigger` attribute is found, the entire trigger container will toggle the accordion (backward compatible behavior).
|
|
65
|
+
|
|
43
66
|
### Accordion Group (Mutual Exclusion)
|
|
44
67
|
|
|
45
68
|
Wrap multiple accordion items in an `accordion-group` to ensure only one can be open at a time:
|
|
@@ -47,17 +70,17 @@ Wrap multiple accordion items in an `accordion-group` to ensure only one can be
|
|
|
47
70
|
```html
|
|
48
71
|
<accordion-group>
|
|
49
72
|
<accordion-item open>
|
|
50
|
-
<button slot="trigger">First Item</button>
|
|
73
|
+
<button slot="trigger-container">First Item</button>
|
|
51
74
|
<div>Only one item can be open at a time</div>
|
|
52
75
|
</accordion-item>
|
|
53
76
|
|
|
54
77
|
<accordion-item>
|
|
55
|
-
<button slot="trigger">Second Item</button>
|
|
78
|
+
<button slot="trigger-container">Second Item</button>
|
|
56
79
|
<div>Opening this will close the first</div>
|
|
57
80
|
</accordion-item>
|
|
58
81
|
|
|
59
82
|
<accordion-item>
|
|
60
|
-
<button slot="trigger">Third Item</button>
|
|
83
|
+
<button slot="trigger-container">Third Item</button>
|
|
61
84
|
<div>Same behavior here</div>
|
|
62
85
|
</accordion-item>
|
|
63
86
|
</accordion-group>
|
|
@@ -67,7 +90,7 @@ Wrap multiple accordion items in an `accordion-group` to ensure only one can be
|
|
|
67
90
|
|
|
68
91
|
```html
|
|
69
92
|
<accordion-item animation-time="500" animation-easing="ease-in-out">
|
|
70
|
-
<button slot="trigger">Slow animation</button>
|
|
93
|
+
<button slot="trigger-container">Slow animation</button>
|
|
71
94
|
<div>This opens and closes slower</div>
|
|
72
95
|
</accordion-item>
|
|
73
96
|
```
|
|
@@ -112,7 +135,7 @@ accordion.addEventListener('accordion-closed', (e) => {
|
|
|
112
135
|
|
|
113
136
|
| Slot | Description |
|
|
114
137
|
|------|-------------|
|
|
115
|
-
| `trigger` |
|
|
138
|
+
| `trigger-container` | Container for the trigger element(s). Use `accordion-trigger` attribute to specify which element toggles the accordion |
|
|
116
139
|
| (default) | The accordion content |
|
|
117
140
|
|
|
118
141
|
#### Methods
|
|
@@ -146,12 +169,12 @@ Use the `[open]` attribute selector to style accordion items when expanded:
|
|
|
146
169
|
|
|
147
170
|
```css
|
|
148
171
|
/* Rotate chevron icon when accordion is open */
|
|
149
|
-
accordion-item[open] [slot="trigger"] svg {
|
|
172
|
+
accordion-item[open] [slot="trigger-container"] svg {
|
|
150
173
|
transform: rotate(180deg);
|
|
151
174
|
}
|
|
152
175
|
|
|
153
176
|
/* Change background color when open */
|
|
154
|
-
accordion-item[open] [slot="trigger"] {
|
|
177
|
+
accordion-item[open] [slot="trigger-container"] {
|
|
155
178
|
background-color: #f1f5f9;
|
|
156
179
|
}
|
|
157
180
|
|
package/package.json
CHANGED