Skip to content
Lenso UI

v3.0.0-alpha.33

升级 RAC、重新设计 Tabs 指示器、新增 Switch 尺寸变体，以及相关示例展示。

2025 年 10 月 5 日

此版本升级了 React Aria Components，重新设计了 Tabs 指示器，为 Switch 新增尺寸支持，并补充了一系列组件示例。

安装

升级到最新版本：

npm i @lenso/tokens@alpha @lenso/ui@alpha

新增功能

RAC 升级

将 React Aria Components 升级到 2025 年 10 月 2 日发布版本。

本次升级包括：

  • 用于动画的 CSS 变量
  • 更好的 SSR 支持
  • 选择指示器的性能改进

Disclosure 与 DisclosureGroup 更新

Disclosure 与 DisclosureGroup 现在使用 React Aria 的 CSS 变量来驱动动画。组件会通过 --disclosure-panel-width 与 --disclosure-panel-height 变量在展开 / 折叠期间跟踪面板的实际尺寸。

Tabs 指示器重新设计

Tabs 现在使用 React Aria 的 SelectionIndicator 并支持 SSR，这修复了初次渲染时的布局抖动问题。

🚧 破坏性变更：

  • 将 Tabs.Indicator 移至每一个 Tabs.Tab 内部

之前：

<Tabs>  <Tabs.ListWrapper>    <Tabs.List aria-label="Options">      <Tabs.Tab>+       <Tabs.Indicator />      </Tabs.Tab>    </Tabs.List>-   <Tabs.Indicator />  </Tabs.ListWrapper>  <Tabs.Panel/></Tabs>

Switch 更新

Switch 的样式与动画都得到了更新。新增 size prop，可选值为 sm、md、lg。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";/** Adapted from HeroUI v3.2.6. SPDX-License-Identifier: Apache-2.0 */import { Switch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { display: "flex", gap: "1.5rem" } });export function Sizes() {  return (    <div {...stylex.props(styles.root)}>      <Switch size="sm">        <Switch.Content>          <Switch.Control>            <Switch.Thumb />          </Switch.Control>          Small        </Switch.Content>      </Switch>      <Switch size="md">        <Switch.Content>          <Switch.Control>            <Switch.Thumb />          </Switch.Control>          Medium        </Switch.Content>      </Switch>      <Switch size="lg">        <Switch.Content>          <Switch.Control>            <Switch.Thumb />          </Switch.Control>          Large        </Switch.Content>      </Switch>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

相关示例

我们在 Button、Disclosure、DisclosureGroup 与 Tabs 中新增了「相关示例」展示。

文档改进

组件文档

  • Tabs：更新了 anatomy，根据新的指示器设计重写了示例，并新增了相关示例展示
  • Switch：新增尺寸示例，并重写了 with-icon 示例
  • Button、Disclosure、DisclosureGroup：新增相关示例展示

迁移指南

Tabs 组件迁移

  1. 更新组件结构：
    • 将 <Tabs.Indicator /> 移至每一个 <Tabs.Tab /> 内部

链接

贡献者

感谢每一位为本次发布做出贡献的开发者！