From 50c40c9c1a7d5e8eeb8d0617c358c83b47a6611e Mon Sep 17 00:00:00 2001 From: Rim Zabarov Date: Wed, 11 Nov 2026 17:45:13 +0300 Subject: [PATCH 1/3] Forms guide opens with one form and ends with a checklist; menu examples move the current mark (C64) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Forms: one short form with its page title first, every rule section has a pair where only that rule changes (place, field look, groups, rows), the end is a six-line check that links each rule. The old do-dont grid goes; the #какое-поле-брать anchor stays. Menu: the examples cancel sf-menu-navigate and write current, so a press moves the mark like a site would; a live event log under Переходы и события; one sentence says the menu marks the page, not the last press. Co-Authored-By: Claude Opus 5.5 --- content/ru/guide/colour/forms.md | 97 +++++++++++-------- content/ru/smart/navigation/menu.md | 13 +++ .../guide/colour/forms/do-dont/index.html | 38 -------- .../guide/colour/forms/do-field/index.html | 18 ++++ .../guide/colour/forms/do-groups/index.html | 30 ++++++ .../guide/colour/forms/do-place/index.html | 26 +++++ .../guide/colour/forms/do-widths/index.html | 24 +++++ examples/guide/colour/forms/page/index.html | 31 +++--- .../smart-components/menu/admin/index.html | 11 +++ .../smart-components/menu/column/index.html | 11 +++ .../smart-components/menu/compact/index.html | 11 +++ .../menu/documentation-tree/index.html | 11 +++ .../smart-components/menu/groups/index.html | 11 +++ .../menu/horizontal/index.html | 11 +++ .../smart-components/menu/markup/index.html | 11 +++ .../smart-components/menu/mega/index.html | 11 +++ .../smart-components/menu/navigate/index.html | 19 ++++ .../menu/navigation/index.html | 11 +++ .../smart-components/menu/overview/index.html | 11 +++ .../smart-components/menu/phone/index.html | 11 +++ .../menu/state-current/index.html | 11 +++ .../smart-components/menu/status/index.html | 11 +++ 22 files changed, 348 insertions(+), 91 deletions(-) delete mode 100644 examples/guide/colour/forms/do-dont/index.html create mode 100644 examples/guide/colour/forms/do-field/index.html create mode 100644 examples/guide/colour/forms/do-groups/index.html create mode 100644 examples/guide/colour/forms/do-place/index.html create mode 100644 examples/guide/colour/forms/do-widths/index.html create mode 100644 examples/smart-components/menu/navigate/index.html diff --git a/content/ru/guide/colour/forms.md b/content/ru/guide/colour/forms.md index f37ef4c5..1c68b26f 100644 --- a/content/ru/guide/colour/forms.md +++ b/content/ru/guide/colour/forms.md @@ -5,52 +5,49 @@ description: "На каком месте стоит форма, какое по # Формы: фон и группировка -У формы нет своего фона: она стоит на месте, куда её поставили, — на -странице, в карточке или в шторке. Поля по умолчанию с рамкой. Группы -делит воздух и заголовок, а не рамка. Правило одно для всех проектов, поэтому -формы в разных разделах выглядят одинаково. +У формы нет своего фона: она стоит прямо на странице, в карточке или в +шторке. Поля — с рамкой, группы делит воздух и заголовок. Ниже короткая +форма, собранная по всем правилам страницы. ## Пример -### Короткая форма на странице +:::example {id="guide/colour/forms/page" label="Короткая форма на странице"} +::: -Форма об одном — создать проект, войти, оставить заявку — стоит прямо на -странице. Карточка вокруг неё ничего не отделяет и только добавляет рамку. +Что здесь видно: -:::example {id="guide/colour/forms/page" label="Форма на странице"} -::: +- форма стоит прямо на странице, под заголовком страницы, — без карточки и + своего фона ([где стоит форма](#где-стоит-форма)); +- все поля с рамкой ([какое поле брать](#какое-поле-брать)); +- между полями малый отступ, перед кнопками — большой; группа одна, поэтому + заголовка у неё нет ([отступы и группы](#отступы-и-группы)); +- код короче названия — и поле у него короче ([строки и ширина](#строки-и-ширина)). -### Страница настроек: карточка на раздел +## Где стоит форма + +Короткая форма об одном — создать проект, войти, оставить заявку — стоит +прямо на странице, как в примере выше. Карточка вокруг неё ничего не +отделяет и только добавляет рамку. Разделы настроек меняют независимо, поэтому у каждого своя карточка с заголовком. Кнопки — одни на форму, под последней карточкой. -:::example {id="guide/colour/forms/cards" label="Карточки разделов"} +:::example {id="guide/colour/forms/cards" label="Страница настроек: карточка на раздел"} ::: -### В шторке и окне - Шторка и окно сами уже карточка: внутри карточек нет. Группы — заголовком, между ними можно провести линию. -:::example {id="guide/colour/forms/panel" label="Форма в панели"} +:::example {id="guide/colour/forms/panel" label="Форма в шторке"} ::: -## Где стоит форма - -| Где | Место | Группы | -|:---|:---|:---| -| Короткая форма об одном | страница | заголовки и воздух | -| Страница настроек | страница, карточка `sf-card` на раздел | карточка на раздел, кнопки под последней | -| Шторка, окно | панель | заголовки, линия между группами; карточек внутри нет | -| Серая область (боковая панель, подложка) | — | сначала поставьте карточку, потом форму в неё | -| Серая плашка внутри карточки («Итого», условия) | плашка | поля с рамкой | - -Фон формы выбирает место, а не форма. Поэтому классы фона на самой форме не -нужны: на серую область форму без карточки не ставят — поля на ней читаются -как дыры. Какие места бывают и как они выглядят — в руководстве +На серую область — боковую панель, подложку — форму без карточки не ставят: +сначала карточка, потом форма. Какие места бывают — в руководстве [Фоны](/ru/guide/colour/surfaces/). +:::example {id="guide/colour/forms/do-place" label="Как делать: место формы"} +::: + ## Какое поле брать Поле с рамкой — вид по умолчанию на любом месте и в любой форме: его край @@ -58,12 +55,17 @@ description: "На каком месте стоит форма, какое по Поле с заливкой (`appearance="filled"`) — только для поиска и фильтров над таблицей или списком и только на белом месте: на странице, в карточке, во -всплывающей панели. В одной форме виды не смешивают. На серой области, серой -плашке и цветном фоне заливку не берут: она сливается с местом. +всплывающей панели. На серой области, серой плашке и цветном фоне заливку не +берут: она сливается с местом. :::example {id="guide/colour/forms/filter" label="Фильтры над таблицей"} ::: +В одной форме виды не смешивают. + +:::example {id="guide/colour/forms/do-field" label="Как делать: вид поля"} +::: + ## Отступы и группы | Между чем | Отступ | @@ -81,33 +83,44 @@ description: "На каком месте стоит форма, какое по `fieldset` рамки нет. Линию между группами проводят только вместе с заголовком и только в шторке, окне или одной карточке. +:::example {id="guide/colour/forms/do-groups" label="Как делать: группы"} +::: + ## Строки и ширина В одну строку ставят только части одного ответа: фамилию и имя, город и индекс, «с» и «по». Ширина поля подсказывает длину ответа: индекс и код — короткие (`w-e6`, 8rem), телефон и дата — средние (`w-f6`, 16rem), имя, -почта и адрес — во всю колонку. Колонка формы не шире `max-w-h0` (40rem). Ширину задаёт обёртка поля: -`
`. +почта и адрес — во всю колонку. Колонка формы не шире `max-w-h0` (40rem). +Ширину задаёт обёртка поля: `
`. Подпись — над полем: глаз идёт одной линией, и на телефоне ничего не -перестраивается. Колонка подписей слева подходит для чтения записи, а не для -правки. +перестраивается. :::example {id="guide/colour/forms/widths" label="Строки и ширина"} ::: +:::example {id="guide/colour/forms/do-widths" label="Как делать: строки"} +::: + На телефоне форма — одна колонка: строки складываются в столбик, подписи остаются над полями, карточки сохраняют свои поля, кнопки стоят в конце формы. -## Как делать - -:::example {id="guide/colour/forms/do-dont" label="Как делать"} -::: - -- **Поле с рамкой по умолчанию.** Заливка — только для поиска и фильтров - над таблицей. -- **Форму на серую область не ставят.** Сначала карточка, потом форма. -- **Группы делит воздух.** Рамка вокруг группы спорит с рамками полей. +## Проверьте форму + +- **Место.** Форма стоит на странице, в карточке раздела или в шторке. Своего + фона у неё нет; на серую область — сначала карточка. + [Где стоит форма](#где-стоит-форма) +- **Поле.** Все поля с рамкой. Залитые — только поиск и фильтры над таблицей. + [Какое поле брать](#какое-поле-брать) +- **Отступы.** Между полями `gap-1`, между группами и перед кнопками `gap-3`. + [Отступы и группы](#отступы-и-группы) +- **Группы.** Заголовок — когда групп больше одной. Рамок вокруг групп нет, + вопрос с вариантами — `fieldset` без рамки. [Отступы и группы](#отступы-и-группы) +- **Ширина.** Поле по длине ответа, колонка не шире 40rem, в строку — только + части одного ответа. [Строки и ширина](#строки-и-ширина) +- **Телефон.** Одна колонка, подписи над полями, кнопки в конце. + [Строки и ширина](#строки-и-ширина) ## См. также diff --git a/content/ru/smart/navigation/menu.md b/content/ru/smart/navigation/menu.md index a6e477cd..05036ebf 100644 --- a/content/ru/smart/navigation/menu.md +++ b/content/ru/smart/navigation/menu.md @@ -22,6 +22,11 @@ description: "Навигация по сайту из данных или спи :::example {id="smart-components/menu/overview" label="Строка сайта: раздел с текущей страницей отмечен линией, лишнее — в «Ещё»"} ::: +Меню отмечает текущую страницу, а не последнее нажатие: на сайте нажатие +открывает новую страницу, и меню отмечает её. В примерах переход отменён, и +отметку переносит сам пример — как в +[Переходы и события](#переходы-и-события). + ## Разметка Пункты задаёт `items` — массив `{id, label, href, icon, badge, current, @@ -213,6 +218,11 @@ disabled, open, children}`: в свойстве — массивом, в атр :::example {id="smart-components/menu/state-current" label="Текущий пункт «Ноутбуки»"} ::: +Меню отмечает текущую страницу, а не последнее нажатие: на сайте нажатие +открывает новую страницу, и меню отмечает её. В примерах переход отменён, и +отметку переносит сам пример — как в +[Переходы и события](#переходы-и-события). + ### Недоступный пункт `disabled: true` делает пункт недоступным. @@ -230,6 +240,9 @@ disabled, open, children}`: в свойстве — массивом, в атр клавишей-модификатором или средней кнопкой событие не отправляет. `sf-menu-toggle` сообщает, что ветка открылась или закрылась. +:::example {id="smart-components/menu/navigate" label="Нажатие переносит отметку текущей страницы" log="sf-menu-navigate sf-menu-toggle" log_console=false log_open=true} +::: + ```js const menu = document.querySelector('sf-menu'); menu.addEventListener('sf-menu-navigate', (event) => { diff --git a/examples/guide/colour/forms/do-dont/index.html b/examples/guide/colour/forms/do-dont/index.html deleted file mode 100644 index 93846aad..00000000 --- a/examples/guide/colour/forms/do-dont/index.html +++ /dev/null @@ -1,38 +0,0 @@ -
-
-
-
Правильно — поля с рамкой прямо на странице
-
- - -
-
-
-
Неправильно — залитые поля на серой области сливаются с ней
-
- - -
-
-
-
Правильно — вопрос с вариантами в fieldset без рамки
-
-
- Доставка - - -
-
-
-
-
Неправильно — рамка вокруг группы спорит с рамками полей
-
-
- Получатель - - -
-
-
-
-
diff --git a/examples/guide/colour/forms/do-field/index.html b/examples/guide/colour/forms/do-field/index.html new file mode 100644 index 00000000..5aa4bf9f --- /dev/null +++ b/examples/guide/colour/forms/do-field/index.html @@ -0,0 +1,18 @@ +
+
+
+
Правильно — в форме все поля с рамкой
+
+ + +
+
+
+
Неправильно — в одной форме поле с рамкой и залитое
+
+ + +
+
+
+
diff --git a/examples/guide/colour/forms/do-groups/index.html b/examples/guide/colour/forms/do-groups/index.html new file mode 100644 index 00000000..9a96c1d2 --- /dev/null +++ b/examples/guide/colour/forms/do-groups/index.html @@ -0,0 +1,30 @@ +
+
+
+
Правильно — группы делят заголовок и воздух
+
+
+

Получатель

+ +
+
+

Адрес

+ +
+
+
+
+
Неправильно — рамка вокруг группы спорит с рамками полей
+
+
+ Получатель + +
+
+ Адрес + +
+
+
+
+
diff --git a/examples/guide/colour/forms/do-place/index.html b/examples/guide/colour/forms/do-place/index.html new file mode 100644 index 00000000..c194ed39 --- /dev/null +++ b/examples/guide/colour/forms/do-place/index.html @@ -0,0 +1,26 @@ +
+
+
+
Правильно — короткая форма прямо на странице
+
+
+ + +
+
+
+
+
+
Неправильно — та же форма в карточке: рамка ничего не отделяет
+
+
+
+ + +
+
+
+
+
+
+
diff --git a/examples/guide/colour/forms/do-widths/index.html b/examples/guide/colour/forms/do-widths/index.html new file mode 100644 index 00000000..4554840c --- /dev/null +++ b/examples/guide/colour/forms/do-widths/index.html @@ -0,0 +1,24 @@ +
+
+
+
Правильно — в строке части одного ответа, ширина по ответу
+
+
+
+
+
+
+
+
+
+
Неправильно — в строке разные вопросы, всё одной ширины
+
+
+ + +
+ +
+
+
+
diff --git a/examples/guide/colour/forms/page/index.html b/examples/guide/colour/forms/page/index.html index 3b68331a..f7ae0910 100644 --- a/examples/guide/colour/forms/page/index.html +++ b/examples/guide/colour/forms/page/index.html @@ -1,12 +1,21 @@ -
-

Новый проект

-
- -
- +
+
+ Проекты +

Новый проект

-
- - -
- +
+
+ +
+
+ Кто видит проект + + +
+
+
+ + +
+
+
diff --git a/examples/smart-components/menu/admin/index.html b/examples/smart-components/menu/admin/index.html index 322e0337..6635d0a1 100644 --- a/examples/smart-components/menu/admin/index.html +++ b/examples/smart-components/menu/admin/index.html @@ -26,3 +26,14 @@ ]} ]'>
+ diff --git a/examples/smart-components/menu/column/index.html b/examples/smart-components/menu/column/index.html index 2fc3da46..5ca838de 100644 --- a/examples/smart-components/menu/column/index.html +++ b/examples/smart-components/menu/column/index.html @@ -37,3 +37,14 @@ {"id": "contacts", "label": "Контакты", "href": "#contacts"} ]'> + diff --git a/examples/smart-components/menu/compact/index.html b/examples/smart-components/menu/compact/index.html index 45f3d15a..f525df11 100644 --- a/examples/smart-components/menu/compact/index.html +++ b/examples/smart-components/menu/compact/index.html @@ -10,3 +10,14 @@ ]}, {"id":"archive","label":"Архив","href":"#archive","icon":"inventory_2","disabled":true} ]'> + diff --git a/examples/smart-components/menu/documentation-tree/index.html b/examples/smart-components/menu/documentation-tree/index.html index cdd3e442..b9ef19cc 100644 --- a/examples/smart-components/menu/documentation-tree/index.html +++ b/examples/smart-components/menu/documentation-tree/index.html @@ -12,3 +12,14 @@ {"id":"archive","label":"Архив","href":"#archive","icon":"inventory_2","disabled":true} ]'> + diff --git a/examples/smart-components/menu/groups/index.html b/examples/smart-components/menu/groups/index.html index f7341641..a54b070e 100644 --- a/examples/smart-components/menu/groups/index.html +++ b/examples/smart-components/menu/groups/index.html @@ -27,3 +27,14 @@ open: false — свёрнута сначала + diff --git a/examples/smart-components/menu/horizontal/index.html b/examples/smart-components/menu/horizontal/index.html index 3e04ded0..31be3621 100644 --- a/examples/smart-components/menu/horizontal/index.html +++ b/examples/smart-components/menu/horizontal/index.html @@ -40,3 +40,14 @@ ]'> + diff --git a/examples/smart-components/menu/markup/index.html b/examples/smart-components/menu/markup/index.html index 08e8c43f..b8b9687f 100644 --- a/examples/smart-components/menu/markup/index.html +++ b/examples/smart-components/menu/markup/index.html @@ -12,3 +12,14 @@ + diff --git a/examples/smart-components/menu/mega/index.html b/examples/smart-components/menu/mega/index.html index 99822a38..805c4020 100644 --- a/examples/smart-components/menu/mega/index.html +++ b/examples/smart-components/menu/mega/index.html @@ -40,3 +40,14 @@ ]'> + diff --git a/examples/smart-components/menu/navigate/index.html b/examples/smart-components/menu/navigate/index.html new file mode 100644 index 00000000..6820f7c4 --- /dev/null +++ b/examples/smart-components/menu/navigate/index.html @@ -0,0 +1,19 @@ +
+ +
+ diff --git a/examples/smart-components/menu/navigation/index.html b/examples/smart-components/menu/navigation/index.html index 04f34cdc..6d0298d1 100644 --- a/examples/smart-components/menu/navigation/index.html +++ b/examples/smart-components/menu/navigation/index.html @@ -24,3 +24,14 @@ ]'> + diff --git a/examples/smart-components/menu/overview/index.html b/examples/smart-components/menu/overview/index.html index 9533c3b0..4fa5c851 100644 --- a/examples/smart-components/menu/overview/index.html +++ b/examples/smart-components/menu/overview/index.html @@ -40,3 +40,14 @@ ]'> + diff --git a/examples/smart-components/menu/phone/index.html b/examples/smart-components/menu/phone/index.html index b2431384..00bfeef8 100644 --- a/examples/smart-components/menu/phone/index.html +++ b/examples/smart-components/menu/phone/index.html @@ -40,3 +40,14 @@ ]'> + diff --git a/examples/smart-components/menu/state-current/index.html b/examples/smart-components/menu/state-current/index.html index d02a7d95..268e49ec 100644 --- a/examples/smart-components/menu/state-current/index.html +++ b/examples/smart-components/menu/state-current/index.html @@ -5,3 +5,14 @@ {"id":"tablets","label":"Планшеты","href":"#tablets"} ]'> + diff --git a/examples/smart-components/menu/status/index.html b/examples/smart-components/menu/status/index.html index a5611fc9..f17cd2d3 100644 --- a/examples/smart-components/menu/status/index.html +++ b/examples/smart-components/menu/status/index.html @@ -18,3 +18,14 @@ count, с точкой и без + From 7860363c1ac9b3d4f711ff682e99fb54489ef24d Mon Sep 17 00:00:00 2001 From: Rim Zabarov Date: Wed, 11 Nov 2026 17:57:21 +0300 Subject: [PATCH 2/3] Guide start page: one order card from every level, paths by task, one map, what next (C71) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The layout inspector leaves the start page (it stays on the catalog example page); the chooser and the map are no longer written twice; the page ends with four next links. The map links Наборы компонентов instead of the retired smart-components-2 address, and the reference link points at /ru/smart/. Co-Authored-By: Claude Opus 5.5 --- content/ru/guide/index.md | 147 +++++++++++++-------------- examples/guide/order-card/index.html | 14 +++ 2 files changed, 83 insertions(+), 78 deletions(-) create mode 100644 examples/guide/order-card/index.html diff --git a/content/ru/guide/index.md b/content/ru/guide/index.md index c70bfe56..e2892099 100644 --- a/content/ru/guide/index.md +++ b/content/ru/guide/index.md @@ -1,95 +1,86 @@ --- title: "Руководство" -description: "Руководство описывает SIMAI Framework целиком: устройство, подключение и обновление, внешний вид, утилиты, компоненты, смарт-компоненты, макеты, стандарты и проверки." +description: "С чего начать работу с SIMAI Framework: пример страницы из всех уровней, пути по задаче, карта руководства и следующие шаги." --- # Руководство -Это руководство описывает SIMAI Framework целиком: что это такое, как он -устроен, как его подключить и обновлять, из чего складывается внешний вид, как -работают утилиты, компоненты, смарт-компоненты и макеты и какие стандарты и -проверки обеспечивают их согласованность. +Руководство объясняет, как устроен SIMAI Framework и почему: из каких уровней он +состоит, как их подключить и как они работают вместе. Полные списки классов, +токенов и настроек — в справочниках. -## Что это за документ +## Пример -Руководство объясняет устройство Framework: зачем нужна каждая часть, как она -работает и как связана с остальными. Это не справочник. +Карточка заказа ниже собрана из всех уровней, с которыми вы встретитесь в +руководстве. -- Полные списки классов, токенов, настроек и событий находятся в справочниках - документации: «Утилиты», «Компоненты», «смарт-компоненты» и справочнике - токенов. -- Количества, которые меняются от поставки к поставке (сколько компонентов, - токенов, страниц), в тексте не приводятся. Их показывают справочники. -- В тексте используются только канонические имена классов, атрибутов, событий - и токенов. Как Framework сообщает об устаревших именах и как перевести на - канонические имена существующий проект, описано на страницах - [Жизненный цикл изменений](/ru/guide/connection/change-lifecycle/) и [Как обновить проект](/ru/guide/connection/updating/). +:::example {id="guide/order-card" label="Карточка заказа"} +::: + +Что здесь видно: + +1. **Токены и тема.** Фон карточки, цвет текста и скругление — роли + `--sf-surface-container`, `--sf-on-surface-variant`, `--sf-radius--surface`. + В тёмной теме разметка та же, меняются значения ролей + ([Токены, цвет и темы](/ru/guide/colour/)). +2. **Утилиты.** Раскладка и отступы — классы `flex`, `gap-1`, `p-3`, + `bg-surface-container`: один класс — одно свойство + ([Утилиты и раскладка](/ru/guide/utilities/)). +3. **Компонент на классах.** Кнопка «Отправить» — `sf-button` на обычном + ` + + + From a5aa93273c7eba879d9b703ce6213060a09d8668 Mon Sep 17 00:00:00 2001 From: Rim Zabarov Date: Wed, 11 Nov 2026 20:21:19 +0300 Subject: [PATCH 3/3] Guide start: order card is an sf-card (white surface, thin border) instead of a grey container fill; text lists the card roles Co-Authored-By: Claude Opus 5.5 --- content/ru/guide/index.md | 14 ++++++++------ examples/guide/order-card/index.html | 2 +- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/content/ru/guide/index.md b/content/ru/guide/index.md index e2892099..2fad55ef 100644 --- a/content/ru/guide/index.md +++ b/content/ru/guide/index.md @@ -19,15 +19,17 @@ description: "С чего начать работу с SIMAI Framework: прим Что здесь видно: -1. **Токены и тема.** Фон карточки, цвет текста и скругление — роли - `--sf-surface-container`, `--sf-on-surface-variant`, `--sf-radius--surface`. +1. **Токены и тема.** Фон карточки, рамка, цвет текста и скругление — роли + `--sf-surface-card`, `--sf-outline-variant`, `--sf-on-surface-variant`, + `--sf-radius--surface`. В тёмной теме разметка та же, меняются значения ролей ([Токены, цвет и темы](/ru/guide/colour/)). -2. **Утилиты.** Раскладка и отступы — классы `flex`, `gap-1`, `p-3`, - `bg-surface-container`: один класс — одно свойство +2. **Утилиты.** Раскладка и промежутки — классы `flex`, `flex-wrap`, `gap-1`, + `gap-2`: один класс — одно свойство ([Утилиты и раскладка](/ru/guide/utilities/)). -3. **Компонент на классах.** Кнопка «Отправить» — `sf-button` на обычном - `