> [Wiki](Home) ▸ [[API Reference|API-Reference]] ▸ [[Renderer|Renderer-API]] ▸ [[Item|Renderer-Item-API]] ▸ **Anchors**
#Anchors
- Syntax
Item.Anchors- Static property of
- Item
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#itemanchors)
## Table of contents
* [Anchors](#anchors)
* [**Class** Anchors](#class-anchors)
* [left](#left)
* [onLeftChange](#onleftchange)
* [right](#right)
* [onRightChange](#onrightchange)
* [horizontalCenter](#horizontalcenter)
* [onHorizontalCenterChange](#onhorizontalcenterchange)
* [top](#top)
* [onTopChange](#ontopchange)
* [bottom](#bottom)
* [onBottomChange](#onbottomchange)
* [verticalCenter](#verticalcenter)
* [onVerticalCenterChange](#onverticalcenterchange)
* [centerIn](#centerin)
* [onCenterInChange](#oncenterinchange)
* [fill](#fill)
* [onFillChange](#onfillchange)
* [fillWidth](#fillwidth)
* [onFillWidthChange](#onfillwidthchange)
* [fillHeight](#fillheight)
* [onFillHeightChange](#onfillheightchange)
* [Glossary](#glossary)
# **Class** Anchors
Anchors describe position relations between two items.
Each item has few lines: top, bottom, verticalCenter, left, right, horizontalCenter.
Anchors give a posibility to say, that a line of the first item must be
always in the same position as a line of the second item.
Anchors work only between siblings and in relation to the direct parent.
```javascript
Item {
height: 100
Rectangle {
id: rect1
width: 100
height: 100
color: 'green'
}
Rectangle {
width: 40
height: 40
color: 'red'
anchors.left: rect1.right
}
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee)
```javascript
Rectangle {
width: 100
height: 100
color: 'green'
Rectangle {
width: 40
height: 40
color: 'red'
anchors.left: parent.right
}
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee)
Horizontal anchors can't point to the vertical lines (and vice versa),
so `anchors.top = parent.left` is not allowed.
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee)
##left
- Syntax
*Array* Anchors::left- Prototype property of
- Anchors
- Type
- Array
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#array-anchorsleft)
##onLeftChange
- Syntax
*Signal* Anchors::onLeftChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
##right
- Syntax
*Array* Anchors::right- Prototype property of
- Anchors
- Type
- Array
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#array-anchorsright)
##onRightChange
- Syntax
*Signal* Anchors::onRightChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
##horizontalCenter
- Syntax
*Array* Anchors::horizontalCenter- Prototype property of
- Anchors
- Type
- Array
```javascript
Item {
height: 100
Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
Rectangle {
color: 'red'; width: 40; height: 40
anchors.horizontalCenter: rect1.horizontalCenter
}
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#array-anchorshorizontalcenter)
##onHorizontalCenterChange
- Syntax
*Signal* Anchors::onHorizontalCenterChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
##top
- Syntax
*Array* Anchors::top- Prototype property of
- Anchors
- Type
- Array
```javascript
Item {
height: 100
Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
Rectangle {
color: 'red'; width: 40; height: 40
anchors.top: rect1.verticalCenter
}
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#array-anchorstop)
##onTopChange
- Syntax
*Signal* Anchors::onTopChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
##bottom
- Syntax
*Array* Anchors::bottom- Prototype property of
- Anchors
- Type
- Array
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#array-anchorsbottom)
##onBottomChange
- Syntax
*Signal* Anchors::onBottomChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
##verticalCenter
- Syntax
*Array* Anchors::verticalCenter- Prototype property of
- Anchors
- Type
- Array
```javascript
Item {
height: 100
Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
Rectangle {
color: 'red'; width: 40; height: 40
anchors.verticalCenter: rect1.verticalCenter
}
}
```
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#array-anchorsverticalcenter)
##onVerticalCenterChange
- Syntax
*Signal* Anchors::onVerticalCenterChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
##centerIn
- Syntax
*Array* Anchors::centerIn- Prototype property of
- Anchors
- Type
- Array
It's a shortcut for the horizontalCenter and verticalCenter anchors.
No target line is required.
```javascript
Rectangle {
id: rect1
width: 100
height: 100
color: 'green'
Rectangle {
width: 40
height: 40
color: 'red'
anchors.centerIn: parent
}
}
```
##onCenterInChange
- Syntax
*Signal* Anchors::onCenterInChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#signal-anchorsoncenterinchangearray-oldvalue)
##fill
- Syntax
*Array* Anchors::fill- Prototype property of
- Anchors
- Type
- Array
Changes item position and its size to be always equal the anchored target.
No target line is required.
```javascript
Item {
height: 100
Rectangle { id: rect1; color: 'green'; width: 100; height: 100; }
Rectangle {
color: 'red'
opacity: 0.5
anchors.fill: rect1
}
}
```
##onFillChange
- Syntax
*Signal* Anchors::onFillChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#signal-anchorsonfillchangearray-oldvalue)
##fillWidth
- Syntax
*Array* Anchors::fillWidth- Prototype property of
- Anchors
- Type
- Array
##onFillWidthChange
- Syntax
*Signal* Anchors::onFillWidthChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#signal-anchorsonfillwidthchangearray-oldvalue)
##fillHeight
- Syntax
*Array* Anchors::fillHeight- Prototype property of
- Anchors
- Type
- Array
##onFillHeightChange
- Syntax
*Signal* Anchors::onFillHeightChange(*Array* oldValue)- Prototype method of
- Anchors
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/65f8de73ffc0dbb38be0f58144f629599500b1a9/src/renderer/types/basics/item/anchors.litcoffee#signal-anchorsonfillheightchangearray-oldvalue)
# Glossary
- [Item.Anchors](#class-anchors)