denozord
18f3a5312a
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m54s
133 lines
3.2 KiB
Markdown
133 lines
3.2 KiB
Markdown
# 🚀 Quick Start - UX Improvements
|
|
|
|
## Быстрый старт с новыми компонентами
|
|
|
|
### 1. Tooltip - добавьте подсказки везде
|
|
|
|
```jsx
|
|
import Tooltip from './components/Tooltip.jsx'
|
|
|
|
// На кнопках
|
|
<Tooltip content="Сохранить изменения" shortcut="Ctrl+S">
|
|
<button className="btn btn-primary">Сохранить</button>
|
|
</Tooltip>
|
|
|
|
// На иконках
|
|
<Tooltip content="Редактировать">
|
|
<IconEdit className="cursor-pointer" onClick={handleEdit} />
|
|
</Tooltip>
|
|
```
|
|
|
|
### 2. ValidatedInput - формы с валидацией
|
|
|
|
```jsx
|
|
import ValidatedInput from './components/ValidatedInput.jsx'
|
|
|
|
<ValidatedInput
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
validate={(val) => ({
|
|
valid: /\S+@\S+\.\S+/.test(val),
|
|
message: 'Введите корректный email'
|
|
})}
|
|
label="Email"
|
|
required
|
|
/>
|
|
```
|
|
|
|
### 3. ErrorAlert - улучшенные ошибки
|
|
|
|
```jsx
|
|
import ErrorAlert from './components/ErrorAlert.jsx'
|
|
|
|
<ErrorAlert
|
|
message="Не удалось загрузить данные"
|
|
error={error}
|
|
onRetry={fetchData}
|
|
onClose={() => setError(null)}
|
|
/>
|
|
```
|
|
|
|
### 4. LastSaved - покажите когда сохранено
|
|
|
|
```jsx
|
|
import LastSaved from './components/LastSaved.jsx'
|
|
|
|
<LastSaved timestamp={lastSavedTime} variant="compact" />
|
|
```
|
|
|
|
### 5. ContextMenu - действия в таблицах
|
|
|
|
```jsx
|
|
import ContextMenu from './components/ContextMenu.jsx'
|
|
|
|
<ContextMenu
|
|
items={[
|
|
{ label: 'Редактировать', icon: IconEdit, onClick: () => edit(item) },
|
|
{ label: 'Удалить', icon: IconTrash, onClick: () => remove(item), variant: 'danger' }
|
|
]}
|
|
/>
|
|
```
|
|
|
|
### 6. MobileCardView - мобильные таблицы
|
|
|
|
```jsx
|
|
import MobileCardView from './components/MobileCardView.jsx'
|
|
|
|
<MobileCardView
|
|
items={data}
|
|
renderContent={(item) => (
|
|
<div>
|
|
<div className="fw-bold">{item.name}</div>
|
|
<div className="text-muted small">{item.description}</div>
|
|
</div>
|
|
)}
|
|
actions={[
|
|
{ label: 'Редактировать', icon: IconEdit, onClick: handleEdit },
|
|
{ label: 'Удалить', icon: IconTrash, onClick: handleDelete, variant: 'danger' }
|
|
]}
|
|
/>
|
|
```
|
|
|
|
### 7. ProgressBar - покажите прогресс
|
|
|
|
```jsx
|
|
import ProgressBar from './components/ProgressBar.jsx'
|
|
|
|
<ProgressBar
|
|
progress={uploadProgress}
|
|
status="Загрузка файла..."
|
|
estimatedTime={30}
|
|
striped
|
|
animated
|
|
/>
|
|
```
|
|
|
|
## CSS Классы
|
|
|
|
Новые утилитарные классы:
|
|
|
|
```jsx
|
|
// Hover effect на карточках
|
|
<div className="card card-hover">...</div>
|
|
|
|
// Semantic colors
|
|
<span className="text-status-online">Онлайн</span>
|
|
<span className="text-status-offline">Оффлайн</span>
|
|
|
|
// Touch targets (автоматически на мобильных)
|
|
<button className="btn btn-icon">...</button>
|
|
```
|
|
|
|
## Полная документация
|
|
|
|
📖 **Детали:** `frontend/UX_IMPROVEMENTS.md`
|
|
📊 **Summary:** `UX_IMPROVEMENTS_SUMMARY.md`
|
|
|
|
## Поддержка
|
|
|
|
Вопросы? Проблемы? Смотрите примеры в:
|
|
- `Dashboard.jsx` - использование TrendIndicator, LastSaved, Tooltip
|
|
- Документацию выше
|
|
|