Radix Primitives 发布及其变更日志。
本次发布介绍了一种全新的预览原语:PasswordToggleField
。
该新原语提供了一个用于渲染密码输入框及其可见性切换按钮的组件。除了主要功能外,它还包括:
此 API 目前不稳定,我们希望您能帮助我们进行测试!使用 unstable_
前缀导入该原语。
use-sync-external-store
的依赖以确保入口点有效 – #3491本次发布引入了一种全新的预览原语:OneTimePasswordField
。
这一组新组件旨在实现一次性密码字段的常见设计模式,显示为每个字符的独立输入框。这种用户界面的实现看似复杂,但确保交互顺应用户期望。新原语为您处理所有这些复杂性,包括:
由于这是一个预览版本,API当前不稳定。我们希望您能帮助我们进行测试并告诉我们结果。
使用 unstable_
前缀导入该原语。
Primitive
组件。这将允许我们在未来的版本中公开这些组件,以便用户能够更好地控制此行为。useControllableState
进行小幅改进,以增强性能,减少错误的发生,并在误用时记录警告pointerdown
时关闭工具提示 – #3380crossOrigin
的支持 – #3261displayName
以便更好调试可插槽组件 – #3441radix-ui
包,该包从单一位置公开所有 Radix Primitives 的最新版本。这个可树摇的入口点使得导入所需组件并保持最新变得更为简便,无需担心依赖冲突或重复。aria-hidden
和 react-remove-scroll
依赖:
allowPinchZoom
故障 – #3127referrerPolicy
– #2772allowPinchZoom
故障 – #3127form
属性转发到气泡输入元素,以修复非父表单提交 – #3161form
属性转发到气泡输入元素,以修复非父表单提交 – #3161form
属性转发到每个拇指的气泡输入元素,以修复非父表单提交 – #3161form
属性转发到气泡输入元素,以修复非父表单提交 – #3161hotkey
为空数组时的不正确焦点 – #2491CheckedState
类型TooltipProviderProps
类型package.json
添加一个缺失的内部实用程序。提供 Portal 部件的相应包也进行了补丁更新。 – #2966发布了所有原语的小版本,包含以下更改:
react-remove-scroll
依赖版本以避免在边缘情况下出现双滚动条bug – #2776stopPropagation
。hideWhenDetached
属性的组件不允许与隐藏内容进行交互 – #2743 – #2745disableOutsidePointerEvents
属性value={undefined}
以表示不确定状态,匹配当前的实际行为 – #2947nonce
属性添加以能够将CSP nonce传递给内联样式 – #2728nonce
属性添加以能够将CSP nonce传递给内联样式 – #2728scroll-behavior: smooth
的兼容性 – #2175""
值重置为占位符的能力。请注意,只有当您使用值为 ""
的选项时这才是一个破坏性更改。 – #2174Portal
部件类型与接受DOM属性的谎言 – #2178Portal
部件类型与接受DOM属性的谎言 – #2178Content
– #2092本次发布确保我们所有的原语都与ESM兼容。我们还为所有弹出位置的原语更新到了最新版本的Floating UI。
collisionBoundary
时正确计算 --radix-popper-available-width
– #2032Slot
可用于 React 服务器组件 – #2116本次发布引入了一种全新的预览原语:Form
。
onCheckedChange
在 ContextMenu.CheckboxItem
上的类型 – #1778onCheckedChange
在 DropdownMenu.CheckboxItem
上的类型 – #1778onCheckedChange
在 Menubar.CheckboxItem
上的类型 – #1778本次发布引入了一种全新的原语:Menubar
。同时为 Select
添加了一个备受欢迎的功能支持:以类似于 Popover
或 DropdownMenu
的方式定位内容的能力。
orientation
属性,以及使用 dir
的RTL支持 – #1850position
属性到 Select.Content
以启用弹出定位 – #1853ContextMenu.Trigger
添加 disabled
属性 – #1746pointerId
– #1753ContextMenu.CheckboxItem
中不确定状态的支持。请注意,只有当您当前正在使用 CheckboxItem
部件并且您的代码基于TypeScript时这才是一个破坏性更改。 – #1624DropdownMenu.CheckboxItem
中不确定状态的支持。请注意,只有当您当前正在使用 CheckboxItem
部件并且您的代码基于TypeScript时这才是一个破坏性更改。 – #1624DropdownMenu.Trigger
的打开状态与 aria-expanded
– #1644asChild
时快速选择项目的问题 – #1647useLabelContext
和对完全自定义控件的支持。要确保本地标签正常工作,请确保您的自定义控件基于本地元素,例如 button
或 input
。 – #1686label
元素改善本地行为 – #1686NavigationMenu.Root
添加 delayDuration
和 skipDelayDuration
属性。注意,默认情况下,触发器打开前都有短暂延迟,以便改善用户体验,这可以通过提供的属性进行修改。 – #1716Slider.Root
上使用新 inverted
属性视觉上反转滑块的能力 – #1695Slider.Root
添加 onValueCommit
属性以更好地处理离散值更改 – #1696ref
分配返回 null
的回归 – #1668Toast.Root
添加 onPause
和 onResume
属性 – #1669Toolbar.Item
的点击处理程序触发两次 – #1526通过此发布,我们开始严格遵循语义版本控制。所有原语现在都已版本化 1.0.0。
我们还将 Select
、Toast
和 NavigationMenu
从预览转为稳定。
dir
属性继承,则需要使用 DirectionProvider
。 – #1119allowPinchZoom
属性,默认为 true
– #1514AlertDialog.Portal
上使用 forceMount
改善与 JS 动画库的兼容性 – #1075allowPinchZoom
属性,默认为 true
– #1514Portal
部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index
,因此您可以完全控制分层。 – #1429Arrow
部件上的 offset
– #1531collisionTolerance
重命名为 collisionPadding
,并在 Content
部件上接受数字或填充对象 – #1531data-highlighted
属性以支持样式 – #1388data-state
属性到 Trigger
部件 – #1455Content
部件上添加 collisionBoundary
、arrowPadding
、sticky
、hideWhenDetached
属性 – #1531allowPinchZoom
属性,默认为 true
– #1514Dialog.Portal
上使用 forceMount
改善与 JS 动画库的兼容性 – #1075allowPinchZoom
属性,默认为 true
– #1514Portal
部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index
,因此您可以完全控制分层。 – #1429Arrow
部件上的 offset
– #1531collisionTolerance
重命名为 collisionPadding
,并在 Content
部件上接受数字或填充对象 – #1531data-highlighted
属性以支持样式 – #1388Content
部件上添加 collisionBoundary
、arrowPadding
、sticky
、hideWhenDetached
属性 – #1531Portal
部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index
,因此您可以完全控制分层。 – #1426Arrow
部件上的 offset
– #1531collisionTolerance
重命名为 collisionPadding
,并在 Content
部件上接受数字或填充对象 – #1531Content
部件上添加 collisionBoundary
、arrowPadding
、sticky
、hideWhenDetached
属性 – #1531allowPinchZoom
属性,默认为 true
– #1514Portal
部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index
,因此您可以完全控制分层。 – #1425Arrow
部件上的 offset
– #1531collisionTolerance
重命名为 collisionPadding
,并在 Content
部件上接受数字或填充对象 – #1531Content
部件上添加 collisionBoundary
、arrowPadding
、sticky
、hideWhenDetached
属性 – #1531z-index
,因此您可以完全控制分层。为提供自定义容器,prop 导向客制化的 containerRef(ref)演变为 container(element)。 data-radix-portal
被移除,因为您可以使用 asChild
控制元素。 – #1463aria-required
– #1422ScrollArea.Thumb
现在可以动画化 – #1392data-state
的值从 active|inactive
重命名为 checked|unchecked
– #1388Portal
部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index
,因此您可以完全控制分层。 – #1459asChild
时定位破坏的问题 – #1245Select.Content
具有填充时的触发器/内容对齐 – #1312data-highlighted
属性以支持样式 – #1388Select.Value
上使用 placeholder
属性支持占位符 – #1384Slottable
时的子项排序问题 – #1376Tabs.Content
添加支持生命周期动画 – #1346asChild
时的TypeScript类型 – #1300key
属性时吐司重排序的问题 – #1283Portal
部件。为避免回归,使用该部件可以实现端口行为。请注意,不再管理 z-index
,因此您可以完全控制分层。 – #1427Tooltip.Content
将在悬停时保持打开(符合WCAG 2.1悬停内容要求)。可以提供 disableHoverableContent
到 Tooltip.Provider
以恢复之前的行为 – #1490Tooltip.Content
的 side
现在默认为 top
– #1490Tooltip.Provider
现在是必需的,您必须包装您的应用以避免回归。 – #1490Arrow
部件上的 offset
– #1531collisionTolerance
重命名为 collisionPadding
,并在 Content
部件上接受数字或填充对象 – #1531本次发布引入了3种全新的原语预览:Select
、Toast
和 NavigationMenu
,同时还提交了大量修复和改进。
Dialog.Title
现在是必需部件,因此如果未使用,将会抛出错误。如果不需要描述,必须将 aria-describedby={undefined}
传递给 Dialog.Content
。 – #1098Dialog
/AlertDialog
的组合 – #1097DropdownMenu.TriggerItem
单击触发两次 – #1057Home
和 End
键时防止页面滚动 – #1076本次发布侧重于对 React 18 的支持,并引入了一些包的重大破坏性更改,主要与对话框的端口化有关。
IdProvider
。提高对 React 18 的支持,并不再需要使用旧版本。请从您的应用中移除,以避免过时的警告。 – #1006type
和 value
属性 – #979Accordion.Content
高度动画在初始页面加载时 – #977Portal
部件。为避免回归,使用该部件可以实现端口行为。 – #936AlertDialog.Overlay
中滚动。将 allowPinchZoom
移动到根元素。 – #963asChild
的TypeScript错误 – #924Collapsible.Content
高度动画在初始页面加载时 – #977Portal
部件。为避免回归,使用该部件可以实现端口行为。 – #936Dialog.Overlay
中滚动。将 allowPinchZoom
移动到根元素。 – #963HoverCard
的能力 – #920Tabs.Content
中卸载内容,当标签不活跃时 – #859aria-orientation
attribute on role=group
element – #965TooltipProvider
part. You must wrap your app to avoid regressions. – #1007type=button
attribute from Tooltip.Trigger
– #1011key
warnings – #1015Accordion.Content
添加新的 CSS 变量,以帮助宽度动画 – #879Collapsible.Content
添加新的 CSS 变量,以帮助宽度动画 – #879allowPinchZoom
属性向 Popover.Content
添加支持 – #8840
时的计算 – #866Tabs.Content
中卸载内容,当选项卡不活跃时 – #859asChild
布尔属性替换多态的 as
属性。了解如何通过 在这里更改渲染的元素。 – #835DropdownMenu
的组合 – #818Dialog
的组合 – #818pointer-events
– #819extendPrimitive
实用程序 – #840modal
属性添加模式支持 – #700ContextMenu.Content
的 disableOutsidePointerEvents
属性 – #700modal
属性添加模式支持 – #700autofocus
属性时 – #739modal
属性添加模式支持 – #700DropdownMenu.Content
的 disableOutsideScroll
属性 – #700DropdownMenu.Content
的 disableOutsidePointerEvents
属性 – #700modal
属性添加模式支持 – #700Popover.Content
的 disableOutsideScroll
属性 – #700Popover.Content
的 disableOutsidePointerEvents
属性 – #700Popover.Content
的 trapFocus
属性 – #700autofocus
属性时 – #739Scrollbar
部件添加 data-state
属性 – #801Title
和 Description
部件以便简单标记 – #741Accordion.Button
重命名为 Accordion.Trigger
– #651Accordion.Panel
重命名为 Accordion.Content
– #651--radix-accordion-content-height
) – #651type=“single”
的 Accordion
现在具有新的 collapsible
属性,默认为 false
。这意味着默认行为现在已改变,默认情况下用户无法关闭所有项。 – #651onPointerDownOutside
中防止默认行为,而不会意外地防止聚焦 – #654onCheckedChange(event)
现在是 onCheckedChange(checked: CheckedState)
– #672Checkbox
的 onClick
中停止传播 – #672label
的兼容性 – #672label
中改善无障碍性 – #672Collapsible.Button
重命名为 Collapsible.Trigger
– #651ContextMenu.TriggerItem
– #682ContextMenu.Arrow
– #682dir
属性以支持RTL – #682onPointerDownOutside
中防止默认行为,而不会意外地防止聚焦 – #654ContextMenu.Content
的 side
属性 – #658ContextMenu.Content
的 align
属性 – #658ContextMenu.Content
上具有 sideOffset
,则应该使用 alignOffset
。这是为了标准化根菜单和子菜单的垂直对齐。 – #712onFocusOutside
现在是一个自定义事件 – #671onPointerDownOutside
中防止默认行为,而不会意外地防止聚焦 – #654DropdownMenu.TriggerItem
– #682dir
属性以支持RTL – #682onPointerDownOutside
中防止默认行为,而不会意外地防止聚焦 – #654onFocusOutside
现在是一个自定义事件 – #671onValueChange(event)
现在是 onValueChange(value: string)
– #685RadioGroup.Item
的 onCheckedChange
属性 – #685Scrollbar
的挂载/卸载现在可以动画化 – #624overflowX
和 overflowY
属性 – #624ScrollAreaButtonStart
、ScrollAreaButtonEnd
和 ScrollAreaTrack
– #624scrollbarVisibility
属性重命名为 type
。值为 auto
、always
、scroll
或 hover
– #624scrollbarVisibilityRestTimeout
属性重命名为 scrollHideDelay
– #624trackClickBehavior
属性,因为我们删除了内置动画。单击轨道始终会快速返回到指针位置 – #624ScrollAreaScrollbarX
和 ScrollAreaScrollbarY
现在是 <ScrollAreaScrollbar orientation="horizontal" />
和 <ScrollAreaScrollbar orientation="vertical" />
– #624onCheckedChange(event)
现在是 onCheckedChange(checked: boolean)
– #679label
中的无障碍性 – #679readOnly
属性 – #600onOpenChange
属性 – #604anchorRef
属性,并替换为可选的 Anchor
部件 – #580readOnly
属性 – #600orientation
、dir
、loop
属性 – #618anchorRef
属性 – #580Content
– #571ToggleButton
原语重命名为 Toggle
– #546toggled
属性重命名为 pressed
– #546defaultToggled
属性重命名为 defaultPressed
– #546onToggledChange
属性重命名为 onPressedChange
– #546selector
属性和 data-radix-*
属性 – #517type
属性是必需的 – #527step
被正确四舍五入 – #463dir
属性) – #497<Trigger as={Slot}>
时组合事件 – #461onCloseAutoFocus
属性 – #456onCloseAutoFocus
属性 – #456as
属性时的类型自动补全 – #421name
属性从 Item
移动到 Root
– #424children
– #414children
– #414selector
属性 – #347Root
上设置 disabled={false}
但不启用禁用项 – #400