aravint-ui-navigation 1.0.64 → 1.0.66
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 +12 -2
- package/dist/navigation.cjs.js +8 -8
- package/dist/navigation.css +1 -1
- package/dist/navigation.es.js +502 -478
- package/dist/types/types/SummaryDetailsCard.d.ts +4 -0
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -294,7 +294,13 @@ 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
|
|
@@ -304,6 +310,10 @@ const rows: DetailRow[] = [
|
|
|
304
310
|
| `rows` | `DetailRow[]` | — | Rows of fields, top to bottom, each row on its own divider-separated line |
|
|
305
311
|
| `className` | `string` | `'mt-2 mx-2'` | Extra classes on the outer card |
|
|
306
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 |
|
|
307
317
|
|
|
308
318
|
### Field (`DetailRow` = `DetailField[]`)
|
|
309
319
|
|
|
@@ -317,7 +327,7 @@ const rows: DetailRow[] = [
|
|
|
317
327
|
|
|
318
328
|
## Layout
|
|
319
329
|
|
|
320
|
-
- Every row uses the same
|
|
330
|
+
- Every row uses the same configurable grid (4 columns by default), so fields stay aligned
|
|
321
331
|
across rows regardless of how many fields a row has.
|
|
322
332
|
- Below 640px, the grid collapses to a single column and every field
|
|
323
333
|
goes full width, regardless of its `span`.
|