¥Releases
Radix Themes 版本及其更新日志。
支持不受控 Checkbox
组件的不确定指示器
¥Support indeterminate indicator for the uncontrolled Checkbox
component
将 areas
属性添加到 Grid
组件,并将 gridArea
属性添加到所有布局组件(Box
、Container
、Flex
、Grid
、Section
)
¥Add areas
prop to the Grid
component and gridArea
prop to all layout components (Box
, Container
, Flex
, Grid
, Section
)
将 overflow-wrap: anywhere
样式添加到 DataList
组件,以便长值(例如 ID)可以换行到下一行
¥Add overflow-wrap: anywhere
style to the DataList
component so that long values—such as IDs—can break over to next line
支持不确定 Checkbox
组件的不确定指示器
¥Support indeterminate indicator for the indeterminate Checkbox
component
升级 Radix 基础组件
¥Upgrade Radix Primitives
支持 React 19
¥Support React 19
升级所有 Radix 基础组件
¥Upgrade all Radix Primitives
在 AlertDialog.Content
和 Dialog.Content
上添加 align
、height
、minHeight
和 maxHeight
属性。
¥Add align
, height
, minHeight
, and maxHeight
props to AlertDialog.Content
and Dialog.Content
修复由于内部循环依赖,Radix Themes 软件包无法与 webpack 打包的问题
¥Fix an issue when the Radix Themes package couldn’t be bundled with webpack because of a circular dependency within
支持 Progress 组件上的 max
属性
¥Support the max
prop on the Progress component
修复主题 grayColor
设置与显式 appearance="light"
或 appearance="dark"
值结合使用时无效的问题
¥Fix an issue when the theme grayColor
setting would have no effect in combination with explicit appearance="light"
or appearance="dark"
values
修复使用显式 color
值时 Link
使用自动高对比度颜色的回归问题。
¥Fix a regression when Link
would use an automatic high-contrast color when an explicit color
value was used.
修复 Link
在嵌套于灰色文本中时无法使用正确的文本选择和焦点颜色的回归问题。
¥Fix a regression when Link
would not use the correct text selection and focus color when nested in gray text.
调整 Link
的点击高亮样式。
¥Tweak Link
tap highlight style
调整 CheckboxGroup.Item
和 RadioGroup.Item
,以便可以实现文本溢出截断的布局。
¥Tweak CheckboxGroup.Item
and RadioGroup.Item
so that a layout with overflowing text truncation would be possible to achieve
从组件中移除不必要的 data-accent-color
属性,因为该属性没有实际作用。
¥Remove an unnecessary data-accent-color
attribute from components where it had no practical effect to be there.
重新设计 color
prop 定义的内部结构。
¥Rework the internals of the color
prop definition.
重新设计 TextField
和 TextArea
的自动填充和禁用颜色
¥Rework the autofilled and disabled colors for TextField
and TextArea
为 Spinner
组件添加内部 --spinner-animation-duration
CSS 变量。
¥Add an internal --spinner-animation-duration
CSS variable for the Spinner
component
从 CSS 中删除不必要的浏览器前缀,将包大小减少 17 KB
¥Remove unnecessary browser prefixes from the CSS, reducing the bundle size by 17 KB
修复 Link
在嵌套于彩色文本中时无法使用自动高对比度颜色的回归问题。
¥Fix a regression when Link
would not use an automatic high-contrast color when nested within colored text.
修复 Link
在渲染为 button
时无法显示悬停样式的问题
¥Fix a regression when Link
wouldn't display hover styles when rendered as a button
修复 TextArea
在 Firefox 中无法保留空格序列的回归问题。
¥Fix a regression when TextArea
would not preserve sequences of white space in Firefox
修复重置样式表中的语法错误
¥Fix a syntax error in the reset stylesheet
修复 Safari 中复选框 size="1"
指示符的对勾对齐问题
¥Fix Checkbox size="1"
indicator checkmark alignment in Safari
修复 Safari 中复选框和单选按钮禁用后的光标样式无效的问题
¥Fix Checkbox and Radio disabled cursor styles not working in Safari
Radix Themes 3.0 配备了全新的布局引擎、11 个新组件以及完整的 ESM 支持。阅读公告。
¥Radix Themes 3.0 comes with a new layout engine, 11 new components, and full ESM support. Read the announcement.
¥Upgrade guide
此版本引入了一些重大更改。请按照以下步骤进行升级。
¥This release introduces a number of breaking changes. Please follow the steps below to upgrade.
¥General
多部分组件现在不再导出命名部分。改用点符号,该符号已修改为与 React 服务器组件兼容。例如:
¥Multi-part components now don’t export named parts anymore. Use dot notation instead, which was revised to work with React Server Components. For example:
DialogRoot
→ Dialog.Root
DialogTrigger
→ Dialog.Trigger
DialogContent
→ Dialog.Content
…对于所有多部分组件也是如此:
¥…and so on for all multi-part components:
AlertDialog
Callout
ContextMenu
Dialog
DropdownMenu
HoverCard
Popover
RadioGroup
Select
Table
Tabs
TextField
包内部组件(例如 prop 定义和辅助函数)不再可从根 @radix-ui/themes
导入入口点获取。
¥Package internals such as prop definitions and helpers are no longer available from the root @radix-ui/themes
import entry point.
请改为从 @radix-ui/themes/props
和 @radix-ui/themes/helpers
导入它们。
¥Import them from @radix-ui/themes/props
and @radix-ui/themes/helpers
instead.
¥Props
布局组件上的 width
和 height
属性不再映射到空间尺度。查找 width
和 height
属性,并将其替换为相应的 空间缩放比例 步骤:
¥The width
and height
props on layout components don't map to space scale anymore. Find and replace your width
and height
prop usage with the corresponding space scale steps:
width="1"
→ width="4px"
width="2"
→ width="8px"
width="3"
→ width="12px"
width="4"
→ width="16px"
width="5"
→ width="24px"
width="6"
→ width="32px"
width="7"
→ width="40px"
width="8"
→ width="48px"
width="9"
→ width="64px"
…对于 height
也是如此
¥…and so on for height
确保同时更新响应式对象语法。
¥Make sure to update responsive object syntax as well
你还可以使用 var(--space-1)
到 var(--space-9)
来代替硬编码值。
¥You can also use var(--space-1)
to var(--space-9)
instead of hardcoded values.
布局组件上的 shrink
和 grow
属性已重命名
¥The shrink
and grow
props on layout components were renamed
shrink
→ flexShrink
grow
→ flexGrow
¥Colors
如果你在自定义组件中使用以下令牌,请确保替换相应的引用。
¥If you were using the following tokens for your custom components, make sure to replace the corresponding references.
--color-surface-accent
→ --accent-surface
对比色已重命名:
¥Contrast colors were renamed:
--accent-9-contrast
→ --accent-contrast
--red-9-contrast
→ --red-contrast
--pink-9-contrast
→ --pink-contrast
--blue-9-contrast
→ --blue-contrast
…对于所有尺度也是如此
¥…and so on for all scales
添加了新的焦点颜色标度。重命名以下标记:
¥Added a new focus color scale. Rename the following tokens:
--color-autofill-root
→ --focus-a3
--color-focus-root
→ --focus-8
--color-selection-root
→ --focus-a5
--gray-2-translucent
及其对应的灰色部分已被移除。
¥--gray-2-translucent
and the corresponding tinted gray colors were removed.
请将 --color-panel-translucent
与背景模糊滤镜结合使用。
¥Use --color-panel-translucent
in combination with a backdrop blur filter instead.
¥Components
AlertDialog
、Dialog
的内容部分现在默认使用 maxWidth="600px"
。
¥AlertDialog
, Dialog
now have maxWidth="600px"
by default on the Content part.
这比之前的 580px
值略大。如果你使用需要不同宽度的对话框,请使用你自己的值覆盖 maxWidth
。
¥This is slightly larger than the previous 580px
value. If you use dialogs that need a different width, override maxWidth
with your own value.
Badge
有了一个新的 size="3"
,size="2"
现在更小,size="1"
的尺寸也进行了调整。
¥Badge
has a new size="3"
, size="2"
is now much smaller, and size="1"
dimensions were tweaked
将 size="2"
的用法替换为 size="3"
¥Replace your size="2"
usage with size="3"
Card
的内部 HTML 结构和样式已重新设计,现在渲染单个 HTML 节点。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。
¥Card
internal HTML structure and styles were reworked and now renders a single HTML node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
如果你需要在 ghost
以外的变体上覆盖卡片的背景颜色,请使用 --card-background-color
变量(而不是直接赋值 background-color
),或者将背景颜色设置在嵌套为卡片第一个子元素的 <Inset p="current">
元素上。
¥If you need to override the Card’s background color on variants other than ghost
, use --card-background-color
variable instead of assigning background-color
directly, or set your background color on an <Inset p="current">
element nested as the first child of the Card.
检查使用 asChild
或被父组件 asChild
覆盖的卡片实例。(常见的链接或按钮卡无需任何额外样式即可正常工作)。
¥Check your Card instances that uses asChild
or is asChild
’ed onto by a parent component. (The common case with link or button card without any extra styles will work as expected).
HoverCard
和 Popover
现在在内容部分默认使用 maxWidth="480px"
。
¥HoverCard
and Popover
now have maxWidth="480px"
by default on the Content part.
如果你使用需要更宽宽度的弹出窗口和悬停卡片,请使用你自己的值覆盖 maxWidth
。
¥If you use popovers and hover cards that need a wider width, override maxWidth
with your own value.
RadioGroup
的内部 HTML 结构和样式已重新设计,现在设计为在将 children
传递给 Item
部分时显示可选的文本标签。Root
部分现在还提供弹性列样式和间距。
¥RadioGroup
internal HTML structure and styles were reworked and is now designed to display an optional text label when passing children
to the Item
part. The Root
part now also provides flex column styles and spacing.
如果你需要更低级别的控制,你可以改用 Radio
组件。
¥If you need lower-level control, you can use the Radio
component instead
Section
有了一个新的 size="3"
¥Section
has a new size="3"
将所有使用 size="3"
的 Section 更新为 size="4"
¥Update all your Sections that used size="3"
to size="4"
Tabs
底层字母/单词间距 CSS 变量已重命名,以同时支持 Tabs
和 TabNav
组件。如果你正在使用它们,请将它们重命名为新值:
¥Tabs
underlying letter/word spacing CSS variables were renamed to support both Tabs
and TabNav
components. If you were using them, rename them to the new values:
--tabs-trigger-active-letter-spacing
→ --tab-active-letter-spacing
--tabs-trigger-active-word-spacing
→ --tab-active-word-spacing
--tabs-trigger-inactive-letter-spacing
→ --tab-inactive-letter-spacing
--tabs-trigger-inactive-word-spacing
→ --tab-inactive-word-spacing
TextField
现在只有两部分:Root
和 Slot
删除了 Input
部分,简化了属性的转发方式。
¥TextField
now only has 2 parts: Root
and Slot
, dropping the Input
part and simplifying how props are forwarded.
所有未使用 TextField.Root
的 TextField.Input
组件都应重命名为 TextField.Root
¥All TextField.Input
parts used without TextField.Root
should be renamed to TextField.Root
所有在 TextField.Root
中使用的 TextField.Input
部分都应删除,并将其 prop 直接放在 TextField.Root
部分上。
¥All TextField.Input
parts used within TextField.Root
should be removed and their props should be put directly on the TextField.Root
part
所有放置在 TextField.Input
右侧的 TextField.Slot
部分都需要 side="right"
prop。但是,当在一个 TextField
中使用两个插槽时,无需进行调整,例如,左侧一个插槽,右侧另一个插槽。在这种情况下,插槽将自动放置在不同的侧面。
¥All TextField.Slot
parts placed to the right of TextField.Input
will need side="right"
prop. However, no adjustment is needed when two slots were used within one TextField
, e.g. one slot on the left and another one on the right. In that case, the slots will be automatically placed on different sides.
如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。
¥Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
Theme
不再自动设置 body 背景颜色。现在,背景颜色默认由根 Theme
提供。CSS 变量 --color-page-background
已不再可用。
¥Theme
does not set body background color automatically anymore. The background color is now provided by the root Theme
by default. The CSS variable --color-page-background
is no longer available.
在大多数情况下,可以安全地将其替换为 .radix-themes
元素上可用的 --color-background
。
¥In most cases, it can be safely replaced with --color-background
available on the .radix-themes
element.
Tooltip
的内容部分现在默认使用 maxWidth="360px"
。
¥Tooltip
now has maxWidth="360px"
by default on the Content part.
如果你使用需要更宽的工具提示,请使用你自己的值覆盖 maxWidth
。
¥If you use tooltips that need to be wider, override maxWidth
with your own value.
¥Full changelog
常规
¥General
软件包结构
¥Package structure
改进 ESM 兼容性
¥Improve ESM compatibility
改进各个组件的摇树优化
¥Improve tree-shaking of individual component parts
[Breaking] 删除多部分组件的命名导出
¥[Breaking] Drop named exports for multi-part components
注意:我们的新方法也允许点符号在服务器组件中可靠地工作。
¥Note: Our new approach allows dot notation to work reliably in server components too
[Breaking] 从根 @radix-ui/themes
导入入口点移除组件属性定义和内部辅助函数,并将其从 @radix-ui/themes/props
和 @radix-ui/themes/helpers
导出,以便使用相同技术在 Radix Themes 之上构建自己的组件库。
¥[Breaking] Remove component prop definitions and internal helpers from the root @radix-ui/themes
import entry point and export them from @radix-ui/themes/props
and @radix-ui/themes/helpers
to make it possible to build your own component library on top of Radix Themes using the same techniques.
如果你的工具设置复杂,无法支持现代模块解析规则,请为包添加通配符入口点,以便直接访问包内部。
¥Add a wildcard entry point to the package to allow direct access to the package internals as an escape hatch if you have a complex tooling setup that can’t support modern module resolution rules
为高级用例添加额外的 CSS 文件导出:
¥Add extra CSS file exports for advanced use-cases:
如果需要对 CSS 优先级进行细粒度控制,请导出单独的 tokens.css
、components.css
和 utilities.css
文件。例如,这允许在你自己的 CSS 之后导入 Radix 主题 utilities.css
,以及其之前的所有内容。
¥Export individual tokens.css
, components.css
, and utilities.css
files in case you need fine-grained control of the CSS precedence. For example, this allows to import Radix Themes utilities.css
after your own CSS, and everything else before that.
除上述内容外,你还可以自定义要导入的颜色。除了导入 tokens.css
之外,你还可以导入 tokens/base.css
和 tokens/colors/*.css
,其中 *
对应于你项目中所需的强调色和灰色名称。
¥Additionally to the above, you can customise which colors to import. Instead of importing tokens.css
, you can also import tokens/base.css
and tokens/colors/*.css
, where *
corresponds to the names of the accent and gray colors you need in your project.
导出仅包含布局组件(Box、Flex、Grid、Container、Section)样式的 layout.css
。还可以使用单独的导出 layout/tokens.css
、layout/components.css
和 layout/utilities.css
来支持上述用例。
¥Export layout.css
that only includes styles for the layout components (Box, Flex, Grid, Container, Section). Individual exports layout/tokens.css
, layout/components.css
, and layout/utilities.css
are also available to support the above use-case.
属性
¥Props
向所有布局组件添加以下属性:
¥Add the following props to all layout components:
minWidth
, maxWidth
minHeight
, maxHeight
flexBasis
, flexShrink
, flexGrow
gridColumn
, gridColumnStart
, gridColumnEnd
gridRow
, gridRowStart
, gridRowEnd
overflow
, overflowX
, overflowY
重新设计所有布局属性以允许任意 CSS 值,包括与响应式对象语法一起使用时。支持任意值的 props 包括:
¥Rework all layout props to allow arbitrary CSS values, including when used with the responsive object syntax. Props that support arbitrary values include:
width
, minWidth
, maxWidth
height
, minHeight
, maxHeight
m
, mx
, my
, mt
, mr
, mb
, ml
p
, px
, py
, pt
, pr
, pb
, pl
inset
, top
, right
, bottom
, left
gap
, gapX
, gapY
flexBasis
, flexShrink
, flexGrow
gridColumn
, gridColumnStart
, gridColumnEnd
gridRow
, gridRowStart
, gridRowEnd
[Breaking] width
和 height
属性不再映射到空间尺度。这是因为在绝大多数情况下,宽度和高度未设置为空间比例,因此,IDE 自动补齐建议的空间比例感觉很奇怪/误导。
¥[Breaking] The width
and height
props don't map to space scale anymore. This is because in the vast majority of cases, width and height were not set to space scale, and with that, space scale as an IDE autocomplete suggestion felt odd/misleading.
[Breaking] 将 shrink
和 grow
属性重命名为 flexShrink
和 flexGrow
¥[Breaking] Rename shrink
and grow
props to flexShrink
and flexGrow
更新布局属性的类型签名,以便代码编辑器建议尽可能仅使用空间比例值。CSS 关键字和其他值(例如 "auto"
或 "100vw"
)仍然可以作为手动字符串值使用。
¥Update the type signature of the layout props so that code editor suggestions use just space scale values when possible. CSS keywords and other values such as "auto"
or "100vw"
are still available as manual string values.
使用 JSDoc 记录所有布局属性
¥Document all layout props with JSDoc
修复响应式 props 使用不带 initial
键的断点对象时无法应用默认 prop 值的问题
¥Fix an issue with responsive props when using a breakpoints object without the initial
key would not apply the default prop value
移除从原生 HTML 元素继承的组件中的原生 color
、defaultValue
和 defaultChecked
属性,以避免与它们的自定义实现混淆
¥Remove the native color
, defaultValue
, and defaultChecked
attributes from components that inherit them from the native HTML elements to avoid confusion with their custom implementations
[Breaking] 重新设计所有组件和部件上 asChild
属性的可用性
¥[Breaking] Rework the availability of asChild
prop on all components and parts
颜色
¥Colors
确保 highContrast
文本颜色在嵌套于接受强调色的其他组件中时保持一致。
¥Make sure highContrast
text colors work consistently when nested within other components that accept an accent color
调整所有 variant="soft"
菜单项的背景颜色。
¥Tweak the background color of all variant="soft"
menu items
[Breaking] 将 --color-surface-accent
重命名为 --accent-surface
¥[Breaking] Rename --color-surface-accent
to --accent-surface
[Breaking] 将 --accent-9-contrast
、--red-9-contrast
、--pink-9-contrast
、--blue-9-contrast
等重命名为 --accent-contrast
、--red-contrast
、--pink-contrast
、--blue-contrast
等。
¥[Breaking] Rename --accent-9-contrast
, --red-9-contrast
, --pink-9-contrast
, --blue-9-contrast
, etc. to --accent-contrast
, --red-contrast
, --pink-contrast
, --blue-contrast
and so on.
移除 --gray-2-translucent
及其对应的浅灰色
¥Remove --gray-2-translucent
and the corresponding tinted gray colors
调整 --color-surface
和 --color-panel-translucent
的值。
¥Tweak --color-surface
and --color-panel-translucent
values
[Breaking] 将 --color-focus-root
、--color-selection-root
、--color-autofill-root
替换为焦点颜色标度,例如 --focus-1
- --focus-12
和 --focus-a1
- --focus-a12
。
¥[Breaking] Replace --color-focus-root
, --color-selection-root
, --color-autofill-root
with a focus color scale, e.g. --focus-1
– --focus-12
, and --focus-a1
– --focus-a12
.
其他
¥Other
加速大多数动画
¥Speed up most of the animations
确保所有具有填充或边框样式的元素都使用 box-sizing: border-box
¥Ensure all elements that have padding or border styles use box-sizing: border-box
确保已禁用的光标样式正确应用
¥Ensure that disabled cursor styles are applied correctly
为半透明面板添加模糊背景滤镜效果。
¥Add a blur backdrop filter effect to the translucent panels
11 个新组件
¥11 new components
DataList
用于将文本数据显示为键值对的组件。部分:
¥Component for displaying text data as key-value pairs. Parts:
Root
Item
Label
Value
CheckboxGroup
一组复选框,带有可选的文本标签和移动焦点。部分:
¥Group of checkboxes with an optional text label and roving focus. Parts:
Root
Item
CheckboxCards
交互式卡片组件,用于从列表中选择一个或多个值。部分:
¥Interactive card components to pick one or more value from the list. Parts:
Root
Item
Progress
进度条组件用于指示任务的完成情况。
¥Progress bar component that indicates completion of a task.
Radio
用于构建带有单选输入的自定义布局的独立元素。
¥Standalone element for building your own layouts with radio inputs.
RadioCards
交互式卡片组件,用于从列表中选择一个值。部分:
¥Interactive card components to pick one of the values from the list. Parts:
Root
Item
Reset
用于重置任何原生 HTML 元素样式的组件。
¥Component that resets the styles for any native HTML element.
SegmentedControl
用于从多个选项中选择单个选项并控制类似选项卡式界面的组件。
¥Component for selecting a single option out of many and for controlling tab-like interfaces
Skeleton
可以封装任何 UI 元素并将其转换为加载框架的组件。还可以使用 loading
属性有条件地渲染自身或 React Fragment。
¥Component that may wrap any UI element and turn it into a loading skeleton. Can also render self or a React Fragment conditionally using a loading
prop.
Spinner
加载微调组件。与 Skeleton
一样,它也可以封装任何 UI 元素并使用条件 loading
属性显示自身。
¥Loading spinner component. Like Skeleton
, it also may wrap any UI element and display itself using a conditional loading
prop.
TabNav
与 Tabs
等效,但用于页面导航。渲染常规链接并支持移动焦点。部分:
¥Equivalent for Tabs
, but used for page navigation. Renders regular links and supports roving focus. Parts:
Root
Link
AlertDialog
, Dialog
添加 position: relative
以支持绝对定位的子组件。
¥Add position: relative
to support absolutely positioned children.
将 width
、minWidth
、maxWidth
属性添加到内容部分。
¥Add width
, minWidth
, maxWidth
props to the Content part.
在内容部分默认设置 maxWidth="600px"
。
¥Set maxWidth="600px"
by default on the Content part.
重新设计滚动容器,使其在视口上显示滚动条,而不是局限于对话框的内容部分。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。
¥Rework the scroll container so that it displays scrollbars on the viewport rather than confined to the dialog Content part. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
Badge
移除 user-select: none
¥Remove user-select: none
[Breaking] 添加 size="3"
,使 size="2"
更小,调整 size="1"
尺寸。
¥[Breaking] Add size="3"
, make size="2"
much smaller, tweak size="1"
dimensions
Blockquote
, Code
, Em
, Heading
, Quote
, Link
, Strong
, Text
添加新的 wrap
和 truncate
属性,用于控制文本是否换行以及是否使用省略号截断
¥Add new wrap
and truncate
props that control whether the text wraps and whether it is truncated with ellipsis
Card
重新设计内部 HTML 结构和样式。此组件现在渲染单个 HTML 节点。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。
¥Rework the internal HTML structure and styles. This component now renders a single HTML node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
Code
variant="ghost"
颜色现在与 Text 类似,除非使用 color
属性明确设置,否则会继承其颜色。
¥variant="ghost"
color now works similarly to Text, inheriting the color unless set explicitly using the color
prop
Container
添加 align
属性来控制容器内容是左对齐、居中对齐还是右对齐
¥Add align
prop to control whether the container content is aligned to the left, center, or right
[Breaking] 将 display="block"
值更改为 display="initial"
(之前的值已损坏)
¥[Breaking] Change the display="block"
value to display="initial"
(the former value was broken)
ContextMenu
, DropdownMenu
将 color
属性添加到 CheckboxItem
和 RadioItem
部分
¥Add color
prop to CheckboxItem
and RadioItem
parts
Checkbox
, RadioGroup
, Switch
重新设计内部 HTML 结构和样式。这些组件现在渲染更少的 HTML 节点,并将所有 props 转发到最顶层节点。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。
¥Rework the internal HTML structure and styles. These components now render fewer HTML nodes and forward all props to the topmost node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
DropdownMenu
当内容部分使用 variant="soft"
时,请为高亮项目使用更亮的文本颜色。
¥Use a brighter text color for the highlighted item when the Content part uses variant="soft"
添加可选的 TriggerIcon
部件,用于渲染向下箭头指示器。
¥Add an optional TriggerIcon
part that renders an arrow down indicator
Box
, Flex
, Grid
添加对 as
属性渲染为 span
或 div
的支持
¥Add support for as
prop to render as span
or div
对于 Box,现在无论标签是什么,display: block
样式都会强制执行。
¥For Box, display: block
style is now enforced regardless of the tag
Button
, IconButton
添加新的 loading
属性
¥Add new loading
prop
Flex
添加 gapX
和 gapY
属性
¥Add gapX
and gapY
props
HoverCard
, Popover
添加 position: relative
以支持绝对定位的子组件。
¥Add position: relative
to support absolutely positioned children.
在内容部分添加 width
、minWidth
、maxWidth
、height
、minHeight
、maxHeight
属性。
¥Add width
, minWidth
, maxWidth
, height
, minHeight
, maxHeight
props to the Content part.
在内容部分默认设置 maxWidth="480px"
。
¥Set maxWidth="480px"
by default on the Content part.
RadioGroup
[Breaking] 重新设计内部 HTML 结构和样式。此组件现在设计为在将 children
传递给 Item
部分时显示可选的文本标签,并且 Root
部分现在提供弹性列样式和间距。
¥[Breaking] Rework the internal HTML structure and styles. This component is now designed to display an optional text label when passing children
to the Item
part, and the Root
part now provides flex column styles and spacing.
Section
[Breaking] 将 display="block"
值更改为 display="initial"
(之前的值已损坏)
¥[Breaking] Change the display="block"
value to display="initial"
(the former value was broken)
[Breaking] 对 size="3"
使用新值,对 size="4"
使用先前的值
¥[Breaking] Use a new value for size="3"
, use the previous value for size="4"
Select
确保触发器字体粗细不被继承,例如从封装的 <label>
元素继承。
¥Make sure that Trigger font weight is not inherited, e.g. from a wrapping <label>
element
Separator
允许 orientation
属性的响应式值
¥Allow responsive values for the orientation
prop
ScrollArea
修复滚动区域在收到父级自动高度通知后无法拉伸到 100% 高度的问题
¥Fix an issue when Scroll Area would be unable to stretch to 100% height when informed by the parent’s auto height
Slider
将边界框的大小更改为与滑块轨道的大小匹配。
¥Change the size of the bounding box to match the size of the Slider track
用 flex-grow: 1
和 width: stretch
/ height: stretch
替换 flex-shrink: 0
,使滑块元素在布局中更直观地伸缩。
¥Replace flex-shrink: 0
with flex-grow: 1
and width: stretch
/ height: stretch
to allow the slider element to flex and shrink in layouts more intuitively.
修复 Safari 中焦点轮廓过大的问题
¥Fix an overzealous focus outline in Safari
Table
添加新的 layout
属性,用于控制 table-layout
样式属性
¥Add new layout
prop to control the table-layout
style property
将 TableCell
部分中的 width
prop 类型签名和实现与布局组件中重新设计的 width
prop 对齐。
¥Align width
prop type signature and implementation on the TableCell
part with the reworked width
prop on the layout components
将 minWidth
和 maxWidth
属性添加到 TableCell
部分
¥Add minWidth
and maxWidth
props to the TableCell
part
Tabs
:
将 color
和 highContrast
属性添加到 TabsList
¥Add color
and highContrast
props to TabsList
添加边距属性 TabsList
和 TabsContent
¥Add margin props TabsList
and TabsContent
重命名了 .radix-themes
中的字母/单词间距 CSS 变量,使其同时支持 Tabs
和 TabNav
组件。
¥Renamed the letter/word spacing CSS variables in .radix-themes
so that it supports both Tabs
and TabNav
components.
--tabs-trigger-active-letter-spacing
→ --tab-active-letter-spacing
--tabs-trigger-active-word-spacing
→ --tab-active-word-spacing
--tabs-trigger-inactive-letter-spacing
→ --tab-inactive-letter-spacing
--tabs-trigger-inactive-word-spacing
→ --tab-inactive-word-spacing
TextArea
添加 radius
属性
¥Add radius
prop
添加 resize
属性
¥Add resize
prop
修复 Grammarly 扩展程序破坏组件样式的问题
¥Fix an issue when Grammarly extension would break the component styles
确保字体粗细不会被继承,例如从封装的 <label>
元素继承。
¥Make sure that the font weight is not inherited, e.g. from a wrapping <label>
element
重新设计内部 HTML 结构和样式。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。
¥Rework the internal HTML structure and styles. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.
TextField
[Breaking] 移除 Input
部分以简化属性的转发方式,并重新设计内部 HTML 结构和样式。
¥[Breaking] Remove the Input
part to simplify how props are forwarded and rework internal HTML structure and styles.
修复某些输入 type
不支持 getSelectionRange
的问题
¥Fix an issue with some input type
s not supporting getSelectionRange
修复 Grammarly 扩展程序破坏组件样式的问题
¥Fix an issue when Grammarly extension would break the component styles
确保字体粗细不会被继承,例如从封装的 <label>
元素继承。
¥Make sure that the font weight is not inherited, e.g. from a wrapping <label>
element
ThemePanel
将主题面板切换为 "T" 键,暗黑模式切换为 "D" 键(不使用修饰符)。
¥Change the hotkey to toggle the Theme Panel to "T" keypress and dark mode to "D" keypress (without modifiers).
Theme
在根 Theme
组件上设置 min-height: 100vh
¥Set min-height: 100vh
on the root Theme
component
修复在某些情况下 hasBackground
属性值无效的问题
¥Fix an issue when in certain situations, hasBackground
prop value would have no effect
优化 Theme
默认具有背景颜色的逻辑。没有明确指定 hasBackground
属性的 Theme
将显示背景颜色:
¥Refine the logic for when Theme
has a background color by default. Theme
without an explicit hasBackground
prop will display a background color:
当它是根 Theme
组件时
¥When it is the root Theme
component
当它具有明确的外观值时,例如 <Theme apperance="light">
或 <Theme apperance="dark">
¥When it has an explicit appearance value, e.g. <Theme apperance="light">
or <Theme apperance="dark">
主体背景颜色不再自动设置。现在,背景颜色默认由根 Theme
提供。
¥Body background color is no longer set automatically. The background color is now provided by the root Theme
by default.
[Breaking] CSS 变量 --color-page-background
不再可用。
¥[Breaking] The CSS variable --color-page-background
is no longer available.
html
上的 suppressHydrationWarning
不再需要(除非其他库需要,例如 next-themes
)
¥suppressHydrationWarning
on html
is no longer needed (unless required by other libraries, like next-themes
)
使用 JSDoc 记录所有主题属性
¥Document all Theme props with JSDoc
Tooltip
添加 width
、minWidth
、maxWidth
属性。
¥Add width
, minWidth
, maxWidth
props.
在工具提示内容上默认设置 maxWidth="360px"
¥Set maxWidth="360px"
by default on the tooltip content
将默认延迟时间更改为 200 毫秒
¥Change the default delay duration to 200ms
修复使用 CSS 检查器检查 Radix Themes 样式表时 Chrome 有时崩溃的问题。
¥Fix an issue when Chrome would sometimes crash while using CSS inspector on a Radix Themes stylesheet.
Card
修复在不支持 color-mix
的浏览器中 variant="surface"
边框颜色可能消失的问题。
¥Fix an issue when variant="surface"
border color may disappear in browsers that don't support color-mix
.
调整 variant="surface"
边框颜色。
¥Tweak variant="surface"
border color.
Code
当 variant="ghost"
在 Link
中使用时,请确保 Link
上的 underline="hover"
也得到遵守。
¥When variant="ghost"
is used within a Link
, make sure that underline="hover"
on the Link
is respected.
TextField
改进常用字体的垂直文本对齐方式。
¥Improve vertical text alignment with common fonts.
禁用输入时不应用自动填充强调色。
¥Don’t apply the autofill accent color when the input is disabled.
确保自动填充强调色始终与焦点轮廓颜色匹配。
¥Make sure the autofill accent color always pairs with the focus outline color.
常规
¥General
在 CSS 构建中结合选择器,提升开发者在浏览器中检查元素时的体验。
¥Combine selectors in the CSS build, improving the developer experience when inspecting elements in the browser.
从 CSS 构建中删除注释。
¥Remove comments from the CSS build.
将 CSS 选择器特异性限制在 0,1,0
处(用于设置 HTML 元素的样式),以及限制在 0,1,1
处(用于设置伪元素的样式),从而提高与 Tailwind 的兼容性。
¥Cap CSS selector specificity at 0,1,0
for styling HTML elements and at 0,1,1
for styling pseudo-elements, improving compatibility with Tailwind.
[升级指南] 如果你依赖于 Radix Themes 的任何特殊性怪癖,请确保你的样式覆盖仍然能够正常工作。
¥[Upgrade guide] If you were relying on any specificity quirks of Radix Themes, make sure that your style overrides still work as expected.
重新设计暗黑模式颜色,优化亮黑模式颜色(通过 Radix Colors 3.0.0)。
¥Rework dark mode colors, refine light mode colors (via Radix Colors 3.0.0).
修复过饱和的透明灰色。
¥Fix oversaturated transparent grays.
[升级指南] 如果你之前使用颜色标记作为自定义样式,请确保你的设计外观符合预期。
¥[Upgrade guide] If you were using the color tokens for your custom styles, make sure that your designs look as expected.
[升级指南] 如果你覆盖了某些颜色,请确保你的覆盖与新的色阶相协调。
¥[Upgrade guide] If you were overriding certain colors, make sure that your overrides are harmonized with the new color scales.
重新设计透明的黑白颜色比例。
¥Rework transparent black and white color scales.
[升级指南] 如果你之前使用透明黑白色阶作为自定义样式(--black-a1
、--white-a1
等),请务必检查新值并更新使用的步骤,以确保你的设计外观符合预期:
¥[Upgrade guide] If you were using transparent black and white color scales for your custom styles (--black-a1
, --white-a1
, etc.), make sure to check the new values and update the steps used so that your designs look as expected:
将 --black-a1
更改为 rgba(0, 0, 0, 0.01)
。
¥Change --black-a1
to rgba(0, 0, 0, 0.01)
.
将 --black-a2
更改为 rgba(0, 0, 0, 0.024)
。
¥Change --black-a2
to rgba(0, 0, 0, 0.024)
.
将 --black-a3
更改为 --black-a1
。
¥Change --black-a3
to --black-a1
.
将 --black-a4
更改为 --black-a2
。
¥Change --black-a4
to --black-a2
.
将 --black-a5
更改为 --black-a2
。
¥Change --black-a5
to --black-a2
.
将 --black-a6
更改为 --black-a3
。
¥Change --black-a6
to --black-a3
.
将 --black-a7
更改为 --black-a3
或 --black-a4
。
¥Change --black-a7
to --black-a3
or --black-a4
.
将 --black-a8
更改为 --black-a5
。
¥Change --black-a8
to --black-a5
.
将 --black-a9
更改为 --black-a6
或 --black-a7
。
¥Change --black-a9
to --black-a6
or --black-a7
.
将 --black-a10
更改为 --black-a7
。
¥Change --black-a10
to --black-a7
.
将 --black-a11
更改为 --black-a8
。
¥Change --black-a11
to --black-a8
.
将 --black-a12
更改为 --black-a11
。
¥Change --black-a12
to --black-a11
.
将 --white-a1
更改为 transparent
。
¥Change --white-a1
to transparent
.
将 --white-a2
更改为 rgba(255, 255, 255, 0.01)
。
¥Change --white-a2
to rgba(255, 255, 255, 0.01)
.
将 --white-a3
更改为 --white-a1
或 --white-a2
。
¥Change --white-a3
to --white-a1
or --white-a2
.
将 --white-a4
更改为 --white-a2
。
¥Change --white-a4
to --white-a2
.
将 --white-a5
更改为 --white-a3
。
¥Change --white-a5
to --white-a3
.
将 --white-a6
更改为 --white-a3
或 --white-a4
。
¥Change --white-a6
to --white-a3
or --white-a4
.
将 --white-a7
更改为 --white-a4
。
¥Change --white-a7
to --white-a4
.
将 --white-a8
更改为 --white-a5
。
¥Change --white-a8
to --white-a5
.
将 --white-a9
更改为 --white-a6
。
¥Change --white-a9
to --white-a6
.
将 --white-a10
更改为 --white-a7
。
¥Change --white-a10
to --white-a7
.
将 --white-a11
更改为 --white-a9
。
¥Change --white-a11
to --white-a9
.
将 --white-a12
更改为 --white-a11
或 --white-a12
。
¥Change --white-a12
to --white-a11
or --white-a12
.
优化阴影比例。
¥Refine the shadow scale.
在大多数 color="gray"
组件上,焦点环保持主题强调色,类似于文本选择颜色。
¥Maintain theme accent color for focus rings on most color="gray"
component, similarly to the text selection color.
将一些内部组件特定的 CSS 变量更改为遵循命名模式。
¥Change some internal component-specific CSS variables to follow a naming pattern.
确保 Theme
组件上的强制明暗外观也能设置相应的浏览器颜色,例如正确的输入框自动填充背景颜色。
¥Make sure that forced light/dark appearance on the Theme
component also sets the corresponding browser colors, like the correct input autofill background color.
将所有 @keyframes
动画重命名为 rt-
前缀并采用短横线命名。
¥Rename all @keyframes
animations with rt-
prefix and into kebab case.
对于大多数焦点样式,请使用 outline
而不是 box-shadow
,这可以避免 Chrome 中焦点元素上出现的轻微抗锯齿问题。
¥Use outline
rather than box-shadow
for most focus styles, which avoids a slight anti-aliasing issue in Chrome on focused elements.
AlertDialog
, Dialog
在对话框内容周围添加填充,以防止其接触视口边缘。
¥Add padding around dialog content to prevent it from touching the viewport edges.
确保对话框内容不会溢出 iOS 上的视口。
¥Make sure that the dialog content doesn’t overflow viewport on iOS.
Avatar
不强制使用后备图标大小。
¥Don’t enforce fallback icon size.
[升级指南] 如果你使用 svg
资源作为后备,请确保手动设置合适的大小。
¥[Upgrade guide] If you were using svg
assets as a fallback, make sure to set an appropriate size manually.
添加 CSS 变量以控制交互元素上的光标样式:
¥Add CSS variables to control the cursor style on interactive elements:
--cursor-button: default;
--cursor-checkbox: default;
--cursor-disabled: not-allowed;
--cursor-link: pointer;
--cursor-menu-item: default;
--cursor-radio: default;
--cursor-slider-thumb: default;
--cursor-slider-thumb-active: default;
--cursor-switch: default;
用单个 .rt-reset
类替换 .rt-reset-button
和 .rt-reset-a
类。
¥Replace .rt-reset-button
and .rt-reset-a
classes with a single .rt-reset
class.
新的 .rt-reset
类可用于在构建自定义组件时重置 a
、button
、h1
、h2
、h3
、h4
、h5
、h6
、ol
、ul
、p
和 pre
标签。
¥The new .rt-reset
class can be use to reset a
, button
, h1
, h2
, h3
, h4
, h5
, h6
, ol
, ul
, p
, and pre
tags when building custom components.
[升级指南] 如果你之前使用这些类作为自定义组件,请更新使用的类名。
¥[Upgrade guide] If you were using these classes for your custom components, update the class name used.
Blockquote
[Breaking] 移除 trim
属性。
¥[Breaking] Remove trim
prop.
Button
, IconButton
优化并规范化禁用状态的外观。
¥Refine and normalise the look and feel of the disabled states.
将 disabled
与 asChild
一起使用时,将禁用的样式应用于其他元素
¥Apply disabled styles to other elements when using disabled
together with asChild
改进 variant="classic"
在明夜间模式下不同强调色下的外观和感觉。
¥Improve variant="classic"
look and feel across different accent colors in light and dark mode.
Callout
调整布局工作方式,允许在 Callout.Root
中嵌套多个 Callout.Text
元素。
¥Tweak how the layout works to allow nesting multiple Callout.Text
elements within Callout.Root
[升级指南] 如果你依赖于 Callout.Root
提供的 flex 属性,请将布局更改为明确使用 Flex
组件。
¥[Upgrade guide] If you were relying on how Callout.Root
happened to provide flex properties, change your layout to use a Flex
component explicitly.
修复除非传递显式 color
属性,否则标注会继承文本颜色的问题。
¥Fix an issue when the callout would inherit text color unless an explicit color
prop was passed.
[升级指南] 如果你更喜欢以前的外观,请将 highContrast
属性传递给你的标注,以使文本颜色更深。
¥[Upgrade guide] If you preferred the previous look, pass highContrast
prop to your callouts to make the text darker.
为灰色的 variant="surface"
使用灰色背景。
¥Use a gray background for a gray variant="surface"
.
使用更深的轮廓颜色 variant="outline"
。
¥Use a darker outline color variant="outline"
.
Checkbox
[Breaking] 改进布局,使 Text
组件中复选框的包裹会自动使其与文本首行对齐。
¥[Breaking] Improve layout so that wrapping a checkbox in Text
component automatically aligns the checkbox with the first line of the text.
[升级指南] 确保带有复选框的布局外观符合预期。如果没有,请使用 <Text as="label" size="...">
类型包裹复选框,并使用你喜欢的文本大小。
¥[Upgrade guide] Make sure that your layouts with checkboxes look as expected. If not, wrap your checkboxes in <Text as="label" size="...">
, using your preferred text size.
[Breaking] 重新设计尺寸 - 添加更小的 size="1"
,将默认尺寸更改为 size="2"
,添加更精细的 size="3"
¥[Breaking] Rework sizes – add a smaller size="1"
, change the default size to size="2"
, add a more refined size="3"
[升级指南] 如果你通过显式 size
属性使用 size="1"
或 size="2"
复选框,请分别将它们重命名为 size="2"
和 size="3"
。
¥[Upgrade guide] If you were using size="1"
or size="2"
checkboxes via an explicit size
prop, rename them to size="2"
and size="3"
respectively.
优化 variant="classic"
的外观。
¥Refine the look and feel of variant="classic"
.
优化并规范化禁用状态的外观。
¥Refine and normalise the look and feel of the disabled states.
Card
更新 variant="classic"
阴影,使其不会超出元素范围。
¥Update the variant="classic"
shadow so that it doesn’t extend outside of the element.
优化 variant="classic"
的悬停和按下样式。
¥Refine hover and pressed styles for variant="classic"
.
添加缺失的按下样式。
¥Add missing pressed styles.
优化内部阴影的应用方式,使其与组件外部的背景融合。
¥Refine how the inner shadows are applied so that they blend with the background outside of the component.
Code
当 Code
在 Link
内时添加交互样式。
¥Add interactive styles when Code
is within Link
.
修复 variant="ghost"
字体大小不一致的问题,具体取决于其大小是基于父级 Text
元素还是来自代码自身的 size
属性。
¥Fix an issue when variant="ghost"
font size would be inconsistent depending on whether the size was based on a parent Text
element or came from the code’s own size
prop.
根据 variant="outline"
和 variant="surface"
的字体大小缩放轮廓粗细。
¥Scale the outline thickness relative to the font size for variant="outline"
and variant="surface"
.
改进 ::selection
的背景颜色以适应 variant="solid"
。
¥Improve ::selection
background color for variant="solid"
.
向 .radix-themes
添加 CSS 变量,用于自定义 Code
变体的填充,以防默认值与自定义代码字体的垂直度量不兼容。
¥Add CSS variables to .radix-themes
for customising the padding of Code
variants in case the default values don’t work well with the vertical metrics of custom code font.
--code-padding-top
--code-padding-bottom
DropdownMenu
, ContextMenu
当主题设置为 radius="full"
时,请减小边框圆角。
¥Reduce border radius when theme setting is radius="full"
.
优化水平内边距。
¥Refine horizontal paddings.
优化标签的外观。
¥Refine label look and feel.
Grid
修复嵌套 Grid
组件时可能导致后代 Grid
意外继承某些父组件样式的错误。
¥Fix a bug when nesting Grid
components could cause the descendant Grid
’s to inherit some parent styles unintentionally.
Inset
添加 clip
属性,以控制内容是否被剪切到父元素的 padding 或 border 上。
¥Add clip
prop to control whether content is clipped to the padding or to the border of the parent element.
当 Table
位于 Inset
内部时,自动调整表格单元格内边距
¥Automatically adjust table cell padding for when Table
is inside Inset
Kbd
调整垂直对齐方式。
¥Tweak vertical alignment.
Link
降低下划线颜色饱和度。
¥Desaturate the underline color.
使链接在彩色 Heading
元素内自动保持高对比度(类似于 Text
中的自动高对比度)。
¥Make links automatically high-contrast within colored Heading
elements (similarly to the automatic high-contrast within Text
).
根据 variant="outline"
和 variant="surface"
的字体大小缩放下划线粗细。
¥Scale the underline thickness relative to the font size for variant="outline"
and variant="surface"
.
RadioGroup
[Breaking] 改进布局,使 Text
组件中单选按钮的包裹会自动使其与文本首行对齐。
¥[Breaking] Improve layout so that wrapping a radiobutton in Text
component automatically aligns the radiobutton with the first line of the text.
[升级指南] 确保带有单选按钮的布局外观符合预期。如果没有,请使用 <Text as="label" size="...">
类型包裹单选按钮,并使用你喜欢的文本大小。
¥[Upgrade guide] Make sure that your layouts with radio buttons look as expected. If not, wrap your radio buttons in <Text as="label" size="...">
, using your preferred text size.
[Breaking] 重新设计尺寸 - 添加更小的 size="1"
,将默认尺寸更改为 size="2"
,添加更精细的 size="3"
。
¥[Breaking] Rework sizes – add a smaller size="1"
, change the default size to size="2"
, add a more refined size="3"
.
[升级指南] 如果你通过显式 size
属性使用 size="1"
或 size="2"
单选按钮,请分别将它们重命名为 size="2"
和 size="3"
。
¥[Upgrade guide] If you were using size="1"
or size="2"
radio buttons via an explicit size
prop, rename them to size="2"
and size="3"
respectively.
优化 variant="classic"
的外观。
¥Refine the look and feel of variant="classic"
.
优化并规范化禁用状态的外观。
¥Refine and normalise the look and feel of the disabled states.
Select
修复长项目列表中滚动条不可见的问题。
¥Fix invisible scrollbar in long item lists.
改进 variant="classic"
在明夜间模式下的外观和感觉。
¥Improve variant="classic"
look and feel across light and dark mode.
使用 position="popper"
时,将 SelectContent
对齐到触发器的左侧。
¥Align SelectContent
to the left of the trigger when using position="popper"
.
优化水平内边距。
¥Refine horizontal paddings.
优化标签的外观。
¥Refine label look and feel.
重做 size="3"
。
¥Rework size="3"
.
ScrollArea
升级原始版本,修复上游类型问题。
¥Upgrade the primitive version, fixing an upstream type issue.
重命名滚动条边距变量,使其包含滚动条方向,并在 .radix-themes
上声明它们,以便更轻松地调整滚动条位置。
¥Rename scrollbar margin variables to include the scrollbar orientation and declare them on .radix-themes
to facilitate easier scrollbar position adjustments.
[升级指南] 如果你之前使用变量 --scrollarea-scrollbar-margin-top
、--scrollarea-scrollbar-margin-left
等,请确保它们遵循新名称并设置在适当的级别。不再需要针对 .rt-ScrollAreaScrollbar
元素设置变量,因为它们只需在需要覆盖的组件上设置即可。新的变量:
¥[Upgrade guide] If you were using the variables --scrollarea-scrollbar-margin-top
, --scrollarea-scrollbar-margin-left
, etc. make sure that they follow the new names and are set at the appropriate level. There's no need to target .rt-ScrollAreaScrollbar
element to set the variables anymore, as they can be set just on the component that needs the override. New variables:
--scrollarea-scrollbar-horizontal-margin-top
--scrollarea-scrollbar-horizontal-margin-bottom
--scrollarea-scrollbar-horizontal-margin-left
--scrollarea-scrollbar-horizontal-margin-right
--scrollarea-scrollbar-vertical-margin-top
--scrollarea-scrollbar-vertical-margin-bottom
--scrollarea-scrollbar-vertical-margin-left
--scrollarea-scrollbar-vertical-margin-right
Slider
优化组件中使用的阴影和颜色。
¥Refine the shadows and colors used in the components.
优化并规范化禁用状态的外观。
¥Refine and normalise the look and feel of the disabled states.
修复高对比度滑块禁用样式不正确的问题。
¥Fix an issue where high contrast sliders would have an incorrect disabled style.
Switch
[Breaking] 改进布局,使 Switch
组件中开关的包裹会自动使其与文本首行对齐。
¥[Breaking] Improve layout so that wrapping a switch in Switch
component automatically aligns the switch with the first line of the text.
[升级指南] 确保带有开关的布局外观符合预期。如果没有,请使用 <Text as="label" size="...">
类型包裹开关,并使用你喜欢的文本大小。
¥[Upgrade guide] Make sure that your layouts with switches look as expected. If not, wrap your switches in <Text as="label" size="...">
, using your preferred text size.
[Breaking] 重新设计尺寸,使 size="2"
和 size="3"
更小。
¥[Breaking] Rework sizes, making size="2"
and size="3"
smaller.
[升级指南] 使用 size="3"
替代 size="2"
以匹配之前的外观。
¥[Upgrade guide] Use size="3"
instead of size="2"
to match the previous look.
优化组件中使用的阴影和颜色。
¥Refine the shadows and colors used in the components.
优化并规范化禁用状态的外观。
¥Refine and normalise the look and feel of the disabled states.
Table
优化外边框的应用方式,使其与组件外部的背景融合。
¥Refine how the outer border is applied so that it blends with the background outside of the component.
Tabs
向 .radix-themes
添加 CSS 变量,用于自定义活动和非活动标签的字母间距和单词间距,以便在默认值不适用于你的自定义字体时,最大限度地减少明显的字重变化。
¥Add CSS variables to .radix-themes
for customising the letter spacing and word spacing of active and inactive tabs so that you can minimise the apparent shift in weight in case the default values don’t work for your custom font.
--tabs-trigger-active-letter-spacing
--tabs-trigger-active-word-spacing
--tabs-trigger-inactive-letter-spacing
--tabs-trigger-inactive-word-spacing
Text
将 as="label"
选项添加到 as
属性。
¥Add as="label"
option to the as
prop.
改进未指定 as
属性时属性类型的解析方式。
¥Improve how prop types are resolved when as
prop isn’t specified.
TextArea
重新设计内部实现,现在使用多个 HTML 节点进行样式设置。
¥Rework the internal implementation, now using multiple HTML nodes for styling purposes.
调整布局样式,使 TextArea
的行为像真正的 display: block
元素一样,水平填充可用空间。
¥Adjust the layout styles so that TextArea
behaves like a true display: block
element, filling the available space horizontally.
style
和 className
现在已转发到封装元素 div
。ref
和其他属性仍然转发到 textarea
本身。
¥The style
and className
are now forwarded to the wrapping div
element. The ref
and other props are still forwarded to the textarea
itself.
[升级指南] 如果你通过 style
、className
或针对相关 HTML 节点的自定义 CSS 覆盖了 TextArea
样式,请确保你的自定义样式能够正常工作。
¥[Upgrade guide] If you were overriding TextArea
styles via style
, className
, or custom CSS that targets the related HTML nodes, make sure that your custom styles work as expected.
[升级指南] 如果你依赖于浏览器设置的 TextArea
固有宽度,请确保你的布局符合预期。
¥[Upgrade guide] If you were relying on the intrinsic width of TextArea
set by the browser, make sure that your layout looks as expected.
优化内边距值,使其外观更均衡。
¥Refine padding values for a more balanced look.
当 TextArea
溢出时,使用匹配的滚动边距以获得更舒适的输入体验。
¥Use matching scroll margins for a nicer typing experience when the TextArea
overflows.
优化内部阴影的应用方式,使其与组件外部的背景融合。
¥Refine how the inner shadows are applied so that they blend with the background outside of the component.
优化并规范化禁用和只读状态的外观。
¥Refine and normalise the look and feel of disabled and read-only states.
修复 Safari 中文本值在禁用输入框中显示为带颜色的问题。
¥Fix a Safari bug when the text value would appear tinted in the disabled input.
改进自动填充样式。
¥Improve autofill styles.
TextField
重置容器的 z-index
以避免潜在的堆叠问题。
¥Reset z-index
of the container to avoid potential stacking issues.
优化内边距值,使其外观更均衡。
¥Refine padding values for a more balanced look.
使用 text-indent
代替 padding-left
,这样当光标位于输入框末尾时,长值不会被从左侧截断。
¥Use text-indent
instead of padding-left
so that long values aren't truncated on the left when the cursor is at the end of the input.
优化内部阴影的应用方式,使其与组件外部的背景融合。
¥Refine how the inner shadows are applied so that they blend with the background outside of the component.
优化并规范化禁用和只读状态的外观。
¥Refine and normalise the look and feel of disabled and read-only states.
修复 Safari 中文本值在禁用输入框中显示为带颜色的问题。
¥Fix a Safari bug when the text value would appear tinted in the disabled input.
移除省略号截断,因为这会阻止在 Chrome 中水平滚动输入时显示长值。
¥Remove ellipsis truncation, as this prevented long values from being shown when scrolling on the input horizontally in Chrome.
改进自动填充样式。
¥Improve autofill styles.
ThemePanel
更改外观时禁用过渡效果。
¥Disable transitions when changing the appearance.
提升边框圆角预览的对比度。
¥Improve contrast in the border radius preview.
Tooltip
当主题设置为 radius="full"
时,请减小边框圆角。
¥Reduce border radius when theme setting is radius="full"
.
[Breaking] 移除 multiline
属性。
¥[Breaking] Remove multiline
prop.
[升级指南] 如果你使用 multiline
属性,请将 style={{ maxWidth: 250 }}
传递给相关的 Tooltip 元素。
¥[Upgrade guide] If you were using multiline
prop, pass style={{ maxWidth: 250 }}
to the relevant Tooltip elements.
导出 ThemeProps
和 ThemePanelProps
¥Export ThemeProps
and ThemePanelProps
导出所有组件的 prop 类型,解决特定设置下的类型错误。
¥Export prop types for all components, resolving type errors with certain setups.
三种新的颜色等级:ruby
、iris
和 jade
¥Three new color scales: ruby
, iris
, and jade
设置 Radix Primitives 依赖的显式版本,以允许稳定的构建。
¥Set explicit versions of the Radix Primitives dependencies to allow stable builds.
为 ContextMenuSub
、DialogRoot
、HoverCardRoot
和 PopoverRoot
使用显式 React.FC
类型,以解决某些设置中的类型错误。
¥Use an explicit React.FC
type for ContextMenuSub
, DialogRoot
, HoverCardRoot
, and PopoverRoot
, resolving a type error with certain setups.
首次发布!🎉
¥Initial release! 🎉