html mixins

Mixins

Mixins are sections of code that get reused within AirController (vue)

Base Mixin

The base mixin is used in all AirController vue objects. It holds all base functionality.

---

The base mixin will add the following classes to the object:

[component-name] & [component-name]--[id || name]

<air-button name="jump"></air-button> // air-button & air-button--jump
<air-axis name="move"></air-axis> // air-axis & air-axis--move
<air-axis id="left" name="move"></air-axis> // air-axis & air-axis--left

---

All components using the Base mixin have the following properties:

Property	Type	Required|Default	Description
name	String	True	The name of this object
id	String	false	Can be used to overwrite the value placed behind -- in the class.

Anchor Mixin

The anchor mixin helps you position objects on your controller. For the most part you don't need the worry about positioning your elements, AirController will handle the css needed to position elements.

---

The anchor mixin will add the following classes to the object when an anchor is set:

anchor & anchor--[anchor]

<air-button name="jump" anchor="center-center"></air-button> // anchor & anchor--center-center

---

All components using the Anchor mixin have the following properties:

Property	Type	Required|Default	Description
anchor	String	False	The anchor used to position this element. Values should be in the y-x format. Aka: top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right

Premium Mixin

The premium mixin allows certain components to block their action if the users are not marked as premium/hero.

---

The premium mixin will add the following classes to the object when premium-only is set:

premium-only & (premium-only--disabled)

// With a premium device
<air-button name="jump" anchor="center-center" premium-only></air-button> // premium-only

// With a non-premium device
<air-button name="jump" anchor="center-center" premium-only></air-button> // premium-only & premium-only--disabled

---

All components using the Premium mixin have the following properties:

Property	Type	Required|Default	Description
premium-only	Boolean	False (false)	If set the component's action will be blocked