Class: UIKitDocument
Defined in: packages/core/src/ui/document.ts:24
Lightweight DOM-like wrapper around a UIKit root Component that lives in the 3D scene.
Remarks
- Provides query helpers (
getElementById,getElementsByClassName,querySelector(All)). - Maintains reactive target dimensions via targetWidth/targetHeight and scales the group to fit while preserving aspect ratio.
- Intended to be attached to an entity's
object3Din world space or to thecamerafor screen‑space UI. Use together with PanelUISystem and ScreenSpaceUISystem.
Extends
Group
Constructors
Constructor
new UIKitDocument(
rootComponent):UIKitDocument
Defined in: packages/core/src/ui/document.ts:39
Create a document backed by a UIKit root component.
Parameters
rootComponent
Component<any>
The root Component produced by @pmndrs/uikitml interpret().
Returns
UIKitDocument
Overrides
Group.constructor
Properties
targetHeight
readonlytargetHeight:Signal<number>
Defined in: packages/core/src/ui/document.ts:33
Reactive target height in meters. Set via setTargetDimensions.
targetWidth
readonlytargetWidth:Signal<number>
Defined in: packages/core/src/ui/document.ts:31
Reactive target width in meters. Set via setTargetDimensions.
Accessors
computedSize
Get Signature
get computedSize():
object
Defined in: packages/core/src/ui/document.ts:279
Current intrinsic size of the UIKit root component (in UIKit units, centimeters), if available from the underlying component's size signal.
Returns
object
height
height:
number
width
width:
number
rootElement
Get Signature
get rootElement():
Component<any>
Defined in: packages/core/src/ui/document.ts:299
The root UIKit component for this document.
Returns
Component<any>
targetSize
Get Signature
get targetSize():
object
Defined in: packages/core/src/ui/document.ts:291
Return the most recently requested target size in meters.
Returns
object
height
height:
number
width
width:
number
Methods
dispose()
dispose():
void
Defined in: packages/core/src/ui/document.ts:306
Dispose of internal resources and detach children. Safe to call multiple times.
Returns
void
getElementById()
getElementById(
id):Component<any,ThreeEventMap,BaseOutProperties<ThreeEventMap>>
Defined in: packages/core/src/ui/document.ts:53
Return the first element with a matching id (UIKit property).
Parameters
id
string
The element identifier without the # prefix.
Returns
Component<any, ThreeEventMap, BaseOutProperties<ThreeEventMap>>
getElementsByClassName()
getElementsByClassName(
className):Component<any,ThreeEventMap,BaseOutProperties<ThreeEventMap>>[]
Defined in: packages/core/src/ui/document.ts:61
Return all elements that include className in their class list.
Parameters
className
string
The class without the preceding dot.
Returns
Component<any, ThreeEventMap, BaseOutProperties<ThreeEventMap>>[]
isDescendantOf()
isDescendantOf(
element,ancestor):boolean
Defined in: packages/core/src/ui/document.ts:183
Check if element is a descendant of ancestor.
Parameters
element
Component<any>
ancestor
Component<any>
Returns
boolean
true if ancestor appears in the parent chain of element.
querySelector()
querySelector(
selector):Component<any,ThreeEventMap,BaseOutProperties<ThreeEventMap>>
Defined in: packages/core/src/ui/document.ts:74
Return the first element matching a simple CSS‑like selector.
Parameters
selector
string
Returns
Component<any, ThreeEventMap, BaseOutProperties<ThreeEventMap>>
Remarks
Supported selectors:
#id.class- Descendant combinations, e.g.
#parent .child
querySelectorAll()
querySelectorAll(
selector):Component<any,ThreeEventMap,BaseOutProperties<ThreeEventMap>>[]
Defined in: packages/core/src/ui/document.ts:82
Return all elements matching a simple CSS‑like selector. See querySelector.
Parameters
selector
string
Returns
Component<any, ThreeEventMap, BaseOutProperties<ThreeEventMap>>[]
querySelectorAllWithin()
querySelectorAllWithin(
parentSelector,childSelector):Component<any,ThreeEventMap,BaseOutProperties<ThreeEventMap>>[]
Defined in: packages/core/src/ui/document.ts:195
Convenience for querySelectorAll("${parent} ${child}").
Parameters
parentSelector
string
childSelector
string
Returns
Component<any, ThreeEventMap, BaseOutProperties<ThreeEventMap>>[]
querySelectorWithin()
querySelectorWithin(
parentSelector,childSelector):Component<any,ThreeEventMap,BaseOutProperties<ThreeEventMap>>
Defined in: packages/core/src/ui/document.ts:202
Convenience for the first match of querySelectorAllWithin.
Parameters
parentSelector
string
childSelector
string
Returns
Component<any, ThreeEventMap, BaseOutProperties<ThreeEventMap>>
setTargetDimensions()
setTargetDimensions(
width,height):void
Defined in: packages/core/src/ui/document.ts:270
Set desired dimensions for the UI in meters. The document computes a uniform scale that fits these constraints while preserving aspect ratio.
Parameters
width
number
Target width in meters.
height
number
Target height in meters.
Returns
void
toString()
toString():
string
Defined in: packages/core/src/ui/document.ts:324
String summary useful for debugging.
Returns
string