Capacitor Native Tab Bar

English

Возможности

• Нативный UI — UITabBar на iOS, BottomNavigationView на Android
• Гибкие иконки — из ресурсов ({id}.png, {id}_active.png) или base64
• Цвета — цвета лейбла для активного/неактивного состояния
• Safe area — учитывает нижнюю безопасную зону (вырез, жесты)
• Web fallback — работает в браузере при разработке

Установка

npm install capacitor-native-tabbar
# или
yarn add capacitor-native-tabbar

Синхронизация нативных проектов:

npx cap sync

Быстрый старт

import { CapTabbar } from 'capacitor-native-tabbar';

// Инициализировать (создать) таб-бар
CapTabbar.init({
  tabs: [
    { id: 'home', label: 'Главная' },
    { id: 'search', label: 'Поиск' },
    { id: 'profile', label: 'Профиль' },
  ],
  selectedId: 'home',
  label_color: '#000000',
  label_color_active: '#007AFF',
});

// Слушать смену вкладки
CapTabbar.addListener('tabChange', (event) => {
  console.log('Выбрана вкладка:', event.tabId);
});

// Получить текущее состояние
const { initialized, visible, activeTabId } = await CapTabbar.getState();

// Скрыть / показать UI (таб-бар остаётся в памяти)
CapTabbar.hide();
CapTabbar.show();

// Полностью удалить таб-бар
CapTabbar.destroy();

Иконки

Два варианта (base64 имеет приоритет):

Вариант 1: Base64

{
  id: 'fav',
  label: 'Избранное',
  base64_icon: 'iVBORw0KGgo...',
  base64_active_icon: 'iVBORw0KGgo...',
}

Вариант 2: Ресурсы нативного проекта

Положите иконки по id таба:

| Таб (id) | Обычная | Активная | |----------|-------------|------------------| | home | home.png | home_active.png|

Android: android/app/src/main/res/drawable/
iOS: ios/App/App/Assets.xcassets/ — Image Sets home, home_active

Поддерживаются PNG и vector drawable (.xml) на Android. Пробелы и дефисы в id заменяйте подчёркиванием в имени файла. При отсутствии иконки показывается заглушка.

Цвета лейбла

CapTabbar.init({
  tabs,
  selectedId: 'home',
  label_color: '#666666',        // неактивный
  label_color_active: '#007AFF', // активный
});

API

init(options)

Инициализировать (создать) таб-бар с заданной конфигурацией.

init(options: InitOptions) => Promise<void>

destroy()

Полностью удалить таб-бар.

destroy() => Promise<void>

show()

Показать UI таб-бара (сделать видимым). Таб-бар должен быть инициализирован.

show() => Promise<void>

hide()

Скрыть UI таб-бара (сделать невидимым). Таб-бар остаётся в памяти.

hide() => Promise<void>

setSelectedTab(options)

Программно переключить вкладку.

setSelectedTab(options: SetSelectedTabOptions) => Promise<void>

getState()

Вернуть текущее состояние: инициализирован ли, виден ли таб-бар и id активной вкладки.

getState() => Promise<{ initialized: boolean, visible: boolean, activeTabId: string }>

addListener('tabChange', listenerFunc)

Подписка на смену вкладки при нажатии пользователя.

addListener(eventName: 'tabChange', listenerFunc: (event: TabChangeEvent) => void) => Promise<{ remove: () => Promise<void> }>

Интерфейсы

InitOptions: tabs, selectedId, label_color?, label_color_active?, android?

AndroidTabbarStyleOptions (только Android):

• background_color? — цвет фона таббара (hex).
• elevation_dp? — elevation (тень) в dp. Если не задано — по умолчанию темы/платформы. 0 отключает elevation.
• ripple_color? — цвет ripple/нажатия (hex).
• icon_tint_inactive? — tint иконок для неактивного состояния (hex).
• icon_tint_active? — tint иконок для активного состояния (hex).
• top_divider_color? — цвет верхнего разделителя (hex). Если задан — добавляется тонкая линия сверху таббара.
• top_divider_height_dp? — высота разделителя в dp (по умолчанию 1dp, если divider включён).

TabItem: id, label, base64_icon?, base64_active_icon?

SetSelectedTabOptions: tabId

GetStateResult: initialized, visible, activeTabId

TabChangeEvent: tabId

Лицензия

MIT © Anton Seagull