Use properties to style blocks
Properties define the style and type of all Blocks used in a view.
There are two kinds of properties:
- Internal: value is defined in the same .view file.
text Buy Now,
- External: value comes from somewhere else (.view.logic.js, service, back-end).
Views styling properties are based on regular CSS to lower the learning curve for front end developers.
Flexbox is a part of CSS standards. We use flexbox to manage layout composition of blocks, specifically, we use it to control:
See the quirks for a few cases in which we've spotted flex wasn't cutting it for us.
Every block, by default, has
display flex property enabled.
flexDirection set to
row, and Verticals to
All supported properties
External properties, also called Slots
Say, you want to change the label of a button dynamically depending on the View
where the button is being used?
To achieve that, add
< before the value, like here
text < value
Here's an example of how to turn a Internal property
Buy Now to an External
property as a dynamic value, managed through
Text color #f7941e fontSize 20 text Buy Now
Text color #f7941e fontSize 20 text < Buy Now
Let's call that view
Label.view and save it in the project folder.
When you use it in another view, pass any other value using the same name of the
Label text Get New!!!
Otherwise, if you just use
Label view the default value will be used, so using:
will result in showing
Text block with
Buy Now value in your final build.
You can also keep passing it too as a different slot, but it's usually not advised to give slots custom names:
Text color #f7941e fontSize 20 text <label Buy Now
The reason why we don't advise to use custom slot names is because you will have to remember what you called it, and that introduces unnecessary complexity:
Label label Buy Now
Reach out with questions via our Slack Questions Channel.
@dario to make sure that we get your notifications.