Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@tombrewsviews @dariocravero
102 lines (71 sloc) 2.5 KB

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. Example: text Buy Now, color red
  • External: value comes from somewhere else (.view.logic.js, service, back-end). Example: text <, text <label

Internal properties

Views styling properties are based on regular CSS to lower the learning curve for front end developers.

Flexbox

Flexbox is a part of CSS standards. We use flexbox to manage layout composition of blocks, specifically, we use it to control:

  1. Sizing
  2. Alignment
  3. Distribution

If you're curious about you can read more about flexbox here.

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. Horizontals have flexDirection set to row, and Verticals to column.

All supported properties

Go to the list of all 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 text from Buy Now to an External property as a dynamic value, managed through slots.

before:

Text
  color #f7941e
  fontSize 20
  text Buy Now

after:

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 property:

Label
  text Get New!!!

Otherwise, if you just use Label view the default value will be used, so using:

Label

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. Mention @tom or @dario to make sure that we get your notifications.

You can’t perform that action at this time.