pne-ui 3.0.30 → 3.0.31
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 +41 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -319,6 +319,47 @@ const AppShell = () => (
|
|
|
319
319
|
- `PermanentOverlay` можно размещать на любом уровне дерева под хостом; последний зарегистрированный в слоте заменяет предыдущий.
|
|
320
320
|
- Слоты фиксированы четырьмя углами; сместить позицию можно через `offset`/`zIndex` пропы на `PermanentOverlay`.
|
|
321
321
|
|
|
322
|
+
## PneFloatingActionButtons
|
|
323
|
+
|
|
324
|
+
Плавающее меню действий: на десктопе показывает стек FAB над триггером и параллельно меню, на мобильных все пункты уходят
|
|
325
|
+
в меню. Поддерживает экшены, произвольные блоки контента и разделители. По умолчанию мобильным считается ширина `<= 800px`
|
|
326
|
+
(`mobileBreakpoint`), на десктопе action-кнопки остаются доступны и в меню, и в стеке.
|
|
327
|
+
|
|
328
|
+
Ключевые пропы:
|
|
329
|
+
- `actions: PneFabItem[]` — массив элементов: action `{ id, label, onClick, icon?, disabled?, tooltip? }`,
|
|
330
|
+
divider `{ kind: 'divider' }`, content `{ kind: 'content', node }`.
|
|
331
|
+
- `mobileBreakpoint` (default `800`) — ширина, ниже которой показываем только меню.
|
|
332
|
+
- `position` (`{ bottom?: number; right?: number }`) — смещение от края.
|
|
333
|
+
- `fabLabel`/`fabIcon` — подпись и иконка триггера.
|
|
334
|
+
- `bannerText` — необязательный блок внизу меню.
|
|
335
|
+
|
|
336
|
+
Минимальный пример:
|
|
337
|
+
|
|
338
|
+
```tsx
|
|
339
|
+
import { PneFloatingActionButtons, overlayActions } from 'pne-ui'
|
|
340
|
+
|
|
341
|
+
const actions = [
|
|
342
|
+
{ id: 'reset', label: 'Reset layout', onClick: () => overlayActions.showInfo({ message: 'Reset' }) },
|
|
343
|
+
{ id: 'save', label: 'Save', onClick: () => overlayActions.showSuccess({ message: 'Saved' }) },
|
|
344
|
+
{ id: 'divider', kind: 'divider' as const },
|
|
345
|
+
{ id: 'custom', kind: 'content' as const, node: <div style={{ padding: 8 }}>Any JSX here</div> },
|
|
346
|
+
]
|
|
347
|
+
|
|
348
|
+
export const FabDemo = () => (
|
|
349
|
+
<PneFloatingActionButtons
|
|
350
|
+
actions={actions}
|
|
351
|
+
fabLabel='Actions'
|
|
352
|
+
bannerText='Edit widgets'
|
|
353
|
+
position={{ bottom: 24, right: 24 }}
|
|
354
|
+
mobileBreakpoint={900} // считать мобильным до 900px, иначе поведение как на десктопе
|
|
355
|
+
/>
|
|
356
|
+
)
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
Поведение по размерам:
|
|
360
|
+
- Ширина > `mobileBreakpoint`: стек FAB над триггером + меню (все action-пункты дублируются в меню).
|
|
361
|
+
- Ширина <= `mobileBreakpoint`: только триггер + меню, стек FAB скрыт.
|
|
362
|
+
|
|
322
363
|
[npm-url]: https://www.npmjs.com/package/pne-ui
|
|
323
364
|
|
|
324
365
|
[npm-image]: https://img.shields.io/npm/v/pne-ui
|