aravint-ui-navigation 1.0.63 → 1.0.65
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 +17 -6
- package/dist/navigation.cjs.js +8 -8
- package/dist/navigation.css +1 -1
- package/dist/navigation.es.js +504 -473
- package/dist/types/types/SummaryDetailsCard.d.ts +5 -0
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -294,15 +294,26 @@ const rows: DetailRow[] = [
|
|
|
294
294
|
],
|
|
295
295
|
];
|
|
296
296
|
|
|
297
|
-
<SummaryDetailsCard
|
|
297
|
+
<SummaryDetailsCard
|
|
298
|
+
rows={rows}
|
|
299
|
+
columns={3}
|
|
300
|
+
backgroundColor="#fff"
|
|
301
|
+
title="Shipment Charges"
|
|
302
|
+
onEdit={() => console.log('Edit shipment charges')}
|
|
303
|
+
/>
|
|
298
304
|
```
|
|
299
305
|
|
|
300
306
|
## Props
|
|
301
307
|
|
|
302
|
-
| Prop
|
|
303
|
-
|
|
|
304
|
-
| `rows`
|
|
305
|
-
| `className`
|
|
308
|
+
| Prop | Type | Default | Description |
|
|
309
|
+
| ------------------ | ------------- | -------------- | ---------------------------------------------- |
|
|
310
|
+
| `rows` | `DetailRow[]` | — | Rows of fields, top to bottom, each row on its own divider-separated line |
|
|
311
|
+
| `className` | `string` | `'mt-2 mx-2'` | Extra classes on the outer card |
|
|
312
|
+
| `showRowDividers` | `boolean` | `true` | Show a top border between rows |
|
|
313
|
+
| `columns` | `1 \| 2 \| 3 \| 4` | `4` | Number of columns in each row on desktop/tablet |
|
|
314
|
+
| `backgroundColor` | `CSSProperties['backgroundColor']` | Existing card background | Optional card background color |
|
|
315
|
+
| `title` | `ReactNode` | — | Optional title shown in the card header |
|
|
316
|
+
| `onEdit` | `() => void` | — | Optional callback; when provided, shows an Edit button that calls it |
|
|
306
317
|
|
|
307
318
|
### Field (`DetailRow` = `DetailField[]`)
|
|
308
319
|
|
|
@@ -316,7 +327,7 @@ const rows: DetailRow[] = [
|
|
|
316
327
|
|
|
317
328
|
## Layout
|
|
318
329
|
|
|
319
|
-
- Every row uses the same
|
|
330
|
+
- Every row uses the same configurable grid (4 columns by default), so fields stay aligned
|
|
320
331
|
across rows regardless of how many fields a row has.
|
|
321
332
|
- Below 640px, the grid collapses to a single column and every field
|
|
322
333
|
goes full width, regardless of its `span`.
|