@brandup/ui-kit 1.0.43 → 1.0.44
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 +43 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://dev.azure.com/brandup/BrandUp%20Core/_build/latest?definitionId=81&branchName=main)
|
|
4
4
|
|
|
5
|
-
Базовый пакет UI-кита: сброс стилей, типографика, стили полей ввода, PopupManager и middleware для `@brandup/ui-app`.
|
|
5
|
+
Базовый пакет UI-кита: сброс стилей, типографика, стили полей ввода, модальное окно, PopupManager и middleware для `@brandup/ui-app`.
|
|
6
6
|
|
|
7
7
|
## Установка
|
|
8
8
|
|
|
@@ -57,6 +57,48 @@ PopupManager.close();
|
|
|
57
57
|
PopupManager.isOpened(); // boolean
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
+
## Modal
|
|
61
|
+
|
|
62
|
+
Базовое модальное окно: затемнение, шапка с заголовком и крестиком, тело. Наследник наполняет `body` в своём конструкторе и живёт до `close()`; само окно знает только про рамку, слои и закрытие.
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import { Modal } from "@brandup/ui-kit";
|
|
66
|
+
|
|
67
|
+
class ConfirmModal extends Modal {
|
|
68
|
+
constructor() {
|
|
69
|
+
super({ title: "Удалить?", className: "confirm-modal", closeOnBackdrop: false });
|
|
70
|
+
|
|
71
|
+
this.body.append(/* ... */);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const modal = new ConfirmModal();
|
|
76
|
+
modal.onClosed(() => {
|
|
77
|
+
/* отпустить то, что придержали на время окна */
|
|
78
|
+
});
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
| Член | Описание |
|
|
82
|
+
| --- | --- |
|
|
83
|
+
| `body` | Тело окна — его наполняет наследник |
|
|
84
|
+
| `close()` | Закрыть окно (то же делают крестик, Esc и клик по подложке) |
|
|
85
|
+
| `onClose()` | Хук наследника перед закрытием |
|
|
86
|
+
| `onClosed(handler)` | Подписка на закрытие: срабатывает ровно один раз, чем бы окно ни кончилось; на уже закрытом окне — сразу |
|
|
87
|
+
|
|
88
|
+
Закрытие идёт через систему команд кита (`ui-modal-close`), поэтому свои кнопки закрытия достаточно объявить тем же `data-command`. Пока окно открыто, на `<body>` висит класс `ui-modal-opened` — страница под ним не прокручивается.
|
|
89
|
+
|
|
90
|
+
## Прокручиваемые области
|
|
91
|
+
|
|
92
|
+
Класс `ui-scrollable` оформляет полосу прокрутки одинаково во всех компонентах кита — тонкая, без стрелок, со скруглённым ползунком. Размер и цвет переопределяются CSS-переменными `--scrollbar-size`, `--scrollbar-thumb` и `--scrollbar-thumb-radius` прямо на элементе.
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
import { SCROLLABLE_CLASS } from "@brandup/ui-kit";
|
|
96
|
+
|
|
97
|
+
const list = DOM.tag("div", { class: SCROLLABLE_CLASS });
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Оформление держится на `::-webkit-scrollbar`: стандартные `scrollbar-width`/`scrollbar-color` не задаются намеренно — Blink при них отдаёт системную полосу со стрелками. Браузерам без `::-webkit-scrollbar` (Firefox) стандартные свойства выдаются отдельным правилом.
|
|
101
|
+
|
|
60
102
|
## Утилиты
|
|
61
103
|
|
|
62
104
|
```typescript
|