> [Wiki](Home) ▸ [[API Reference|API-Reference]] ▸ [[Renderer|Renderer-API]] ▸ **Item**
# Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee)
## Nested APIs
* [[Alignment|Renderer-Item.Alignment-API]]
* [[Anchors|Renderer-Item.Anchors-API]]
* [[Document|Renderer-Item.Document-API]]
* [[Image|Renderer-Image-API]]
* [[Keys|Renderer-Item.Keys-API]]
* [[Layout|Renderer-Item.Layout-API]]
* [[Margin|Renderer-Item.Margin-API]]
* [[Native|Renderer-Native-API]]
* [[Pointer|Renderer-Item.Pointer-API]]
* [[Spacing|Renderer-Item.Spacing-API]]
* [[Text|Renderer-Text-API]]
* [[Text.Font|Renderer-Item.Text.Font-API]]
* [[TextInput|Renderer-TextInput-API]]
## Table of contents
* [Item](#item)
* [**Class** Item](#class-item)
* [New](#new)
* [constructor](#constructor)
* [Custom properties](#custom-properties)
* [Custom signals](#custom-signals)
* [on$Change](#onchange)
* [ready](#ready)
* [onAnimationFrame](#onanimationframe)
* [id](#id)
* [children](#children)
* [onChildrenChange](#onchildrenchange)
* [children.firstChild](#childrenfirstchild)
* [children.lastChild](#childrenlastchild)
* [children.bottomChild](#childrenbottomchild)
* [children.topChild](#childrentopchild)
* [children.length](#childrenlength)
* [children.layout](#childrenlayout)
* [children.onLayoutChange](#childrenonlayoutchange)
* [children.target](#childrentarget)
* [children.onTargetChange](#childrenontargetchange)
* [children.get](#childrenget)
* [children.index](#childrenindex)
* [children.has](#childrenhas)
* [children.clear](#childrenclear)
* [*Item* Item::parent = null](#item-itemparent--null)
* [onParentChange](#onparentchange)
* [previousSibling](#previoussibling)
* [onPreviousSiblingChange](#onprevioussiblingchange)
* [nextSibling](#nextsibling)
* [onNextSiblingChange](#onnextsiblingchange)
* [belowSibling](#belowsibling)
* [aboveSibling](#abovesibling)
* [index](#index)
* [visible](#visible)
* [onVisibleChange](#onvisiblechange)
* [clip](#clip)
* [onClipChange](#onclipchange)
* [width](#width)
* [onWidthChange](#onwidthchange)
* [height](#height)
* [onHeightChange](#onheightchange)
* [x](#x)
* [onXChange](#onxchange)
* [y](#y)
* [onYChange](#onychange)
* [z](#z)
* [onZChange](#onzchange)
* [scale](#scale)
* [onScaleChange](#onscalechange)
* [rotation](#rotation)
* [onRotationChange](#onrotationchange)
* [opacity](#opacity)
* [onOpacityChange](#onopacitychange)
* [*String* Item::linkUri = ''](#string-itemlinkuri--)
* [onLinkUriChange](#onlinkurichange)
* [background](#background)
* [onBackgroundChange](#onbackgroundchange)
* [overlap](#overlap)
* [anchors](#anchors)
* [onAnchorsChange](#onanchorschange)
* [layout](#layout)
* [onLayoutChange](#onlayoutchange)
* [pointer](#pointer)
* [margin](#margin)
* [onMarginChange](#onmarginchange)
* [keys](#keys)
* [document](#document)
* [Glossary](#glossary)
# **Class** Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee)
##New
- Syntax
*Item* Item.New([*Component* component, *Object* options])- Static method of
- Item
- Parameters
- component — Component — optional
- options — Object — optional
- Returns
- Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#item-itemnewcomponent-component-object-options)
##constructor
- Syntax
Item::constructor()- Prototype method of
- Item
This is a base class for everything which is visible.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#itemconstructor)
### Custom properties
```nml
`Item {
` id: main
` property $.currentLife: 0.8
`
` Text {
` text: "Life: " + main.$.currentLife
` }
`}
```
### Custom signals
```nml
`Item {
` signal $.onPlayerCollision
` $.onPlayerCollision: function(){
` // boom!
` }
`}
```
##on$Change
- Syntax
*Signal* Item::on$Change(*String* property, *Any* oldValue)- Prototype method of
- Item
- Parameters
- property — String
- oldValue — Any
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonchangestring-property-any-oldvalue)
##ready
- Syntax
*Signal* Item::ready()- Prototype method of
- Item
- Type
- Signal
Called when the Item is ready, that is, all
properties have been set and it's ready to use.
```nml
Rectangle {
width: 200
height: 50
color: 'green'
Rectangle {
width: parent.width / 2
height: parent.height / 2
color: 'yellow'
onReady: function(){
console.log(this.width, this.height);
// 100, 25
}
}
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemready)
##onAnimationFrame
- Syntax
*Signal* Item::onAnimationFrame(*Integer* miliseconds)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonanimationframeinteger-miliseconds)
##id
- Syntax
ReadOnly *String* Item::id- Prototype property of
- Item
- Type
- String
- Read Only
##children
- Syntax
*Object* Item::children- Prototype property of
- Item
- Type
- Object
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#object-itemchildren)
##onChildrenChange
- Syntax
*Signal* Item::onChildrenChange(*Item* added, *Item* removed)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonchildrenchangeitem-added-item-removed)
###children.firstChild
- Syntax
ReadOnly *Item* Item::children.firstChild- Prototype property of
- Item
- Type
- Item
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrenfirstchild)
###children.lastChild
- Syntax
ReadOnly *Item* Item::children.lastChild- Prototype property of
- Item
- Type
- Item
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrenlastchild)
###children.bottomChild
- Syntax
ReadOnly *Item* Item::children.bottomChild- Prototype property of
- Item
- Type
- Item
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrenbottomchild)
###children.topChild
- Syntax
ReadOnly *Item* Item::children.topChild- Prototype property of
- Item
- Type
- Item
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrentopchild)
###children.length
- Syntax
ReadOnly *Integer* Item::children.length- Prototype property of
- Item
- Type
- Integer
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-integer-itemchildrenlength)
###children.layout
- Syntax
*Item* Item::children.layout- Prototype property of
- Item
- Type
- Item
Item used to position children items.
Can be e.g. [Flow](/Neft-io/neft/wiki/Renderer-Flow-API#class-flow), [Grid](/Neft-io/neft/wiki/Renderer-Grid-API#class-grid) etc.
###children.onLayoutChange
- Syntax
*Signal* Item::children.onLayoutChange(*Item* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemchildrenonlayoutchangeitem-oldvalue)
###children.target
- Syntax
*Item* Item::children.target- Prototype property of
- Item
- Type
- Item
A new child trying to be added into the item with the `children.target` defined
will be added into the `target` item.
###children.onTargetChange
- Syntax
*Signal* Item::children.onTargetChange(*Item* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemchildrenontargetchangeitem-oldvalue)
###children.get
- Syntax
*Item* Item::children.get(*Integer* index)- Prototype method of
- Item
- Parameters
- Returns
- Item
Returns an item with the given index.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#item-itemchildrengetinteger-index)
###children.index
- Syntax
*Integer* Item::children.index(*Item* value)- Prototype method of
- Item
- Parameters
- Returns
- Integer
Returns an index of the given child in the children array.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#integer-itemchildrenindexitem-value)
###children.has
- Syntax
*Boolean* Item::children.has(*Item* value)- Prototype method of
- Item
- Parameters
- Returns
- Boolean
Returns `true` if the given item is an item child.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#boolean-itemchildrenhasitem-value)
###children.clear
- Syntax
Item::children.clear()- Prototype method of
- Item
Removes all children from the item.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#itemchildrenclear)
## [Item](/Neft-io/neft/wiki/Renderer-Item-API#class-item) Item::parent = null
##onParentChange
- Syntax
*Signal* Item::onParentChange(*Item* oldParent)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonparentchangeitem-oldparent)
##previousSibling
- Syntax
*Item* Item::previousSibling- Prototype property of
- Item
- Type
- Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#item-itemprevioussibling)
##onPreviousSiblingChange
- Syntax
*Signal* Item::onPreviousSiblingChange(*Item* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonprevioussiblingchangeitem-oldvalue)
##nextSibling
- Syntax
*Item* Item::nextSibling- Prototype property of
- Item
- Type
- Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#item-itemnextsibling)
##onNextSiblingChange
- Syntax
*Signal* Item::onNextSiblingChange(*Item* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonnextsiblingchangeitem-oldvalue)
##belowSibling
- Syntax
ReadOnly *Item* Item::belowSibling- Prototype property of
- Item
- Type
- Item
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-item-itembelowsibling)
##aboveSibling
- Syntax
ReadOnly *Item* Item::aboveSibling- Prototype property of
- Item
- Type
- Item
- Read Only
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#readonly-item-itemabovesibling)
##index
- Syntax
*Integer* Item::index- Prototype property of
- Item
- Type
- Integer
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#integer-itemindex)
##visible
- Syntax
*Boolean* Item::visible = `true`- Prototype property of
- Item
- Type
- Boolean
- Default
true
Determines whether an item is visible or not.
```nml
Item {
width: 100
height: 100
pointer.onClick: function(){
rect.visible = !rect.visible;
text.text = rect.visible ? "Click to hide" : "Click to show";
}
Rectangle {
id: rect
anchors.fill: parent
color: 'blue'
}
Text {
id: text
text: "Click to hide"
anchors.centerIn: parent
}
}
```
##onVisibleChange
- Syntax
*Signal* Item::onVisibleChange(*Boolean* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonvisiblechangeboolean-oldvalue)
##clip
- Syntax
*Boolean* Item::clip = `false`- Prototype property of
- Item
- Type
- Boolean
- Default
false
##onClipChange
- Syntax
*Signal* Item::onClipChange(*Boolean* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonclipchangeboolean-oldvalue)
##width
- Syntax
*Float* Item::width = `0`- Prototype property of
- Item
- Type
- Float
- Default
0
##onWidthChange
- Syntax
*Signal* Item::onWidthChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonwidthchangefloat-oldvalue)
##height
- Syntax
*Float* Item::height = `0`- Prototype property of
- Item
- Type
- Float
- Default
0
##onHeightChange
- Syntax
*Signal* Item::onHeightChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonheightchangefloat-oldvalue)
##x
- Syntax
*Float* Item::x = `0`- Prototype property of
- Item
- Type
- Float
- Default
0
##onXChange
- Syntax
*Signal* Item::onXChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonxchangefloat-oldvalue)
##y
- Syntax
*Float* Item::y = `0`- Prototype property of
- Item
- Type
- Float
- Default
0
##onYChange
- Syntax
*Signal* Item::onYChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonychangefloat-oldvalue)
##z
- Syntax
*Float* Item::z = `0`- Prototype property of
- Item
- Type
- Float
- Default
0
##onZChange
- Syntax
*Signal* Item::onZChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonzchangefloat-oldvalue)
##scale
- Syntax
*Float* Item::scale = `1`- Prototype property of
- Item
- Type
- Float
- Default
1
##onScaleChange
- Syntax
*Signal* Item::onScaleChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonscalechangefloat-oldvalue)
##rotation
- Syntax
*Float* Item::rotation = `0`- Prototype property of
- Item
- Type
- Float
- Default
0
```nml
Rectangle {
width: 100
height: 100
color: 'red'
rotation: Math.PI / 4
}
```
##onRotationChange
- Syntax
*Signal* Item::onRotationChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonrotationchangefloat-oldvalue)
##opacity
- Syntax
*Float* Item::opacity = `1`- Prototype property of
- Item
- Type
- Float
- Default
1
##onOpacityChange
- Syntax
*Signal* Item::onOpacityChange(*Float* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonopacitychangefloat-oldvalue)
## *String* Item::linkUri = ''
Points to the URI which will be used when user clicks on this item.
##onLinkUriChange
- Syntax
*Signal* Item::onLinkUriChange(*String* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonlinkurichangestring-oldvalue)
##background
- Syntax
*Item* Item::background- Prototype property of
- Item
- Type
- Item
An item used as a background for the item.
By default, background is filled to his parent.
##onBackgroundChange
- Syntax
*Signal* Item::onBackgroundChange(*Item* oldValue)- Prototype method of
- Item
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonbackgroundchangeitem-oldvalue)
##overlap
- Syntax
Item::overlap(*Item* item)- Prototype method of
- Item
- Parameters
Returns `true` if two items overlaps.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#itemoverlapitem-item)
##anchors
- Syntax
*Item.Anchors* Item::anchors- Prototype property of
- Item
- Type
- Item.Anchors
##onAnchorsChange
- Syntax
*Signal* Item::onAnchorsChange(*String* property, *Array* oldValue)- Prototype method of
- Item
- Parameters
- property — String
- oldValue — Array
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonanchorschangestring-property-array-oldvalue)
##layout
- Syntax
*Item.Layout* Item::layout- Prototype property of
- Item
- Type
- Item.Layout
##onLayoutChange
- Syntax
*Signal* Item::onLayoutChange(*String* property, *Any* oldValue)- Prototype method of
- Item
- Parameters
- property — String
- oldValue — Any
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonlayoutchangestring-property-any-oldvalue)
##pointer
- Syntax
*Item.Pointer* Item::pointer- Prototype property of
- Item
- Type
- Item.Pointer
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#itempointer-itempointer)
##margin
- Syntax
*Item.Margin* Item::margin- Prototype property of
- Item
- Type
- Item.Margin
##onMarginChange
- Syntax
*Signal* Item::onMarginChange(*String* property, *Any* oldValue)- Prototype method of
- Item
- Parameters
- property — String
- oldValue — Any
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#signal-itemonmarginchangestring-property-any-oldvalue)
##keys
- Syntax
*Item.Keys* Item::keys- Prototype property of
- Item
- Type
- Item.Keys
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#itemkeys-itemkeys)
##document
- Syntax
*Item.Document* Item::document- Prototype property of
- Item
- Type
- Item.Document
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item.litcoffee#itemdocument-itemdocument)
# Glossary
- [Item](#class-item)