Composer
Composer
Changelog
Bugs and feature requests
AppGyver Academy
Home
Changelog
Start Learning Composer Pro
Tutorials
AppGyver x Xano — Building a No-code Books App
Power-up videos
Power-up: Working with Objects
Power-up: Offline Storage
Power-up: Conditional Renderer
Power-up: Custom Fonts
Power-up: Lists & Repeats
Power-up: Debugging Variables
Power-up: Grid/Table layout
Power-up: Sorting and Filtering data
Power-up: Transforming Data
Power-up: Forms and Form Validation
Power-up: Custom Flow Functions
Power-up: Conditional Styling
Power-up: Triggering Logic Flows from Variable Changes
Power-up: Grouping lists
Power-up: Create a Star Rating Component
Power-up: Editing items in a list
Power-up: Uploading files
Power-up: Search bar with sugggestions
Tutorial articles
Core Lessons - Complete Guide to Composer Pro
Quick onboarding videos
Academy Articles
Bugs and feature requests
Using Composer Pro
Introduction
The App Builder
User Interface
Creating user interfaces
Components
Navigation
Variable editor
Theme editor
App logic
App logic overview
Variables
Device sensors
Debugging
Events
Custom JavaScript
Data
Configuring data resources
REST API direct integration
AppGyver Cloud Storage
Authentication
Messaging
Push notifications
Publishing / Distribution
Build Service & required assets
Distributing your app
Reference
Component gallery
Flow functions reference
Formula functions reference
Page properties reference
Sensor variables reference
System variables reference
Style properties reference
Policies & Guidelines
Issue reporting guidelines
Powered by GitBook

Power-up: Conditional Styling

Learn how to use conditional styling in Composer Pro. This power-up includes examples of changing the color of a button when pressed and styling your list so that every other item has a gray background.

The formula functions used in this video

Changing a color property based on the true/false value of a page variable: IF(pageVars.completed, "#050A30", "#C6ECFF")

Adding alternating background colors to list items: IF(IS_EVEN(INDEX_OF(pageVars.listOfCourses, current)), "#e4e4e4", "#ffffff")

​

tags: buttons, colors, lists, zebra

Previous
Power-up: Custom Flow Functions
Next
Power-up: Triggering Logic Flows from Variable Changes
Last updated 4 weeks ago