Менюҳои матнӣ ва амалҳои тез

1) Мақсад ва миқёс

• Амалҳои маҳаллӣ дар объект (корт, сатри ҷадвал, коэффисиент).
• Амалҳои маҷмӯӣ оид ба интихоб.
• Вариантҳои пинҳоншуда, вале муҳим нестанд (дуюмдараҷа).
• Қоида: амалҳои интиқодӣ ва ибтидоиро танҳо дар менюи контекст пинҳон накунед.

2) Триггерҳо ва вариантҳо

Тугмаи рости клик/Shift + F10/Menu - матни классикӣ.
Тугмаи нишона (кебаб '⋮', гӯшт '... ', контекст) - универсалӣ барои ламс/мизи корӣ.
Матбуоти дароз (400-600 мс) муодили мобилии клики рост аст.
Palette Command (⇧⌘P/Ctrl + K) - фармонҳои глобалии фаврӣ бо ҷустуҷӯ.
Swipe-reveal (рӯйхати IOS/Android) - як қатор миёнабурҳои зудро мекушояд.

Тавсия: ҳадди аққал ду усули зангро таъмин кунед (нишона + клик/тугмаи контекст).

3) Мундариҷа ва афзалият

1-3 холҳои аввал амалҳои зуд-зуд мебошанд; пас ҷудосоз; минбаъд - камтар истифода мешавад.
Харобкунанда - дар охир, бо ранг/нишона ишора карда мешавад (ва аксар вақт - тавассути тасдиқ/бекор кардан).
Калимаҳо - verb + объект ("Илова ба мунтахаб", "Нусхаи ID").
Нишона танҳо нишона ≠: нишона тақвимкунанда аст, на ҷойгузини матн.

4) Гурӯҳбандӣ ва мақом

Delimiters барои блокҳои мантиқӣ (дидан, таҳрир, админ, хатарнок).
Остония: 'маъюбон', 'санҷидашуда' ('menuitemcheckbox '/' menuitemradio'), 'харобкунанда'.
Агар ин печида бошад, нақшро дастнорас нишон надиҳед; Интихобан - ҳамчун "маъюбон" нишон додани ишора.

5) Дастрасӣ (A11y)

Контейнер: 'нақш = "меню"', унсурҳо: 'нақш = "менютем" '/' menuitemcheckbox '/' menuitemradio'.
Ҷадвали ҳаракаткунанда: Ягона' tabindex =" 0 "'дар унсури ҷорӣ, боқимонда '-1'.
↑↓ тирҳо - ҳаракат, →/← - вуруд/баромад аз зермену. Enter/Space - фаъолсозӣ, Esc - пӯшидан.
Typeahead: Чопи ҳарфи аввал диққати худро ба нуқта равона мекунад.
Ангуштарин фокус намоён аст; муқоисаи матн ва нишонаҳо ≥ АА.
Барои тасвири тугма' aria-haspopup =" меню" ва' aria-васеъшуда '-ро истифода баред.

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role = "menuitem" tabindex = "0 "> Open </li>
<li role = "menuitem"> Copy link </li>
<li role = "menuitemcheckbox" aria-checked =" true"> Favorites </li>
<li role = "menuitem" data-danger = "true "> Delete </li>
</ul>

js const menu = document. getElementById('menu-1');
menu. addEventListener('keydown', e=>{
const items=[...menu. querySelectorAll('[role^="menuitem"]')];
let i=items. findIndex(n=>n. tabIndex===0);
if(e. key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items. length].tabIndex=0; items[(i+1)%items. length].focus(); e. preventDefault(); }
if(e. key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items. length)%items. length].tabIndex=0; items[(i-1+items. length)%items. length].focus(); e. preventDefault(); }
if(e. key==='Escape'){ menu. hidden=true; document. getElementById('more'). focus(); }
});

6) Ҷойгиршавӣ ва иҷро

Менюро дар манбаъ кушоед (клик-нуқта/нишона), 4-8 px-ро иваз кунед; кунҷҳои экранро тамошо кунед (флип/баст).
Портал/қабати болои ('z-index') бо гирифтани клик.
Бо танбалӣ нишон диҳед, рӯйхатро дар менюҳои дароз дубора коркард кунед (виртуализатсия лозим нест, аммо садҳо ашёро пешгирӣ кунед).
Аниматсияҳо танҳо "шаффофият/дигаргунӣ", давомнокии 140-200 мс (тезтар: 100-160 мс).
Субменуро аз ҷониби 'Arrowright' кушоед ва бо таъхири 80-120 мс (анти-фликер) парвоз кунед.

7) Намунаҳои мобилӣ

Матбуоти дароз бо haptics; вақтҳои 450 ± 100 мс.
Варақаи поёнӣ ҳамчун шакли менюи контекстӣ (дастрас ба ангушт).
Амалиётро дар рӯйхатҳо лағжонед: дар тарафи чап - "бойгонӣ/мунтахаб", дар тарафи рост - "нест кардан" (тасдиқ/бекор кардан).
Минтақаҳои ≥ 44 × 44, имзоҳои кӯтоҳ, нишонаҳои 20-24 px.

8) Тасдиқҳо, бекоркунӣ ва амният

Амалҳои харобиовар: ё тасдиқи дуюм (шакли модалӣ/тасдиқкунанда) ё бекор кардани 5-10 с.
Молиявӣ/хавф - тавассути тасдиқи возеҳ бо заминаи оқибатҳо.
Сабаби "маъюбон" -ро нишон диҳед ("Ҳуқуқҳои нокифоя", "Маҳдудият расид").

9) Амалҳои зуд бе меню

Миёнбурҳои дохилӣ дар хат (нишонаҳо, "", "", "⋯").
Hover-ошкор (мизи корӣ): амалҳоро ҳангоми парвоз нишон диҳед, аммо триггери возеҳро тарк кунед.
Палитраи фармон: ҷустуҷӯ аз рӯи амалҳо, калидҳои доғ дар асбобҳо ("⌘S", "Ctrl + Enter").

10) Нусхабардорӣ ва нишонаҳо

Феъл + объект, 2-3 калима.
Бо амал оғоз кунед ("Нест кардани вуруд"...), на исм ("Нест кардани вуруд").
Нишонаҳо аз маҷмӯи ягона; Барои амалҳои якхела дар тамоми маҳсулот ҳамон нишонаҳоро истифода баред.
Маслиҳатҳои фаҳмондадиҳӣ ('унвон '/абзор) барои ашёҳои номуайян.

11) Телеметрия ва таҷрибаҳо

CTR аз рӯи ашё, вақти медианӣ аз кушодан то клик, сатҳи бекоркунӣ/бекоркунӣ.
Шумораи иштибоҳҳо (харобиовар → бекор карда шудааст).
A/B: фармоиш ва гурӯҳбандии ашёҳо, мавҷудияти миёнабурҳои зуд дар рӯйхат.
Гузоришҳои ашёи "ноаён" (ҳеҷ кас истифода намекунад) - номзадҳо барои нест кардан/интиқол.

12) Нишонаҳои системаи тарроҳӣ (мисол)

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0. 2,0,0. 2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px; padding:8px; border-radius:12px; box-shadow:var(--elev-3); background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px; padding:0 12px; display:flex; gap:8px; align-items:center; border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13) Намунаҳои компонент

Кортҳо/сафолҳо: тасвири '⋯' дар кунҷи рости боло; дар hover - нишон дода шудааст, дар ламс - ҳамеша намоён аст.
Сатрҳои ҷадвал: '⋯' дар сутуни охирин; дар ҳолати интихоби чандкарата - панели амалҳои партия аз боло/поён.
Рӯйхати чат/огоҳинома: swipe-action (бойгонӣ/хондан/нест кардан) бо бекоркунӣ.
Галереяҳои медиа: лӯлаи дароз → режими бисёрсоҳавӣ + панели амали поёни.

14) Хусусиятҳои IGaming

зуд гарав: дар менюи контексти коэффисиент - "Put X" (пеш аз танзимот), "Илова ба купон", "Барои тағир додани коэффисиент обуна шавед. "Тасдиқ/бекор кардан лозим аст.
Мунтахаб/обуна: "Провайдер/бозиро ба мунтахаб илова кунед", "Ба мусобиқа обуна шавед".
Пули нақд: бо тасдиқи дохилӣ ва маблағи ҷорӣ; танҳо бо вазъи бозор дастрас аст.
Модератсия/ҳисоботҳо: "Шикоят кардан", "Блоки чат" - бехатар, аз рӯи нақш намоён.
Бозии масъул: "Маҳдудият муқаррар кунед", "Таваққуф 24h" - бидуни рангҳои хашмгин, бо тавсифи дақиқи оқибатҳо.

15) Анти-намунаҳо

Амалҳои интиқодӣ танҳо дар менюи контекст пинҳон карда мешаванд.
Ҷузъҳои бе матн (танҳо нишонаҳо), хусусан дар рӯйхатҳо.
Пӯшидани тасодуфии курсор ҳангоми гузаштан ба зермену (таъхир/долон).
Меню ашёи манбаъро бо ҳам мепайвандад ё аз паси экран меравад (флип/баст нест).
Бе тасдиқ/бекоркунӣ харобкунанда.
Ҳуқуқҳои номуайян (банд бе шарҳ нопадид мешавад).

16) Рӯйхати назоратии QA

Мавҷудият

• 'нақш = "меню "'/' менюем 'дуруст аст, ҷадвали ҳаракаткунанда ва тирҳо кор мекунанд.
• Esc менюро пӯшонад, фокус ба манбаъ бармегардад.
• Ҳалқаҳои контраст ва фокус ба АА мувофиқанд.

Рафтор

• Тартиби ашё басомад ва хатарро инъикос мекунад; харобиовар дар поёни.
• Ҷойгиркунӣ кунҷҳоро ба назар мегирад (флип/баст); аниматсияҳои тез (≤ 200 мс).
• Субмену аз ҷониби Arrowright кушода шудааст ва "ба ларза намеояд" (hover-ният 80-120 ms).

Мобилӣ

• Матбуоти дароз бо haptics; варақи поён бо ангушти калон қулай аст.
• Амалҳои лағжиш бекор карда шудаанд; минтақаҳои ≥ 44 × 44 -ро пахш кунед.

Амният

• Тасдиқ/бекор кардани амалҳои хатарнок; сабабҳои маъюбон возеҳанд.
• Ҳеҷ гуна ихроҷи маълумоти хусусӣ дар ишораҳо/тамғакоғазҳо.

Нишондиҳандаҳо

• CTR/вақт барои пахш кардан хориҷ карда мешавад; misclick/undo назорат карда мешавад.

17) Амалисозӣ: кушода/пӯшида ва клик

js const btn=document. getElementById('more'), menu=document. getElementById('menu-1');
const open=()=>{ menu. hidden=false; btn. setAttribute('aria-expanded','true'); menu. querySelector('[role^="menuitem"]'). focus(); };
const close=()=>{ menu. hidden=true; btn. setAttribute('aria-expanded','false'); btn. focus(); };
btn. addEventListener('click', e=>{ menu. hidden? open():close(); });
document. addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e. target) && e. target!==btn) close(); });
window. addEventListener('blur', close);

18) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Contexton' Меню ',' Менюи ',' Субмену ',' Поёни варақ ',' Swipe 'Action', 'Фармон'.
Баландии андоза/сатр/радиус/аломатҳои аниматсионӣ.
Роҳнамои дастрасӣ (ARIA, клавиатура, typeahead).
"Иҷро кунед/накунед" бо намунаҳои гурӯҳбандӣ, мавқеъ ва тасдиқ.

Хулосаи мухтасар

Менюҳои контекстӣ ва амалҳои зуд корҳоро суръат мебахшанд, агар онҳо пешгӯишаванда, дастрас ва бехатар бошанд: ду роҳи занг, нишонаҳои тоза бо нишонаҳо, гурӯҳбандии оқилона, тасдиқ/барҳам додани хатар, паймоиши дурусти клавиатура ва мавқеи возеҳ. Нишонаҳо ва намунаҳоро дар системаи тарроҳӣ сабт кунед - ва корбарон бидуни тарс аз хатогӣ зуд амал мекунанд.