https://github.com/lessthanzero/mighty-switcher
A switcher component description
https://github.com/lessthanzero/mighty-switcher
Last synced: about 1 month ago
JSON representation
A switcher component description
- Host: GitHub
- URL: https://github.com/lessthanzero/mighty-switcher
- Owner: lessthanzero
- License: mit
- Created: 2018-08-12T09:12:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-20T09:56:06.000Z (almost 8 years ago)
- Last Synced: 2025-11-05T04:21:46.976Z (9 months ago)
- Language: JavaScript
- Size: 2.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Переключалка
Это простой переключатель состояния, встречающийся в нашем веб-приложении. Отвечает на вопрос «Включено ли?» и подобные, предполагающие ответ «Да» или «Нет».
## Содержимое
1. [Использование](#usage)
2. [Связь с дизайн-системой](#design-system)
3. [Как получить компонент?](#how-to)
4. [Тестирование](#testing)
### Где пригодится?
В формах и настройках. Например: хотим подписать пользователя на рассылку.
### Общие рекомендации
Если вы собираете форму, посоветуйтесь с продакт-оунером. Вам действительно нужен этот контрол?
Придумайте и напишите понятный и короткий текст для подписи. В идеале, он должен отвечать на вопрос: «Что я сейчас включу (выключу)?»
### Поведение
Обычно оказывается в двух состояниях: включено или выключено. Также, есть заблокированные состояния (включено или выключено, но пользователь не может его менять), получающиеся добавлением атрибута *disabled*.
Начальное состояние можно менять с помощью опционального атрибута *active*.
``
Строка с переключалкой и подписью занимает всю ширину колонки, отведенную под форму.
Текстовый лейбл стоит перед переключалкой и занимает 1/3 ширины строки.
При уменьшении ширины окна изменяется ширина блока с самим свитчером, ширина подписи остаётся неизменной до последнего.
### Как правильно отрисовать?
Не забыть про отступы сверху и снизу. Если необходимо, добавить полоску-разделитель или пустую строку сразу после переключалки. Вертикальные отступы по-умолчанию 20 пикселей, горизонтальные — 24 пикселя.
Выбрать правильный размер или цветовую схему.
Текст подписи выравнивается по левому краю. Кегль (размер) 14 пикселей, высота строки — 20 пикселей.
### А как не стоит?
Подумайте, можно ли в интерфейсе обойтись без переключалки?
Не рекомендуется рисовать переключатель перед сопроводительным текстом, а также, сверху или снизу от текстового лейбла — на десктопе.
Не рекомендуется использовать длинные подписи переключателя: попробуйте уложиться в одну строку.
Не рекомендуется использовать больше четырех переключателей подряд.
Все размеры кратны четырехпиксельному микро-модулю.
Размер переключателя настраивается:
| Размер | Значение атрибута |
| :--- | :--- |
| Стандартный | `sizing='standard'`
| Малый | `sizing='small'`
| Большой | `sizing='large'`
Могут использоваться разные цветовые темы для настройки внешнего вида:
| Тема | Значение атрибута |
| :--- | :--- |
| Стандартная | `theme='default'`
| Услуги | `theme='services'`
| Недвижимость | `theme='real-estate'`
| Авто | `theme='auto'`
| Работа | `theme='jobs'`
1. [Скачать](switcher.sketch) интерфейсный набор из облака;
2. [Клонировать проект](https://github.com/lessthanzero/mighty-switcher) или посмотреть в исходный код;
### Как запустить проект у себя?
Этот проект использует «[Гэтсби](https://www.gatsbyjs.org)» для скаффолдинга и решения инфраструктурных вопросов. Вам пригодится Yarn, Gatsby-CLI и базовое умение пользоваться терминалом.
**Поехали:**
Для начала запустим *Terminal.app*
1. Проверим, установлен ли Node.js: `node -v`
2. Скачаем и установим его, если на предыдущем шаге получили ошибку: https://nodejs.org. Не стесняйтесь позвать админа! 😉
3. Установим «Гэтсби»: `npm install --global gatsby-cli`
4. Установим Yarn любым описанным здесь способом: https://yarnpkg.com/en/docs/install#mac-stable
5. Клонируем проект: `cd [папка, где вы собираетесь хранить проект]; git clone https://github.com/lessthanzero/mighty-switcher.git; cd mighty-switcher`
6. Команда `yarn develop` показывает этот гид по адресу http://localhost:8000
7. Команда `yarn storybook` показывает интерактивный полигон с разными состояниями компонента вот тут: http://localhost:9001
Тестировщики могут использовать [Storybook](http://localhost:9001) (*работает локально*) и полученные знания о состояниях, сетке и микро-модуле, чтобы проверить правильность верстки и работу компонента. В будущем в эту секцию добавится информация о тестировании компонента и его локализации (направление чтения справа-налево и т.п.).