Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.rebellapp.com/llms.txt

Use this file to discover all available pages before exploring further.

Use this API to customize the tab bar appearance including text colors, background color, and border style.

​
Parameters

PropertyTypeRequiredDescription
colorHexColorYesDefault text color on tabs
selectedColorHexColorYesSelected tab text color
backgroundColorHexColorYesTab bar background color
borderStyleStringYesBorder color: black or white only
successFunctionNoCallback on success
failFunctionNoCallback on failure
completeFunctionNoCallback that always executes

​
Code Example

​
Basic Usage

my.setTabBarStyle({
  color: '#7A7E83',
  selectedColor: '#3CC51F',
  backgroundColor: '#FFFFFF',
  borderStyle: 'black'
});

​
Dark Theme

my.setTabBarStyle({
  color: '#8E8E93',
  selectedColor: '#FFFFFF',
  backgroundColor: '#1C1C1E',
  borderStyle: 'black'
});

​
Brand Colors

my.setTabBarStyle({
  color: '#666666',
  selectedColor: '#108ee9',
  backgroundColor: '#FFFFFF',
  borderStyle: 'white'
});

​
Use Cases

Page({
  data: {
    isDarkMode: false
  },

  toggleTheme() {
    const isDark = !this.data.isDarkMode;
    this.setData({ isDarkMode: isDark });

    my.setTabBarStyle({
      color: isDark ? '#8E8E93' : '#7A7E83',
      selectedColor: isDark ? '#FFFFFF' : '#108ee9',
      backgroundColor: isDark ? '#1C1C1E' : '#FFFFFF',
      borderStyle: isDark ? 'black' : 'white'
    });
  }
});

function applyHolidayTheme() {
  my.setTabBarStyle({
    color: '#666666',
    selectedColor: '#C41E3A',
    backgroundColor: '#FFF8F0',
    borderStyle: 'white'
  });
}
IDE simulation is not supported for this API. Please test in the production environment.

my.hideTabBar

Hide the tab bar

my.switchTab

Navigate to a tab page