I found that using the Tab key can focus on the Separator component and adjust the size with the directional keys, but there is no corresponding way to control the style, the 'data-separator' property remains 'inactive' data-separator="inactive"
Although it can be implemented using pseudo classes, it is not very elegant.
&[data-separator='hover'],
&:focus-visible {
background-color: red;
}The official document describes it as follows:
When styling a Separator, use the data-separator attribute rather than :hover or :active pseudo-classes. This attribute is updated when the pointer is near enough to a separator element to be interactive, even if it is not directly on top of the element.
<div data-separator="disabled" />
<div data-separator="inactive" />
<div data-separator="hover" />
<div data-separator="active" />
I found that using the Tab key can focus on the Separator component and adjust the size with the directional keys, but there is no corresponding way to control the style, the 'data-separator' property remains 'inactive'
data-separator="inactive"Although it can be implemented using pseudo classes, it is not very elegant.
The official document describes it as follows: