Want to change up your app's appearance? That’s called “styling,” and there are several things you can do using the Honeycode Builder to make your app “pop.”
Amazon Honeycode apps default to a neutral color palette with accessibility-compliant buttons and links, and system fonts that are optimized for performance across mobile and desktop devices.
Styling toolbar
Everything you need to style your app is located in the Builder toolbar.
- Select the object you want to style.
- Go to the toolbar, and click the style option you want.
- See how the style looks in both your desktop and mobile apps. Changes update in real-time!
Builder's tip: Only applicable styling options will be clickable. For example, because screens do not support styling, the buttons will be disabled in the toolbar.
Text
You can change the appearance of text in a number of ways:
- Font family
- Size
- Color
- Style (bold , italic , underlined)
- Alignment (right, center, left)
To change the appearance of text, simply select the content box or button that you’d like to change, and edit from the toolbar.
Background
You can easily change the background color of many objects in your app:
- Lists
- Blocks
- Segments
- Content boxes
- Buttons
Background colors changes will only be applied to the selected object.
Vertical Space
If you want to create some visual space in your layout, you can insert a content box that will act as a spacer. There’s a bit of a trick to it though, since Honeycode will only render a content box in your app IF it contains content.
Here’s how to do it:
- Add a content box.
- Type something so Honeycode will know to display it in your app.
- The font size you use will determine how tall the space is, so use a large font to create a lot of space or vice versa.
- Change the font color to match the background color of the content box. So if there is no background color, then change the font to white.
| Was this article helpful? |
|---|
- Yes
- No
0 voters