Your Airkit journey starts here

Inspector Style Overrides

Each element on a card view has a set of style properties that it inherits from its class. Even if you don’t specify a class, the element has a default class specification. For each variant there are a set of style properties you can modify. The inspector is where those overrides are done.

In this lesson we will go through overriding some basic styles in the styles override experience.

Starting Out

Start by creating a new app in Airkit Studio and adding a second label to the initial card view. When done you screen should look something like this:

Image

Setting The Class

Select the label and let's change the class. In the inspector on the right (refer to this article for information on basic layout of the studio in App Builder). Select the “Style” tab. Change the Style Variant to largeHeadline.

Image

Notice how the size of the text is affected by your change. It is now inheriting all of its properties from the largeHeadline class.

Override The Styles

While largeHeadline is a good base class for what our text if we want to modify this specific instance of text, we can do this by overriding the style. Below the Style Variant selector you will see a bunch of editable properties on the label. We can make our text bold and italic by selecting those options under the font section. Your Window should now look like this:

Image

This modification is only going to affect this instance of the largeHeadline label. To demonstrate this, select your second label and set it’s variant class to largeHeadline. Your window should look like this:

Image

Notice how the second label is not bold or italic. We have overridden the property on specific label. We have not redefined the class. If we want to change the properties on both labels, we could modify the variant in the Theme Builder.