Skip to content

html mixins

Jump to bottom
Peter Klooster edited this page Mar 13, 2019 · 2 revisions

Mixins

Mixins are sections of code that get reused within AirController (vue). Each component describes which mixins they contain. Al features described for each mixin are also present in the components that inherits them.

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

Clone this wiki locally