feat(ui): Select 的下拉箭头改成与 Menu 一致的 CSS 折角
收起朝下、展开朝上,6px 折角 + 透明度过渡,替代原来的 arrow_down_line 图标。 影响面:所有 Select 的外观;交互与 API 不变。
This commit is contained in:
@@ -770,3 +770,4 @@
|
|||||||
| 2026-10-31 | `Layout` 新增 `toolbar` 插槽:页头与页身之间的一条真实占位带(搜索 / 筛选 / 操作),宽度跟随容器(`contained` 时与侧栏 + 内容同宽),在 `height="screen"` 下不参与内部滚动。用它替代「搜索框 fixed + `contentOffset` 让位」的写法,页面不再需要用 JS 改 DOM 尺寸。兼容性:纯新增可选 prop,`contentOffset` 行为不变 |
|
| 2026-10-31 | `Layout` 新增 `toolbar` 插槽:页头与页身之间的一条真实占位带(搜索 / 筛选 / 操作),宽度跟随容器(`contained` 时与侧栏 + 内容同宽),在 `height="screen"` 下不参与内部滚动。用它替代「搜索框 fixed + `contentOffset` 让位」的写法,页面不再需要用 JS 改 DOM 尺寸。兼容性:纯新增可选 prop,`contentOffset` 行为不变 |
|
||||||
| 2026-11-01 | 新增三个「站点外壳」组件,把应用里各自手写的一套收进库:`Brand`(logo / 首字标记 + 名称,`href` 可选)、`Ticker`(无限滚动信息条,按实测宽度位移,循环不跳帧)、`SearchField`(语义版搜索框,`variant` 切普通 / 悬浮条)。同时新增展示级令牌 `--su-font-size-2xl` / `--su-line-height-2xl`(32 / 40)。兼容性:纯新增,无破坏 |
|
| 2026-11-01 | 新增三个「站点外壳」组件,把应用里各自手写的一套收进库:`Brand`(logo / 首字标记 + 名称,`href` 可选)、`Ticker`(无限滚动信息条,按实测宽度位移,循环不跳帧)、`SearchField`(语义版搜索框,`variant` 切普通 / 悬浮条)。同时新增展示级令牌 `--su-font-size-2xl` / `--su-line-height-2xl`(32 / 40)。兼容性:纯新增,无破坏 |
|
||||||
| 2026-11-01 | 新增 `EntryRow` / `EntryTile`:把应用里两套手写内容卡(`.app-card` / `.ces-card`)收进库。两者共用同一套点击语义(无修饰键接管、按住修饰键保留默认)与悬停反馈;`EntryTile` 由 `Card padding="none" hoverable` + `Cover` 拼成。兼容性:纯新增 |
|
| 2026-11-01 | 新增 `EntryRow` / `EntryTile`:把应用里两套手写内容卡(`.app-card` / `.ces-card`)收进库。两者共用同一套点击语义(无修饰键接管、按住修饰键保留默认)与悬停反馈;`EntryTile` 由 `Card padding="none" hoverable` + `Cover` 拼成。兼容性:纯新增 |
|
||||||
|
| 2026-11-01 | `Select` 的下拉箭头从 `arrow_down_line` 换成和 `Menu` 一致的 CSS 折角(6px、收起朝下 / 展开朝上)。影响面:所有 `Select` 的外观,交互不变 |
|
||||||
|
|||||||
@@ -51,15 +51,28 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 折角箭头:与 Menu 的 caret 同一套画法,收起朝下、展开朝上 */
|
||||||
.caret {
|
.caret {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: var(--su-font-size-sm);
|
width: 6px;
|
||||||
color: var(--su-text-muted);
|
height: 6px;
|
||||||
transition: transform var(--su-duration-base) var(--su-ease-in-out);
|
margin-right: 2px;
|
||||||
|
border-left: 1px solid currentColor;
|
||||||
|
border-bottom: 1px solid currentColor;
|
||||||
|
opacity: 0.4;
|
||||||
|
transform: rotate(315deg);
|
||||||
|
transition:
|
||||||
|
transform var(--su-duration-base) var(--su-ease-in-out),
|
||||||
|
opacity var(--su-duration-base) var(--su-ease-in-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trigger:hover .caret {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.triggerOpen .caret {
|
.triggerOpen .caret {
|
||||||
transform: rotate(180deg);
|
opacity: 0.7;
|
||||||
|
transform: rotate(135deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ export function Select({
|
|||||||
<span className={selected === undefined ? styles.placeholder : styles.value}>
|
<span className={selected === undefined ? styles.placeholder : styles.value}>
|
||||||
{selected?.label ?? placeholder}
|
{selected?.label ?? placeholder}
|
||||||
</span>
|
</span>
|
||||||
<Icon name="arrow_down_line" className={styles.caret} />
|
<span className={styles.caret} aria-hidden="true" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
|
|||||||
Reference in New Issue
Block a user