ScrollArea
组合可滚动视口,以及可由调用方设置样式的滚动条、滑块和角落。
正在加载交互演示…
<ScrollArea.Root
viewportSize={{ width: 320, height: 240 }}
contentSize={{ width: 320, height: 1200 }}
onScrollStateChange={setScrollState}
>
<ScrollArea.Viewport><ScrollArea.Content><LongList /></ScrollArea.Content></ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical"><ScrollArea.Thumb /></ScrollArea.Scrollbar>
</ScrollArea.Root>#导入
从 @quickgui/solid 导入 ScrollArea。
import { ScrollArea } from "@quickgui/solid";#用法
<ScrollArea.Root
viewportSize={{ width: 320, height: 240 }}
contentSize={{ width: 320, height: 1200 }}
onScrollStateChange={setScrollState}
>
<ScrollArea.Viewport><ScrollArea.Content><LongList /></ScrollArea.Content></ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical"><ScrollArea.Thumb /></ScrollArea.Scrollbar>
</ScrollArea.Root>#结构
ScrollArea.RootScrollArea.ViewportScrollArea.ContentScrollArea.ScrollbarScrollArea.ThumbScrollArea.Corner
<ScrollArea.Root>
<ScrollArea.Viewport />
<ScrollArea.Content />
<ScrollArea.Scrollbar />
<ScrollArea.Thumb />
<ScrollArea.Corner />
</ScrollArea.Root>#API 参考
展开条目查看说明和完整签名。短横线表示声明中未记录默认值。
ScrollArea
查看源码ScrollArea(props: JSX.ScrollAreaRootProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码viewportSize{ width: number; height: number }—
The viewport extent the application laid out. QuickGUI has no layout observer at the hosted boundary, so the extents the core's arithmetic needs are declared ahead of its decision like every other bounded property.
{ width: number; height: number }查看源码contentSize{ width: number; height: number }—
overflowEdgeThresholdnumber—
onScrollStateChange(state: ScrollAreaState, event: QuickGuiEvent) => void—
Everything the core decided: the clamped offset and every derived overflow flag.
(state: ScrollAreaState, event: QuickGuiEvent) => void查看源码ScrollArea.Root
查看源码ScrollArea.Root(props: JSX.ScrollAreaRootProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码viewportSize{ width: number; height: number }—
The viewport extent the application laid out. QuickGUI has no layout observer at the hosted boundary, so the extents the core's arithmetic needs are declared ahead of its decision like every other bounded property.
{ width: number; height: number }查看源码contentSize{ width: number; height: number }—
overflowEdgeThresholdnumber—
onScrollStateChange(state: ScrollAreaState, event: QuickGuiEvent) => void—
Everything the core decided: the clamped offset and every derived overflow flag.
(state: ScrollAreaState, event: QuickGuiEvent) => void查看源码ScrollArea.Viewport
查看源码ScrollArea.Viewport(props: JSX.NativeProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码ScrollArea.Content
查看源码ScrollArea.Content(props: JSX.NativeProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码ScrollArea.Scrollbar
查看源码ScrollArea.Scrollbar(props: JSX.ScrollAreaScrollbarProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码orientation"horizontal" | "vertical"—
Declares orientation (optional). Reactive JSX expressions update this property in place.
"horizontal" | "vertical"查看源码keepMountedboolean—
Keep the scrollbar mounted while its axis cannot scroll. The core keeps this per scroll area, so one kept scrollbar keeps the whole area's scrollbars and corner mounted. A mounted-but-useless scrollbar is hidden from assistive technology, so it is never announced.
boolean查看源码ScrollArea.Thumb
查看源码ScrollArea.Thumb(props: JSX.ScrollAreaThumbProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码orientation"horizontal" | "vertical"—
ScrollArea.Corner
查看源码ScrollArea.Corner(props: JSX.NativeProps): NativeNodeaccessibilityLabelstring—
Declares accessibilityLabel (optional). Reactive JSX expressions update this property in place.
string查看源码childrenunknown—
styleStyleProp—
disabledboolean—
invalidboolean—
selectedboolean—
groupboolean | string—
Makes this element the group its descendants' `groupHover` and `groupActive` styles follow, like Tailwind's `group`: `true` opens an unnamed group, and a string names it so a descendant can follow it past a nearer group with `groupHover: { group: "name" }`.
boolean | string查看源码rolestring—
tabIndexnumber—
focusOnPointerboolean—
overlayboolean—
focusTrapboolean—
restorePreviousFocusboolean—
autoFocusboolean—
aria-modalboolean—
ariaModalboolean—
dismissOnEscapeboolean—
Declares dismissOnEscape (optional). Reactive JSX expressions update this property in place.
boolean查看源码dismissOnPointerOutsideboolean—
Declares dismissOnPointerOutside (optional). Reactive JSX expressions update this property in place.
boolean查看源码tooltipstring—
tooltipPlacementPopoverPlacement—
Declares tooltipPlacement (optional). Reactive JSX expressions update this property in place.
PopoverPlacement查看源码tooltipDelaynumber—
tooltipGapnumber—
tooltipViewportMarginnumber—
Declares tooltipViewportMargin (optional). Reactive JSX expressions update this property in place.
number查看源码hitSlopnumber | string—
Declares hitSlop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopTopnumber | string—
Declares hitSlopTop (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopRightnumber | string—
Declares hitSlopRight (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopBottomnumber | string—
Declares hitSlopBottom (optional). Reactive JSX expressions update this property in place.
number | string查看源码hitSlopLeftnumber | string—
Declares hitSlopLeft (optional). Reactive JSX expressions update this property in place.
number | string查看源码aria-labelstring—
ariaLabelstring—
ref((node: NativeNode) => void) | NativeNode—
Declares ref (optional). Reactive JSX expressions update this property in place.
((node: NativeNode) => void) | NativeNode查看源码onClickEventHandler—
Declares onClick (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseEnterEventHandler—
Declares onMouseEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseLeaveEventHandler—
Declares onMouseLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEnterEventHandler—
Declares onPointerEnter (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerLeaveEventHandler—
Declares onPointerLeave (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPointerEventHandler—
Captured pointer stream from press through release/cancel, including outside the element.
EventHandler查看源码onInputEventHandler—
Declares onInput (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onChangeEventHandler—
Declares onChange (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSubmitEventHandler—
Declares onSubmit (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDismissEventHandler—
Declares onDismiss (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onKeyDownEventHandler—
onKeyUpEventHandler—
Declares onKeyUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseDownEventHandler—
Declares onMouseDown (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseUpEventHandler—
Declares onMouseUp (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onMouseMoveEventHandler—
Declares onMouseMove (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDoubleClickEventHandler—
onWheelEventHandler—
Declares onWheel (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onContextMenuEventHandler—
onPinchEventHandler—
Declares onPinch (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onRotateEventHandler—
Declares onRotate (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onSmartMagnifyEventHandler—
Declares onSmartMagnify (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onPressureEventHandler—
Declares onPressure (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onFocusEventHandler—
Declares onFocus (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onBlurEventHandler—
keymapKeymap—
onActionEventHandler—
draggableboolean | DragSource—
onDragStartEventHandler—
Declares onDragStart (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码onDragEndEventHandler—
Declares onDragEnd (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码dropKindsDropKind | readonly DropKind[]—
Payload kinds this element accepts, declared ahead of the native drag.
DropKind | readonly DropKind[]查看源码onDropEventHandler—
onFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandler查看源码