diff --git a/website/content/components/_meta.tsx b/website/content/components/_meta.tsx index 88a17cfc48..7260d6a211 100644 --- a/website/content/components/_meta.tsx +++ b/website/content/components/_meta.tsx @@ -178,6 +178,21 @@ const meta: MetaRecord = { 'use-modal-manager': 'useModalManager', 'use-today-date': 'useTodayDate', 'visually-hidden': 'VisuallyHidden', + + // Эти страницы нужны только для MCP, поэтому скрыты из навигации + '_partials': { display: 'hidden' }, + 'action-sheet-item': { display: 'hidden' }, + 'footer': { display: 'hidden' }, + 'header': { display: 'hidden' }, + 'list': { display: 'hidden' }, + 'panel-header-button': { display: 'hidden' }, + 'panel-header-content': { display: 'hidden' }, + 'panel-spinner': { display: 'hidden' }, + 'split-col': { display: 'hidden' }, + 'subnavigation-button': { display: 'hidden' }, + 'tabbar': { display: 'hidden' }, + 'tabbar-item': { display: 'hidden' }, + 'tabs-item': { display: 'hidden' }, }; export default meta; diff --git a/website/content/components/_partials/action-sheet-item-content.mdx b/website/content/components/_partials/action-sheet-item-content.mdx new file mode 100644 index 0000000000..3f3b7e7062 --- /dev/null +++ b/website/content/components/_partials/action-sheet-item-content.mdx @@ -0,0 +1,222 @@ +Подкомпонент для отображения элемента всплывающего меню [`ActionSheet`](/components/action-sheet). Каждому компоненту можно задать различные режимы отображения, +добавлять иконки и метаданные. + + + ```jsx + Сохранить + ``` + + +### Цвет + +Задаётся свойством `mode`. + +#### `"default"` + +Стандартный цвет отображения текста, используется в действиях, где нет необходимости в привлечении дополнительного внимания. + + + ```jsx + Сохранить + ``` + + +#### `"destructive"` + +Цвет критических действий (чаще всего красный), старайтесь располагать такие действия сверху списка, +где они наиболее заметны. + + + ```jsx + Удалить + ``` + + +#### ~`"cancel"`~ + +> **@deprecated** Since 8.0.0. Значение `"cancel"` устарело и будет удалено в **VKUI v10**. +> Используйте компонент [`ActionSheetDefaultIosCloseItem`](/components/action-sheet#action-sheet-default-ios-close-item) или передайте пропсы через `slotProps.iosCloseItem` в `ActionSheet`. + +Цвет действия отмены. + + + ```jsx + Отмена + ``` + + +### ~Кнопка "Отмена"~ + +> **@deprecated** Since 8.0.0. Свойство `isCancelItem` устарело и будет удалено в **VKUI v10**. +> Используйте компонент [`ActionSheetDefaultIosCloseItem`](/components/action-sheet#action-sheet-default-ios-close-item) или передайте пропсы через `slotProps.iosCloseItem` в `ActionSheet`. + +Свойство `isCancelItem` позволяет пометить пункт действия как "Отмена". + +Согласно рекомендациям **Apple** в `ActionSheet` должен быть вариант действия "Отмена", который +бы позволял закрывать всплывающее окно без выполнения дополнительных действий. + +> Обратите внимание, что такой компонент необходимо передавать в свойство `iosCloseItem` у `ActionSheet`, +> потому что данный компонент должен визуально отделяться от остальных пунктов. + +Подробнее с использованием можно ознакомиться на странице [`ActionSheet`](/components/action-sheet#cancel-item). + +### Текстовые элементы + +Основной контент компонента (заголовок) можно задать, передав в свойство `children` необходимый текст: + + + ```jsx + Скорость воспроизведения + ``` + + +Свойство `subtitle` позволяет отобразить дополнительный текст под заголовком: + + + ```jsx + Скорость воспроизведения + ``` + + +Свойство `meta` даёт возможность отобразить небольшой пояснительный текст или индикатор рядом с заголовком: + + + ```jsx + }> + Закрепить запись + + ``` + + +#### Многострочный режим + +По умолчанию большое количество текста обрезается и заменяется на многоточие, поддерживая однострочный режим отображения. +Это поведение можно отключить (_для всех текстовых элементов_) с помощью свойства `multiline`: + + + ```jsx + + Очень длинный заголовок просто для примера, старайтесь избегать такого + + ``` + + +### Контент в начале/в конце + +В компоненте доступна возможность добавления дополнительного контента слева и/или справа от текста, +задаётся свойством `before` и `after` соответственно. +Наиболее частый вариант использования свойств `before`/`after` - иконки или аватары. + +В соответствии с рекомендациями дизайн-системы, для десктопного представления (`compact`-режим) следует +использовать иконки размером `20px`, для мобильного представления (`regular`-режим) — `28px`. +Проще всего это сделать, используя компонент [`AdaptiveIconRenderer`](/components/adaptive-icon-renderer). + + + ```jsx + + } + > + Редактировать профиль + + ``` + + +### Состояния + +#### `disabled` + +Свойство позволяет отключить возможность взаимодействия с пунктом меню. + + + ```jsx + + Субтитры + + ``` + + +#### `selectable` + +Свойство даёт возможность выбирать элемент (визуальная и нативная имитация элемента радиокнопки). +При использовании данного свойства вы также можете передавать стандартные свойства радиокнопок, для управления поведением: + +- `name` — имя группы для радиокнопок; +- `value` — значение радиокнопки; +- `defaultChecked` — установить выбранным по умолчанию; +- `checked` и [`onChange`](#onchange) — для контролируемого извне использования выбранного значения; + + + +```jsx +const [filter, setFilter] = useState('Нормальная'); + +const onChange = (e) => { + // e.target.value будет равно значению, переданному в `value` выбранного компонента `ActionSheetItem` + setFilter(e.target.value); +}; + +return ['0.25x', '0.5x', '0.75x', 'Нормальная', '1.25x', '1.5x', '2x', '3x'].map((speed) => ( + + {speed} + +)); +``` + + + +Дополнительно через свойство `iconChecked` есть возможность изменить иконки радиокнопки, которая рисуется по умолчанию. + + + ```jsx + + } + > + 0.75x + + ``` + + +### Обработчики событий + +#### `onClick`/ `onImmediateClick` + +Нажатие на пункт меню можно обработать с помощью свойств `onClick` и `onImmediateClick`. + +По умолчанию `onClick` будет вызван после завершения анимации скрытия всплывающего меню и после вызова `onClosed`. +Из этого следует, что в объекте события значение поля `currentTarget` будет не определено. +Если вам нужен объект события именно на момент нажатия, воспользуйтесь `onImmediateClick`. + +> По умолчанию клик на пункт меню автоматически вызывает закрытие всплывающего меню (функцию, переданную в `onClosed` у `ActionSheet`). +> +> Если такое поведение нежелательно, то используйте свойство `autoCloseDisabled`. В таком случае закрытие всплывающего окна +> следует вызывать самостоятельно. + +#### `onChange` + +Если задано свойство `selectable={true}`, то выбор пункта следует обрабатывать с помощью свойства `onChange`. +Пример можно увидеть [выше](#selectable). + +### Ссылки + +Если указать свойство `href`, компонент будет рендериться как ссылка ``. +Также можно задать стандартное свойство `target`: + +```jsx + + Перейти на vk.com + +``` diff --git a/website/content/components/_partials/footer-content.mdx b/website/content/components/_partials/footer-content.mdx new file mode 100644 index 0000000000..d81c9983ef --- /dev/null +++ b/website/content/components/_partials/footer-content.mdx @@ -0,0 +1,82 @@ +Подвал группы. Передаётся в конце `children`. + +{/* @example-description: Базовый подвал `Footer` для мета-информации группы. */} + + ```jsx + + ``` + + +### Доступность (a11y) [#a11y] + +#### Семантическая роль + +По умолчанию использует HTML-тег `