Skip to content

Commit

Permalink
docs(Select): how-to-use (#3710)
Browse files Browse the repository at this point in the history
closes #3637

---------

Co-authored-by: gizeasy <[email protected]>
  • Loading branch information
alyonurchick1 and gizeasy authored Aug 29, 2024
1 parent 65b73ab commit 7a472d0
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 0 deletions.
69 changes: 69 additions & 0 deletions src/components/Select/__stand__/Select.use.stand.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { MdxMenu } from '@consta/stand';
import { MdxImage } from '@consta/stand';
import start_example from './images/Select_example_04.jpg';
import form from './images/Select_example_02.jpg';
import filter from './images/Select_example_01.jpg';
import server from './images/Select_example_03.jpg';

<MdxMenu>

- [Контекст использования](#контекст-использования)
- [Лучшие практики](#лучшие-практики)
- [Похожие компоненты](#похожие-компоненты)
- [Полезные ссылки](#полезные-ссылки)

</MdxMenu>

Используйте `Select`, чтобы дать пользователю возможность выбрать элемент из заранее определенного списка. Компонент часто применяется в формах, настройках, фильтрах, где значения предопределены.

<MdxImage src={start_example} />

# Контекст использования

## Формы ввода данных

Компонент `Select` может использоваться в формах ввода данных для выбора страны, языка, часового пояса, профессии и других параметров.

**Пример**. Выбор организации из преднастроенного списка в регистрационной форме.

<MdxImage src={form} />

## Фильтры и сортировка

Компонент подойдет для выбора критериев фильтрации или сортировки при поиске товаров, услуг или информации.

**Пример**. Фильтрация посещений по переходам из различных ресурсов.

<MdxImage src={filter} />

## Настройки и параметры

Компонент `Select` может использоваться для выбора различных параметров в настройках приложения.

**Пример**. Выбор настроек сервера из списка преднастроенных значений.

<MdxImage src={server} />

# Лучшие практики

## Подсказка

Вы можете добавить [подсказку](##LIBS.LIB.STAND.TAB/lib:uikit/stand:components-select-stable/tab:dev/hash:подсказка) для выбора элемента. Так, например, можно использовать слово "Выберите".

## Значение по умолчанию

Установите значение по умолчанию, если можно предположить, что один из элементов списка будет использоваться чаще других. Это поможет пользователю быстрее завершить заполнение формы.

## Группировка

Если в списке много элементов, разделите их на логические [группы](##LIBS.LIB.STAND.TAB/lib:uikit/stand:components-select-stable/tab:dev/hash:группы-вариантов). Это упростит навигацию и поиск нужного варианта.

# Похожие компоненты

[Combobox](##LIBS.LIB.STAND/lib:uikit/stand:components-combobox-stable) — выпадающий список с возможностью выбора нескольких элементов. Умеет предлагать подсказки на основе ввода.

# Полезные ссылки

- [Редполитика](##LIBS.LIB.STAND/lib:portal/stand:guidelines-editorialpolicy)
- [Создание иконок](##LIBS.LIB.STAND/lib:portal/stand:contributers-addicons)
- [Combobox](##LIBS.LIB.STAND/lib:uikit/stand:components-combobox-stable)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7a472d0

Please sign in to comment.