Vodacom/VodaPay Mini Program - Part 5: Quick Styling

A good friend of mine wanted to know how to style an App. Lets consider what we need to change to:

1. Change the color and text in the Title Bar
2. Change the color of a button

TitleBar

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "defaultTitle": "Rennay's App",
    "titleBarColor": "#ad5aed",  
    "transparentTitle": "none"      
  }
}

Button Styling

app.acss

page {
  background: #f7f7f7;
}

button {
  background-color: #4CAF50; /* Green */
}

Individual Styling

My friend is really picky about his styling. He would like to have buttons with different colours (apparently not an Apple user - Jonny Ive would never tolerate such frivolous styling).

This is how he could do it.

app.acss

page {
  background: #f7f7f7;
}

button {
  background-color: #4CAF50; /* Green */
}

.bluebutton {
  background-color: blue; /* Blue */
}

.redbutton {
  background-color: red; /* Blue */
}

index.axml

  <button type="primary" onTap="sayHello">Default</button>

  <button class="bluebutton" type="primary" onTap="sayHello">Blue Button</button>

  <button class="redbutton" type="primary" onTap="sayHello">Red Button</button>