components / detail-list
detail-list.
label/value metadata as a real <dl>, in row, two-column grid or stacked layouts. for the handful of unrelated facts about one thing — the case stat-tile (one number) and manager-table (many identical rows) both miss. server-renderable.
rows
- what
- coffee
- when
- wed, aug 5 · 9:30 amamerica/los_angeles
- where
- google meet
- how long
- 30m
grid
- guest
- sam rivera
- sam@example.com
- booked
- aug 1, 4:12 pm
- zone
- europe/berlin
- notes
- want to talk through the migration plan before the review.
installation
bunx @justin06lee/chrome@latest add detail-listprops
| name | type | default | description |
|---|---|---|---|
| items * | DetailItem[] | - | { label, value, icon?, note?, wide? }. wide spans both columns in the grid layout. |
| layout | 'rows' | 'grid' | 'stacked' | 'rows' | 'rows' is label left / value right on one line; 'grid' is a two-column card of label-over-value cells; 'stacked' is a single column of them. |
| divided | boolean | true | hairlines between rows; only meaningful for 'rows'. |
| dense | boolean | false | tightens the row padding. |
| className | string | - |