> [Wiki](Home) ▸ [[API Reference|API-Reference]] ▸ [[Renderer|Renderer-API]] ▸ **Class**
# Class
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee)
## Table of contents
* [Class](#class)
* [**Class** Class](#class-class)
* [New](#new)
* [name](#name)
* [onNameChange](#onnamechange)
* [target](#target)
* [onTargetChange](#ontargetchange)
* [changes](#changes)
* [priority](#priority)
* [onPriorityChange](#onprioritychange)
* [when](#when)
* [onWhenChange](#onwhenchange)
* [children](#children)
* [children.length](#childrenlength)
* [children.append](#childrenappend)
* [children.pop](#childrenpop)
* [document](#document)
* [onDocumentChange](#ondocumentchange)
* [document.query](#documentquery)
* [document.onQueryChange](#documentonquerychange)
* [document.onNodeAdd](#documentonnodeadd)
* [document.onNodeRemove](#documentonnoderemove)
* [classes](#classes)
* [onClassesChange](#onclasseschange)
* [Glossary](#glossary)
#**Class** Class
- Syntax
**Class** Class : *Renderer.Extension*- Extends
- Renderer.Extension
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#class-class--rendererextension)
##New
- Syntax
*Renderer.Class* Class.New([*Component* component, *Object* options])- Static method of
- Class
- Parameters
- component — Component — optional
- options — Object — optional
- Returns
- Renderer.Class
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#rendererclass-classnewcomponent-component-object-options)
##name
- Syntax
*String* Class::name- Prototype property of
- Class
- Type
- String
This property is used in the [Item](/Neft-io/neft/wiki/Renderer-Item-API#class-item)::classes list
to identify various classes.
##onNameChange
- Syntax
*Signal* Class::onNameChange(*String* oldValue)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classonnamechangestring-oldvalue)
##target
- Syntax
*Item* Class::target- Prototype property of
- Class
- Type
- Item
Reference to the [Item](/Neft-io/neft/wiki/Renderer-Item-API#class-item) on which this class has effects.
If state is created inside the [Item](/Neft-io/neft/wiki/Renderer-Item-API#class-item), this property is set automatically.
##onTargetChange
- Syntax
*Signal* Class::onTargetChange(*Item* oldValue)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classontargetchangeitem-oldvalue)
##changes
- Syntax
*Object* Class::changes- Prototype property of
- Class
- Type
- Object
This objects contains all properties to change on the target item.
It accepts bindings and listeners as well.
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#object-classchanges)
##priority
- Syntax
*Integer* Class::priority = `0`- Prototype property of
- Class
- Type
- Integer
- Default
0
##onPriorityChange
- Syntax
*Signal* Class::onPriorityChange(*Integer* oldValue)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classonprioritychangeinteger-oldvalue)
##when
- Syntax
*Boolean* Class::when- Prototype property of
- Class
- Type
- Boolean
Indicates whether the class is active or not.
When it's `true`, this state is appended on the
end of the [Item](/Neft-io/neft/wiki/Renderer-Item-API#class-item)::classes list.
Mostly used with bindings.
```javascript
Grid {
columns: 2
// reduce to one column if the view width is lower than 500 pixels
Class {
when: view.width < 500
changes: {
columns: 1
}
}
}
```
##onWhenChange
- Syntax
*Signal* Class::onWhenChange(*Boolean* oldValue)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classonwhenchangeboolean-oldvalue)
##children
- Syntax
*Object* Class::children- Prototype property of
- Class
- Type
- Object
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#object-classchildren)
###children.length
- Syntax
*Integer* Class::children.length = `0`- Prototype property of
- Class
- Type
- Integer
- Default
0
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#integer-classchildrenlength--0)
###children.append
- Syntax
*Object* Class::children.append(*Object* value)- Prototype method of
- Class
- Parameters
- Returns
- Object
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#object-classchildrenappendobject-value)
###children.pop
- Syntax
*Object* Class::children.pop(*Integer* index)- Prototype method of
- Class
- Parameters
- Returns
- Object
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#object-classchildrenpopinteger-index)
##document
- Syntax
*Object* Class::document- Prototype property of
- Class
- Type
- Object
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#object-classdocument)
##onDocumentChange
- Syntax
*Signal* Class::onDocumentChange(*Object* document)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classondocumentchangeobject-document)
##document.query
- Syntax
*String* Class::document.query- Prototype property of
- Class
- Type
- String
##document.onQueryChange
- Syntax
*Signal* Class::document.onQueryChange(*String* oldValue)- Prototype method of
- Class
- Parameters
- Type
- Signal
##document.onNodeAdd
- Syntax
*Signal* Class::document.onNodeAdd(*Element* node)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classdocumentonnodeaddelement-node)
##document.onNodeRemove
- Syntax
*Signal* Class::document.onNodeRemove(*Element* node)- Prototype method of
- Class
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-classdocumentonnoderemoveelement-node)
##classes
- Syntax
*List* Item::classes- Prototype property of
- Item
- Type
- List
Classes at the end of the list have the highest priority.
This property has a setter, which accepts a string and an array of strings.
##onClassesChange
- Syntax
*Signal* Item::onClassesChange(*String* added, *String* removed)- Prototype method of
- Item
- Parameters
- added — String
- removed — String
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/extensions/class.litcoffee#signal-itemonclasseschangestring-added-string-removed)
# Glossary
- [Renderer.Class](#class-class)