# Adding Inspector Properties
## Adding properties to your component
Any `public` marked property that is a valid serializable type in Unity will show up in the inspector for an `AirshipBehaviour` component
```typescript
export default class ExampleAirshipBehaviour extends AirshipBehaviour {
public exampleString = "Hello, World!";
public exampleBoolean = true;
public exampleNumber = 10;
}
```
Woo, properties!
If you do not want your properties exposed, you can just specify them as `private` or `protected`. You can also use the `@NonSerializable` attribute decorator (and use `@SerializeField` to show private/protected fields to the inspector!)
### Adding references to Unity and Airship components
You can add references to Unity Objects in the same way as values. If you might not attach a reference in the inspector you should define it as optional with a `?`
export default class ExampleAirshipBehaviour extends AirshipBehaviour {
// Assume these will be set in inspector
public exampleGameObject: GameObject;
public exampleImage: Image;
public exampleButton: Button;
// Possibly not set in inspector
public exampleTransform?: Transform;
public exampleCanvas?: Canvas;
}
References to unity objects - nice!
{% hint style="info" %}
when referencing an object for Instantiation you must use a Game Object reference. You are not able to directly reference a component until it is instantiated in the scene.
{% endhint %}
#### Adding AirshipBehaviour reference properties
Just like our Unity Object references, we can also add references to other `AirshipBehaviour` components. Any defined class that extends `AirshipBehaviour` can be used as a reference.
```typescript
import AnotherAirshipBehaviour from "./AnotherAirshipBehaviour";
export default class ExampleAirshipBehaviour extends AirshipBehaviour {
public anotherAirshipBehaviour!: AnotherAirshipBehaviour;
}
```
References to another AirshipBehaviour!
### Organizing your properties
You can use attributes to stylize our inspector properties using decorators:
```typescript
export default class ExampleAirshipBehaviour extends AirshipBehaviour {
@Header("Basic Properties")
public stringValue = "Hello, World";
public numberValue = 1;
@Header("Constrained properties")
@Range(0, 100) // show a range of 0 to 100 in the inspector
public numberRangeValue = 10;
@Multiline(5) // The number here is the number of lines, and is optional
public mulitlineStringValue = "This has multiple\nLines!";
@Spacing(10) // Create some extra space before the next section
@Header("This has a space of 10 above it")
@Tooltip("This is a tooltip for the property") // explicit tooltips
public tooltippedValue = 0;
}
```
### Optionally showing properties
You may want to only show certain properties only \*if\* a condition is met with other properties.
This can be done with `ShowIf` and `HideIf`.
```typescript
export default class ExampleAirshipBehaviour extends AirshipBehaviour {
public toggleSetting = false;
@ShowIf("toggleSetting")
public valueShowOnToggle = "Hello, world!";
}
```
Property not shown if toggleSetting is false
Property shown if toggleSetting is true
You can also use the *match* versions of these decorators to show values on certain values, such as with enums:
```typescript
export enum ExampleTargetType {
Position,
Transform,
}
export default class ExampleAirshipBehaviour extends AirshipBehaviour {
public targetType: ExampleTargetType;
@ShowIf("targetType", ExampleTargetType.Position)
public targetPosition: Vector3;
@ShowIf("targetType", ExampleTargetType.Transform)
public targetTransform: Transform;
}
```
When Position is selected, it uses the Vector3 targetPosition
When Transform is selected, uses the Transform targetTransform
### JSDoc Tooltips
In Airship we support *implicit JSDoc* tooltips - which are generated by JSDoc comments:
{% hint style="warning" %}
**NOTE**: JSDoc Code blocks, inline code blocks, tables, hyperlinks and images are not supported in the editor and will not show up in the tooltips.
{% endhint %}
```typescript
export default class ExampleBehaviour extends AirshipBehaviour {
/**
* A value that's documented by JSDoc
*/
public value = 100;
}
```
Not only does this have the benefit of being documented in your editor:
The JSDoc tooltip in the editor
But Airship will also generate a tooltip in-editor with the same formatting:
The tooltip generated in the editor
Examples of formatting in the tooltips:
```typescript
export default class ExampleBehaviour extends AirshipBehaviour {
/**
* ## This is a heading
* **Some bold** and _italicized_ text.
*
* - List item 1
* - List item 2
*/
public value = 100;
}
```
Formatted tooltips, just like in the code editor!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.airship.gg/typescript/airshipbehaviour/adding-inspector-properties.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.