iter: d01 新增下拉菜单 menu 组件(弹层/键盘导航/reduced-motion)

This commit is contained in:
ui-arch-bot
2026-10-23 16:46:00 +08:00
parent f9324ddc6a
commit 84277a744e
11 changed files with 357 additions and 9 deletions
+79
View File
@@ -308,6 +308,82 @@
background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
}
/* —— 下拉菜单 —— */
.ua-menu {
position: relative;
display: inline-block;
}
.ua-menu-trigger {
gap: 6px;
}
.ua-menu-caret {
font-size: 10px;
opacity: 0.7;
transition: transform 0.2s;
}
.ua-menu.ua-open .ua-menu-caret {
transform: rotate(180deg);
}
.ua-menu-pop {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
min-width: 160px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px;
border: 1px solid var(--ua-color-border);
border-radius: var(--ua-radius-md);
background: var(--ua-color-surface);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
opacity: 0;
transform: translateY(-4px);
visibility: hidden;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.ua-menu-pop.is-end {
left: auto;
right: 0;
}
.ua-menu-pop.ua-open {
opacity: 1;
transform: none;
visibility: visible;
}
.ua-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 6px 10px;
border: none;
border-radius: var(--ua-radius-sm);
background: none;
color: var(--ua-color-text);
font-size: var(--ua-font-size-md);
cursor: pointer;
transition: background 0.12s;
}
.ua-menu-item:hover:not(:disabled) {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
}
.ua-menu-item.is-danger {
color: var(--ua-color-danger);
}
.ua-menu-item.is-danger:hover:not(:disabled) {
background: color-mix(in srgb, var(--ua-color-danger) 10%, transparent);
}
.ua-menu-item:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.ua-menu-divider {
height: 1px;
margin: 4px 2px;
background: var(--ua-color-border);
}
/* —— 多行输入 —— */
.ua-textarea {
width: 100%;
@@ -795,6 +871,9 @@
.ua-select-arrow,
.ua-select-pop,
.ua-option,
.ua-menu-pop,
.ua-menu-caret,
.ua-menu-item,
.ua-switch-track,
.ua-switch-thumb,
.ua-tab,