neft

# Item > **API Reference** ▸ [Renderer](/api/renderer.md) ▸ **Item**  > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee) * * * ### `Item.New()` <dl><dt>Static method of</dt><dd>Item</dd><dt>Parameters</dt><dd><ul><li>component — Component — optional</li><li>options — Object — optional</li></ul></dd><dt>Returns</dt><dd>Item</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#item-itemnewcomponent-component-object-options) * * * ### `constructor()` <dl><dt>Returns</dt><dd>Item</dd></dl> This is a base class for everything which is visible. > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#item-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()` <dl><dt>Parameters</dt><dd><ul><li>property — String</li><li>oldValue — Any</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonchangestring-property-any-oldvalue) * * * ### `ready()` <dl><dt>Type</dt><dd>Signal</dd></dl> 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`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemready) * * * ### `onAnimationFrame()` <dl><dt>Parameters</dt><dd><ul><li>miliseconds — Integer</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonanimationframeinteger-miliseconds) * * * ### `id` <dl><dt>Type</dt><dd>String</dd><dt>Read Only</dt></dl> * * * ### `children` <dl><dt>Type</dt><dd>Object</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#object-itemchildren) * * * ### `onChildrenChange()` <dl><dt>Parameters</dt><dd><ul><li>added — Item</li><li>removed — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonchildrenchangeitem-added-item-removed) * * * ### `children.firstChild` <dl><dt>Type</dt><dd>Item</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrenfirstchild) * * * ### `children.lastChild` <dl><dt>Type</dt><dd>Item</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrenlastchild) * * * ### `children.bottomChild` <dl><dt>Type</dt><dd>Item</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrenbottomchild) * * * ### `children.topChild` <dl><dt>Type</dt><dd>Item</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-item-itemchildrentopchild) * * * ### `children.length` <dl><dt>Type</dt><dd>Integer</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-integer-itemchildrenlength) * * * ### `children.layout` <dl><dt>Type</dt><dd>Item</dd></dl> Item used to position children items. Can be e.g. *Flow*, *Grid* etc. * * * ### `children.onLayoutChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemchildrenonlayoutchangeitem-oldvalue) * * * ### `children.target` <dl><dt>Type</dt><dd>Item</dd></dl> A new child trying to be added into the item with the `children.target` defined will be added into the `target` item. * * * ### `children.onTargetChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemchildrenontargetchangeitem-oldvalue) * * * ### `children.get()` <dl><dt>Parameters</dt><dd><ul><li>index — Integer</li></ul></dd><dt>Returns</dt><dd>Item</dd></dl> Returns an item with the given index. > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#item-itemchildrengetinteger-index) * * * ### `children.index()` <dl><dt>Parameters</dt><dd><ul><li>value — Item</li></ul></dd><dt>Returns</dt><dd>Integer</dd></dl> Returns an index of the given child in the children array. > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#integer-itemchildrenindexitem-value) * * * ### `children.has()` <dl><dt>Parameters</dt><dd><ul><li>value — Item</li></ul></dd><dt>Returns</dt><dd>Boolean</dd></dl> Returns `true` if the given item is an item child. > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#boolean-itemchildrenhasitem-value) * * * ### `children.clear()` Removes all children from the item. > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#itemchildrenclear) * * * ### `parent` <dl><dt>Type</dt><dd>Item</dd><dt>Default</dt><dd><code>null</code></dd></dl> * * * ### `onParentChange()` <dl><dt>Parameters</dt><dd><ul><li>oldParent — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonparentchangeitem-oldparent) * * * ### `previousSibling` <dl><dt>Type</dt><dd>Item</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#item-itemprevioussibling) * * * ### `onPreviousSiblingChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonprevioussiblingchangeitem-oldvalue) * * * ### `nextSibling` <dl><dt>Type</dt><dd>Item</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#item-itemnextsibling) * * * ### `onNextSiblingChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonnextsiblingchangeitem-oldvalue) * * * ### `belowSibling` <dl><dt>Type</dt><dd>Item</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-item-itembelowsibling) * * * ### `aboveSibling` <dl><dt>Type</dt><dd>Item</dd><dt>Read Only</dt></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#readonly-item-itemabovesibling) * * * ### `index` <dl><dt>Type</dt><dd>Integer</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#integer-itemindex) * * * ### `visible` <dl><dt>Type</dt><dd>Boolean</dd><dt>Default</dt><dd><code>true</code></dd></dl> 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()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Boolean</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonvisiblechangeboolean-oldvalue) * * * ### `clip` <dl><dt>Type</dt><dd>Boolean</dd><dt>Default</dt><dd><code>false</code></dd></dl> * * * ### `onClipChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Boolean</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonclipchangeboolean-oldvalue) * * * ### `width` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>0</code></dd></dl> * * * ### `onWidthChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonwidthchangefloat-oldvalue) * * * ### `height` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>0</code></dd></dl> * * * ### `onHeightChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonheightchangefloat-oldvalue) * * * ### `x` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>0</code></dd></dl> * * * ### `onXChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonxchangefloat-oldvalue) * * * ### `y` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>0</code></dd></dl> * * * ### `onYChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonychangefloat-oldvalue) * * * ### `z` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>0</code></dd></dl> * * * ### `onZChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonzchangefloat-oldvalue) * * * ### `scale` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>1</code></dd></dl> * * * ### `onScaleChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonscalechangefloat-oldvalue) * * * ### `rotation` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>0</code></dd></dl> ```nml Rectangle { width: 100 height: 100 color: 'red' rotation: Math.PI / 4 } ``` * * * ### `onRotationChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonrotationchangefloat-oldvalue) * * * ### `opacity` <dl><dt>Type</dt><dd>Float</dd><dt>Default</dt><dd><code>1</code></dd></dl> * * * ### `onOpacityChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Float</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonopacitychangefloat-oldvalue) * * * ### `linkUri` <dl><dt>Type</dt><dd>String</dd><dt>Default</dt><dd><code>''</code></dd></dl> Points to the URI which will be used when user clicks on this item. * * * ### `onLinkUriChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — String</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonlinkurichangestring-oldvalue) * * * ### `background` <dl><dt>Type</dt><dd>Item</dd></dl> An item used as a background for the item. By default, background is filled to his parent. * * * ### `onBackgroundChange()` <dl><dt>Parameters</dt><dd><ul><li>oldValue — Item</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonbackgroundchangeitem-oldvalue) * * * ### `overlap()` <dl><dt>Parameters</dt><dd><ul><li>item — Item</li></ul></dd></dl> Returns `true` if two items overlaps. > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#itemoverlapitem-item) * * * ### `anchors` <dl><dt>Type</dt><dd>Item.Anchors</dd></dl> * * * ### `onAnchorsChange()` <dl><dt>Parameters</dt><dd><ul><li>property — String</li><li>oldValue — Array</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonanchorschangestring-property-array-oldvalue) * * * ### `layout` <dl><dt>Type</dt><dd>Item.Layout</dd></dl> * * * ### `onLayoutChange()` <dl><dt>Parameters</dt><dd><ul><li>property — String</li><li>oldValue — Any</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonlayoutchangestring-property-any-oldvalue) * * * ### `pointer` <dl><dt>Type</dt><dd>Item.Pointer</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#itempointer-itempointer) * * * ### `margin` <dl><dt>Type</dt><dd>Item.Margin</dd></dl> * * * ### `onMarginChange()` <dl><dt>Parameters</dt><dd><ul><li>property — String</li><li>oldValue — Any</li></ul></dd><dt>Type</dt><dd>Signal</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#signal-itemonmarginchangestring-property-any-oldvalue) * * * ### `keys` <dl><dt>Type</dt><dd>Item.Keys</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#itemkeys-itemkeys) * * * ### `document` <dl><dt>Type</dt><dd>Item.Document</dd></dl> > [`Source`](https://github.com/Neft-io/neft/blob/f9c128ccb37aa79380c961e878cd76ec9e79c99e/src/renderer/types/basics/item.litcoffee#itemdocument-itemdocument)