Учебник Carbon Components Svelte

Введение
- Что такое Carbon Design System
- История и философия IBM Carbon
- Зачем нужна библиотека Carbon Components Svelte
- Установка и первоначальная настройка
- Структура проекта и организация файлов
- Системные требования и зависимости
Основы работы с компонентами
- Импорт компонентов в Svelte
- Базовая структура Carbon-компонента
- Передача props и работа с атрибутами
- События и обработчики событий
- Слоты и композиция компонентов
- Реактивность и обновление состояния
- Стилизация и переопределение стилей
- Темизация компонентов
Типографика и текстовые элементы
- Heading и заголовки разных уровней
- Paragraph и форматирование текста
- Link и текстовые ссылки
- Truncate и обрезка длинного текста
- Code и CodeSnippet для отображения кода
- OrderedList и UnorderedList
- Blockquote и цитаты
Кнопки и интерактивные элементы
- Button и его варианты
- IconButton для кнопок с иконками
- ButtonSet и группировка кнопок
- ButtonSkeleton для состояния загрузки
- Работа с размерами кнопок
- Disabled и loading состояния
- Tooltip на кнопках
Формы и поля ввода
- TextInput и базовый ввод текста
- TextArea для многострочного ввода
- PasswordInput для паролей
- NumberInput и работа с числами
- Search и поле поиска
- Валидация полей ввода
- Состояния ошибок и предупреждений
- Helper text и подсказки
- FormGroup и организация полей
- FormLabel и метки
Выбор и переключатели
- Checkbox и множественный выбор
- RadioButton и RadioButtonGroup
- Toggle для переключателей
- Select и выпадающие списки
- ComboBox для автодополнения
- MultiSelect для множественного выбора
- Dropdown и расширенные выпадающие меню
- FilterableMultiSelect
- TimePickerSelect для выбора времени
Работа с датами и временем
- DatePicker для выбора даты
- DatePickerInput и кастомизация
- TimePicker для выбора времени
- Настройка форматов даты и времени
- Локализация календаря
- Диапазоны дат
- Ограничения и валидация дат
Табы и навигация
- Tabs и Tab для вкладок
- TabContent и управление содержимым
- ContentSwitcher для переключения контента
- OverflowMenu для скрытых опций
- Breadcrumb для навигационных цепочек
- Pagination для постраничной навигации
- ProgressIndicator для многошаговых процессов
Уведомления и обратная связь
- InlineNotification для встроенных уведомлений
- ToastNotification для всплывающих сообщений
- NotificationActionButton
- InlineLoading для индикации загрузки
- Loading для полноэкранной загрузки
- ProgressBar для отображения прогресса
- SkeletonText и SkeletonPlaceholder
Модальные окна и оверлеи
- Modal и базовые модальные окна
- ComposedModal для сложных модалок
- ModalHeader, ModalBody, ModalFooter
- PassiveModal без действий
- TransactionalModal для подтверждений
- Управление фокусом в модальных окнах
- Анимации открытия и закрытия
Таблицы и отображение данных
- DataTable и основы работы с таблицами
- Table, TableHead, TableBody, TableRow, TableCell
- TableHeader для заголовков столбцов
- TableContainer и TableToolbar
- Сортировка данных в таблице
- Фильтрация строк таблицы
- Pagination в таблицах
- TableBatchActions для массовых действий
- Expandable rows для раскрывающихся строк
- Selectable rows и выбор строк
- TableSkeleton для загрузки
Списки и древовидные структуры
- StructuredList для структурированных списков
- TreeView для иерархических данных
- TreeNode и работа с узлами
- Раскрытие и сворачивание узлов
- Выбор элементов в дереве
- Иконки и кастомизация узлов
Аккордеоны и раскрывающиеся блоки
- Accordion и Accordion Item
- Управление раскрытием секций
- Вложенные аккордеоны
- Иконки и кастомизация заголовков
- Программное управление состоянием
Теги и бейджи
- Tag для меток и категорий
- Типы тегов и их применение
- Filter tags для фильтрации
- Интерактивные теги с закрытием
- Tag Skeleton для загрузки
Тайлы и карточки
- Tile и базовые плитки
- ClickableTile для интерактивных плиток
- SelectableTile для выбора
- ExpandableTile для раскрывающихся плиток
- RadioTile для выбора одного варианта
- TileGroup для группировки
Поиск и фильтрация
- Search для поиска по контенту
- SearchSkeleton для загрузки
- Debounce и оптимизация запросов
- Кастомные фильтры
Иконки
- Импорт и использование Carbon Icons
- Размеры иконок
- Цвета и стилизация
- Создание кастомных иконок
- Icon-only компоненты
Файлы и загрузка
- FileUploader для загрузки файлов
- FileUploaderButton
- FileUploaderDropContainer
- FileUploaderItem
- Валидация типов файлов
- Ограничение размера файлов
- Множественная загрузка
Слайдеры и ползунки
- Slider для выбора значения
- ContentSwitcher как альтернатива
- Настройка диапазона значений
- Шаги и дискретные значения
- Форматирование отображаемых значений
Боковые панели и выдвижные меню
- SideNav для боковой навигации
- SideNavItems и SideNavLink
- SideNavMenu для вложенных меню
- Header для шапки приложения
- HeaderNav и HeaderNavItem
- HeaderGlobalBar
- SkipToContent для доступности
Сетка и лейаут
- Grid и система сеток Carbon
- Row и Column для строк и колонок
- Breakpoints и адаптивность
- Gutter и отступы
- FlexGrid для гибких лейаутов
- Вложенные сетки
Темы и кастомизация
- Переключение между темами
- White, Gray10, Gray90, Gray100 темы
- CSS-переменные Carbon
- Создание кастомной темы
- Theme provider и контекст
- Программное изменение темы
- Настройка цветовой палитры
Доступность
- ARIA-атрибуты в компонентах
- Навигация с клавиатуры
- Управление фокусом
- Screen reader support
- Контрастность и читаемость
- Тестирование доступности
Производительность и оптимизация
- Ленивая загрузка компонентов
- Tree shaking и уменьшение бандла
- Виртуализация длинных списков
- Оптимизация ререндеров
- Мемоизация в Svelte
- Профилирование компонентов
Интеграция с экосистемой
- Работа с SvelteKit
- TypeScript и типизация
- Stores и управление состоянием
- Формы и валидация с внешними библиотеками
- Интернационализация
- Тестирование компонентов
Паттерны и практики
- Композиция сложных форм
- Построение дашбордов
- Обработка ошибок
- Управление асинхронными операциями
- Шаблоны навигации
- Организация кода
Миграция и обновление
- Миграция с других UI-фреймворков
- Обновление версий библиотеки
- Breaking changes и совместимость
- Постепенное внедрение Carbon
- Рефакторинг существующего кода
Расширение и кастомизация
- Создание обёрток над Carbon-компонентами
- Добавление новой функциональности
- Переопределение стилей компонентов
- Создание собственных компонентов в стиле Carbon
- Best practices при расширении