@emporix/component-library 1.5.0 → 1.5.2
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 +23 -24
- package/dist/index.es.js +535 -812
- package/dist/index.umd.js +1 -22
- package/dist/style.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -234,18 +234,17 @@ Collapsible content panels grouped in tabs.
|
|
|
234
234
|
|
|
235
235
|
```tsx
|
|
236
236
|
import { Accordion, AccordionTab } from '@emporix/cockpit-component-library'
|
|
237
|
-
|
|
238
|
-
<
|
|
239
|
-
<AccordionTab header="Header I">
|
|
237
|
+
;<Accordion activeIndex={0}>
|
|
238
|
+
<AccordionTab header='Header I'>
|
|
240
239
|
<p>
|
|
241
240
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
242
241
|
tempor incididunt ut labore et dolore magna aliqua.
|
|
243
242
|
</p>
|
|
244
243
|
</AccordionTab>
|
|
245
|
-
<AccordionTab header=
|
|
244
|
+
<AccordionTab header='Header II'>
|
|
246
245
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
|
|
247
246
|
</AccordionTab>
|
|
248
|
-
<AccordionTab header=
|
|
247
|
+
<AccordionTab header='Header III' disabled />
|
|
249
248
|
</Accordion>
|
|
250
249
|
```
|
|
251
250
|
|
|
@@ -253,9 +252,9 @@ import { Accordion, AccordionTab } from '@emporix/cockpit-component-library'
|
|
|
253
252
|
|
|
254
253
|
```tsx
|
|
255
254
|
<Accordion multiple activeIndex={[0, 2]}>
|
|
256
|
-
<AccordionTab header=
|
|
257
|
-
<AccordionTab header=
|
|
258
|
-
<AccordionTab header=
|
|
255
|
+
<AccordionTab header='Header I'>Content 1</AccordionTab>
|
|
256
|
+
<AccordionTab header='Header II'>Content 2</AccordionTab>
|
|
257
|
+
<AccordionTab header='Header III'>Content 3</AccordionTab>
|
|
259
258
|
</Accordion>
|
|
260
259
|
```
|
|
261
260
|
|
|
@@ -278,17 +277,17 @@ const [activeIndex, setActiveIndex] = useState<number[]>([0])
|
|
|
278
277
|
|
|
279
278
|
#### Props
|
|
280
279
|
|
|
281
|
-
| Prop | Type
|
|
282
|
-
| ----------------- |
|
|
283
|
-
| activeIndex
|
|
284
|
-
| multiple
|
|
285
|
-
| expandIcon
|
|
286
|
-
| collapseIcon
|
|
287
|
-
| onTabChange
|
|
288
|
-
| onTabOpen
|
|
289
|
-
| onTabClose
|
|
290
|
-
| transitionOptions | object
|
|
291
|
-
| unstyled
|
|
280
|
+
| Prop | Type | Default | Description |
|
|
281
|
+
| ----------------- | ---------------------------------------------------- | -------- | --------------------------------------------------- | ---- | ------------------------------------- |
|
|
282
|
+
| activeIndex | number | number[] | null | null | Index (or indexes) of expanded tab(s) |
|
|
283
|
+
| multiple | boolean | false | Allows multiple tabs to be expanded |
|
|
284
|
+
| expandIcon | ReactNode | - | Icon shown when a tab is collapsed |
|
|
285
|
+
| collapseIcon | ReactNode | - | Icon shown when a tab is expanded |
|
|
286
|
+
| onTabChange | (e: { index: number[]; originalEvent: any }) => void | - | Fired when the expanded tab(s) change |
|
|
287
|
+
| onTabOpen | (e: { index: number; originalEvent: any }) => void | - | Fired when a tab is opened |
|
|
288
|
+
| onTabClose | (e: { index: number; originalEvent: any }) => void | - | Fired when a tab is closed |
|
|
289
|
+
| transitionOptions | object | - | Configures the panel open/close transition |
|
|
290
|
+
| unstyled | boolean | false | When true, removes component styling (if supported) |
|
|
292
291
|
|
|
293
292
|
### AccordionTab
|
|
294
293
|
|
|
@@ -296,7 +295,7 @@ Defines a single accordion tab.
|
|
|
296
295
|
|
|
297
296
|
```tsx
|
|
298
297
|
<Accordion activeIndex={0}>
|
|
299
|
-
<AccordionTab header=
|
|
298
|
+
<AccordionTab header='Header I'>
|
|
300
299
|
<div>Tab content</div>
|
|
301
300
|
</AccordionTab>
|
|
302
301
|
</Accordion>
|
|
@@ -304,10 +303,10 @@ Defines a single accordion tab.
|
|
|
304
303
|
|
|
305
304
|
#### Props
|
|
306
305
|
|
|
307
|
-
| Prop | Type | Default | Description
|
|
308
|
-
| -------- | --------- | ------- |
|
|
309
|
-
| header | ReactNode | - | Header content (can be any React node)
|
|
310
|
-
| disabled | boolean | false | Disables clicking/toggling this tab
|
|
306
|
+
| Prop | Type | Default | Description |
|
|
307
|
+
| -------- | --------- | ------- | ------------------------------------------ |
|
|
308
|
+
| header | ReactNode | - | Header content (can be any React node) |
|
|
309
|
+
| disabled | boolean | false | Disables clicking/toggling this tab |
|
|
311
310
|
| children | ReactNode | - | Content to render when the tab is expanded |
|
|
312
311
|
|
|
313
312
|
## Theming with CSS Variables
|