{"id":17840611,"url":"https://github.com/lessthanzero/mighty-switcher","last_synced_at":"2026-06-20T23:32:11.846Z","repository":{"id":147290385,"uuid":"144452968","full_name":"lessthanzero/mighty-switcher","owner":"lessthanzero","description":"A switcher component description","archived":false,"fork":false,"pushed_at":"2018-08-20T09:56:06.000Z","size":2344,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-05T04:21:46.976Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lessthanzero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-08-12T09:12:33.000Z","updated_at":"2018-08-20T09:56:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"4e0c7f36-f0bc-4db7-9ab4-fe1fd157497e","html_url":"https://github.com/lessthanzero/mighty-switcher","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lessthanzero/mighty-switcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lessthanzero%2Fmighty-switcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lessthanzero%2Fmighty-switcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lessthanzero%2Fmighty-switcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lessthanzero%2Fmighty-switcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lessthanzero","download_url":"https://codeload.github.com/lessthanzero/mighty-switcher/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lessthanzero%2Fmighty-switcher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34589204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-27T21:01:13.411Z","updated_at":"2026-06-20T23:32:11.829Z","avatar_url":"https://github.com/lessthanzero.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Переключалка\n\nЭто простой переключатель состояния, встречающийся в нашем веб-приложении. Отвечает на вопрос «Включено ли?» и подобные, предполагающие ответ «Да» или «Нет».\n\n## Содержимое\n1. [Использование](#usage)\n2. [Связь с дизайн-системой](#design-system)\n3. [Как получить компонент?](#how-to)\n4. [Тестирование](#testing)\n\n## Использование \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\n### Где пригодится?\nВ формах и настройках. Например: хотим подписать пользователя на рассылку.\n\n### Общие рекомендации\n\nЕсли вы собираете форму, посоветуйтесь с продакт-оунером. Вам действительно нужен этот контрол?\nПридумайте и напишите понятный и короткий текст для подписи. В идеале, он должен отвечать на вопрос: «Что я сейчас включу (выключу)?»\n\n### Поведение\n\nОбычно оказывается в двух состояниях: включено или выключено. Также, есть заблокированные состояния (включено или выключено, но пользователь не может его менять), получающиеся добавлением атрибута *disabled*.\nНачальное состояние можно менять с помощью опционального атрибута *active*.\n\n`\u003cSwitcher disabled=\"true\" /\u003e`\n\nСтрока с переключалкой и подписью занимает всю ширину колонки, отведенную под форму.\n\nТекстовый лейбл стоит перед переключалкой и занимает 1/3 ширины строки. \n\nПри уменьшении ширины окна изменяется ширина блока с самим свитчером, ширина подписи остаётся неизменной до последнего.\n\n### Как правильно отрисовать?\n\nНе забыть про отступы сверху и снизу. Если необходимо, добавить полоску-разделитель или пустую строку сразу после переключалки. Вертикальные отступы по-умолчанию 20 пикселей, горизонтальные — 24 пикселя.\n\nВыбрать правильный размер или цветовую схему.\n\nТекст подписи выравнивается по левому краю. Кегль (размер) 14 пикселей, высота строки — 20 пикселей.\n\n### А как не стоит?\n\nПодумайте, можно ли в интерфейсе обойтись без переключалки?\n\nНе рекомендуется рисовать переключатель перед сопроводительным текстом, а также, сверху или снизу от текстового лейбла — на десктопе.\n\nНе рекомендуется использовать длинные подписи переключателя: попробуйте уложиться в одну строку.\n\nНе рекомендуется использовать больше четырех переключателей подряд.\n\n## Связь с дизайн-системой \u003ca name=\"design-system\"\u003e\u003c/a\u003e\n\nВсе размеры кратны четырехпиксельному микро-модулю.\n\nРазмер переключателя настраивается:\n\n| Размер | Значение атрибута |\n| :--- | :--- |\n| Стандартный | `sizing='standard'`\n| Малый | `sizing='small'`\n| Большой | `sizing='large'`\n\nМогут использоваться разные цветовые темы для настройки внешнего вида:\n\n| Тема | Значение атрибута |\n| :--- | :--- |\n| Стандартная | `theme='default'`\n| Услуги | `theme='services'`\n| Недвижимость | `theme='real-estate'`\n| Авто | `theme='auto'`\n| Работа | `theme='jobs'`\n\n## Как получить компонент? \u003ca name=\"how-to\"\u003e\u003c/a\u003e\n\n1. [Скачать](switcher.sketch) интерфейсный набор из облака;\n2. [Клонировать проект](https://github.com/lessthanzero/mighty-switcher) или посмотреть в исходный код;\n\n### Как запустить проект у себя?\n\nЭтот проект использует «[Гэтсби](https://www.gatsbyjs.org)» для скаффолдинга и решения инфраструктурных вопросов. Вам пригодится Yarn,  Gatsby-CLI и базовое умение пользоваться терминалом.\n\n**Поехали:**\n\nДля начала запустим *Terminal.app*\n\n1. Проверим, установлен ли Node.js: `node -v`\n2. Скачаем и установим его, если на предыдущем шаге получили ошибку: https://nodejs.org. Не стесняйтесь позвать админа! 😉\n3. Установим «Гэтсби»: `npm install --global gatsby-cli`\n4. Установим Yarn любым описанным здесь способом: https://yarnpkg.com/en/docs/install#mac-stable\n5. Клонируем проект: `cd [папка, где вы собираетесь хранить проект]; git clone https://github.com/lessthanzero/mighty-switcher.git; cd mighty-switcher`\n6. Команда `yarn develop` показывает этот гид по адресу http://localhost:8000\n7. Команда `yarn storybook` показывает интерактивный полигон с разными состояниями компонента вот тут: http://localhost:9001\n\n## Тестирование \u003ca name=\"testing\"\u003e\u003c/a\u003e\n\nТестировщики могут использовать [Storybook](http://localhost:9001) (*работает локально*) и полученные знания о состояниях, сетке и микро-модуле, чтобы проверить правильность верстки и работу компонента. В будущем в эту секцию добавится информация о тестировании компонента и его локализации (направление чтения справа-налево и т.п.).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flessthanzero%2Fmighty-switcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flessthanzero%2Fmighty-switcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flessthanzero%2Fmighty-switcher/lists"}