@nxgt/material 3.79.1 → 3.80.0

package/docs/components/rich-widgets.md

@@ -215,6 +215,32 @@ follow the language of an `I18nProvider` from `@nxgt/material/i18n` (see
 | `searchable` | `boolean` | `true` | search field filtering cards |
 | `reorderableColumns` | `boolean` | `true` | columns can be dragged |
 | `renderCard` | `(item, column) => ReactNode` | — | replaces the default card body |
+| `phoneLayout` | `'tabs' \| 'swipe' \| 'columns'` | unset (= `'columns'`) | below 768px of the board's own width: one column at a time under tabs, full-width snapping columns, or today's peeking columns |
+| `phoneColumn` / `onPhoneColumnChange` | `string` / `(columnId) => void` | first column | the column `tabs` shows (controlled) |
+
+### On a phone
+
+`phoneLayout="tabs"` puts a tab list (column name and card count) above the
+board and shows one column at a time under 768px; the selected column is kept
+in the board's state, or controlled with `phoneColumn`. The tabs follow the
+WAI-ARIA tabs keyboard model (arrows, Home, End). Every column stays in the
+markup and the switch is made by CSS container queries, so the server and the
+client render the same thing at every width; from 768px the tab list is gone
+and the board is the usual row of columns. `phoneLayout="swipe"` keeps all
+columns in a row, one per screen width, with scroll snapping.
+
+With either layout, a card's popover lists the other columns under "Move to"
+when the board is narrower than 768px (its own width, not the screen's), so a card can be moved without dragging; Ctrl/Cmd + arrows
+still move it, and with tabs the selected tab follows the card. A card drawn
+by `renderCard` has no popover: move it with the keys or drag.
+
+`useKanban()` returns `phoneColumnId` and `setPhoneColumn(id)`; the prop type is
+`KanbanPhoneLayout`. With `tabs` only the selected column is visible, so a card
+cannot be dragged to another tab; use Move to or Ctrl/Cmd + arrows.
+
+```tsx
+<Kanban phoneLayout="tabs" columns={columns} items={items} onColumnsChange={setColumns} />
+```
 
 **Storybook:** `Rich widgets/Kanban` · **Vue:** `Kanban`