QB apps contain components to add to a screen such as
These components are plugins and need to be present in the app to be able to use the component.
Power cell plugins are then used to add cells to a component. All the styling of a cell is contained within UI Builder, QB apps do not use SDK styling keys for colors, fonts etc.
There are currently 4 Power Cells that lend themselves to certain component types. The plugins must be present in an app to be able to use them
- Cell 1 Mobile - Image sits above text. Typically used with a Grid or Horizontal List component.
- Cell 2 Mobile - Image sits beside text. Typically used with a List component.
- Cell 3 Mobile - Image sits behind text. Typically used with a Hero component
- Cell Info Mobile - specifically for headers and footers and decorative components in a group
1. Add the Component and Cell Mobile plugins to your app
2. Select Cell Style Builder Framework for your layout
Make sure when you first create your layout to select the "Cell Style Builder" option for the framework. You can't go back and select this option to an already created layout.
3. Add the plugin to your layout
Go to the Cell Styles Tab in UIBuilder
This tab only appears in UI Builder if you have done step 2 above.
Click on the "CELL STYLES" tab, and click on "+ New Cell Style" button in the bottom-left corner
Select which ever Power Cell you want to use e.g. Cell 1 Mobile
4. Rename your instance of the plugin
Whilst still in the Cell Styles tab of UI Builder select the Quick Brick Master Cell instance you have just added in step 4.
On the UI Builder right hand panel click the 3 dots by the name Cell 1 Mobile and select Edit Info
5. Configure your cell using the settings in UI Builder right hand panel.
6. Use your Power Cell to replace a standard component’s cell design
In any screen add your Components of Grid, List, Hero etc. with data sources attached
Then go to Cell Styles (bottom right) and click select
You will now see a list of any Power Cells you have created in steps 3 through 9
Select the one you want and click save in UI Builder
You have now replaced the standard cell design with your Power Cell.
Go and check it out on a device
Repeat for any other component
7. Create and use another Power Cell style in the same layout
If you need another instance of the Power Cell with different styling settings then repeat steps 3 to 6 (giving it a different name of course)
In this layout example 3 different Power Cells each with different style settings have all be created from the single Quick Brick Master Cell plugin installed in the app.