Tree
展開、選択、キーボードナビゲーションに対応した仮想化階層コレクションです。
デモを読み込み中…
<Tree.Root
nodes={nodes}
expanded={expanded()}
value={selected()}
onExpandedChange={setExpanded}
onValueChange={setSelected}
>
<For each={visibleNodes()}>{(node) =>
<Tree.Row nodeId={node.id}><Text>{node.label}</Text></Tree.Row>
}</For>
</Tree.Root>#インポート
@quickgui/solid から Tree をインポートします。
import { Tree } from "@quickgui/solid";#使い方
<Tree.Root
nodes={nodes}
expanded={expanded()}
value={selected()}
onExpandedChange={setExpanded}
onValueChange={setSelected}
>
<For each={visibleNodes()}>{(node) =>
<Tree.Row nodeId={node.id}><Text>{node.label}</Text></Tree.Row>
}</For>
</Tree.Root>#構成
Tree.RootTree.Row
<Tree.Root>
<Tree.Row />
</Tree.Root>#API リファレンス
項目を展開すると説明と完全なシグネチャが表示されます。ダッシュは宣言に既定値が記載されていないことを示します。
Tree
ソースを見るTree(props: JSX.TreeProps): 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—
Declares onBlur (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見る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—
Declares onDrop (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見るonFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見るscopestring—
nodesreadonly TreeNodeDeclaration[]—
Declares nodes (optional). Reactive JSX expressions update this property in place.
readonly TreeNodeDeclaration[]ソースを見るexpandedreadonly string[]—
defaultExpandedreadonly string[]—
Declares defaultExpanded (optional). Reactive JSX expressions update this property in place.
readonly string[]ソースを見るvaluestring—
rowHeightnumber—
loadingLabelstring—
disclosure"leading" | "trailing" | "none"—
Where the core's behavior-only disclosure control is mounted inside a declared row.
"leading" | "trailing" | "none"ソースを見るsetChildren{ id: string; children: readonly TreeNodeDeclaration[] }—
One bounded, atomically validated lazy-children splice.
{ id: string; children: readonly TreeNodeDeclaration[] }ソースを見るonExpandedChange(expanded: readonly string[], event: QuickGuiEvent) => void—
Declares onExpandedChange (optional). Reactive JSX expressions update this property in place.
(expanded: readonly string[], event: QuickGuiEvent) => voidソースを見るonValueChange(value: string | undefined, event: QuickGuiEvent) => void—
Declares onValueChange (optional). Reactive JSX expressions update this property in place.
(value: string | undefined, event: QuickGuiEvent) => voidソースを見るonLoadChildren(id: string, event: QuickGuiEvent) => void—
A pending branch asks for its children exactly once, when it is first expanded.
(id: string, event: QuickGuiEvent) => voidソースを見るonVisibleRangeChange(range: VisibleRange, event: QuickGuiEvent) => void—
Declares onVisibleRangeChange (optional). Reactive JSX expressions update this property in place.
(range: VisibleRange, event: QuickGuiEvent) => voidソースを見るonActivate(id: string, event: QuickGuiEvent) => void—
Declares onActivate (optional). Reactive JSX expressions update this property in place.
(id: string, event: QuickGuiEvent) => voidソースを見るTree.Root
ソースを見るTree.Root(props: JSX.TreeProps): 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—
Declares onBlur (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見る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—
Declares onDrop (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見るonFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見るscopestring—
nodesreadonly TreeNodeDeclaration[]—
Declares nodes (optional). Reactive JSX expressions update this property in place.
readonly TreeNodeDeclaration[]ソースを見るexpandedreadonly string[]—
defaultExpandedreadonly string[]—
Declares defaultExpanded (optional). Reactive JSX expressions update this property in place.
readonly string[]ソースを見るvaluestring—
rowHeightnumber—
loadingLabelstring—
disclosure"leading" | "trailing" | "none"—
Where the core's behavior-only disclosure control is mounted inside a declared row.
"leading" | "trailing" | "none"ソースを見るsetChildren{ id: string; children: readonly TreeNodeDeclaration[] }—
One bounded, atomically validated lazy-children splice.
{ id: string; children: readonly TreeNodeDeclaration[] }ソースを見るonExpandedChange(expanded: readonly string[], event: QuickGuiEvent) => void—
Declares onExpandedChange (optional). Reactive JSX expressions update this property in place.
(expanded: readonly string[], event: QuickGuiEvent) => voidソースを見るonValueChange(value: string | undefined, event: QuickGuiEvent) => void—
Declares onValueChange (optional). Reactive JSX expressions update this property in place.
(value: string | undefined, event: QuickGuiEvent) => voidソースを見るonLoadChildren(id: string, event: QuickGuiEvent) => void—
A pending branch asks for its children exactly once, when it is first expanded.
(id: string, event: QuickGuiEvent) => voidソースを見るonVisibleRangeChange(range: VisibleRange, event: QuickGuiEvent) => void—
Declares onVisibleRangeChange (optional). Reactive JSX expressions update this property in place.
(range: VisibleRange, event: QuickGuiEvent) => voidソースを見るonActivate(id: string, event: QuickGuiEvent) => void—
Declares onActivate (optional). Reactive JSX expressions update this property in place.
(id: string, event: QuickGuiEvent) => voidソースを見るTree.Row
ソースを見るTree.Row(props: JSX.TreeRowProps): 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—
Declares onBlur (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見る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—
Declares onDrop (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見るonFilesDroppedEventHandler—
Declares onFilesDropped (optional). Reactive JSX expressions update this property in place.
EventHandlerソースを見る