次级按钮

负责 Telegram 小程序次级按钮的💠组件。

检查支持

要检查当前 Telegram 小程序版本是否支持辅助按钮，请使用 isSupported 方法：

Variable

import { secondaryButton } from '@telegram-apps/sdk';

secondaryButton.isSupported(); // boolean

Functions

import { isSecondaryButtonSupported } from '@telegram-apps/sdk';

isSecondaryButtonSupported(); // boolean

挂载

在使用此组件之前，需要将其挂载，以便与正确配置的属性一起工作。 在使用该组件之前，有必要将其安装到配置正确的 属性中。 为此，请使用 mount 方法。 它将更新 isMounted 信号属性。 它将更新 isMounted 信号属性。

Variable

import { secondaryButton } from '@telegram-apps/sdk';

if (secondaryButton.mount.isAvailable()) {
  secondaryButton.mount();
  secondaryButton.isMounted(); // true
}

Functions

import {
  mountSecondaryButton,
  isSecondaryButtonMounted,
} from '@telegram-apps/sdk';

if (mountSecondaryButton.isAvailable()) {
  mountSecondaryButton();
  isSecondaryButtonMounted(); // true
}

要卸载，请使用 unmount 方法：

Variable

secondaryButton.unmount();
secondaryButton.isMounted(); // false

Functions

import {
  unmountSecondaryButton,
  isSecondaryButtonMounted,
} from '@telegram-apps/sdk';

unmountSecondaryButton();
isSecondaryButtonMounted(); // false

WARNING

该组件的属性取决于 Mini App 和 Theme Params 组件的值。 。 具体来说，次级按钮使用 Mini App 的 bottomBarBgColor 和一些主题参数颜色。 在使用次级按钮之前，请确保将这些组件已挂载 。

设置属性

要更新按钮属性，请使用 setParams 方法。 它接受一个带有可选 属性的对象，每个属性负责各自的按钮特性。

反过来，调用该方法会更新 ，如 backgroundColor, hasShineEffect, isVisible, isEnabled, isLoaderVisible, position, state, textColor 和 text。

Variable

if (secondaryButton.setParams.isAvailable()) {
  secondaryButton.setParams({
    backgroundColor: '#000000',
    hasShineEffect: true,
    isEnabled: true,
    isLoaderVisible: true,
    isVisible: true,
    position: 'top',
    text: 'My text',
    textColor: '#ffffff'
  });
  secondaryButton.backgroundColor(); // '#000000'
  secondaryButton.hasShineEffect(); // true
  secondaryButton.isEnabled(); // true
  secondaryButton.isLoaderVisible(); // true
  secondaryButton.isVisible(); // true
  secondaryButton.position(); // 'top'
  secondaryButton.text(); // 'My text'
  secondaryButton.textColor(); // '#ffffff'

  secondaryButton.state();
  // {
  //   backgroundColor: '#000000',
  //   hasShineEffect: true,
  //   isActive: true,
  //   isLoaderVisible: true,
  //   isVisible: true,
  //   position: 'top',
  //   text: 'My text',
  //   textColor: '#ffffff'
  // }
}

Functions

import {
  setSecondaryButtonParams,
  secondaryButtonBackgroundColor,
  secondaryButtonHasShineEffect,
  isSecondaryButtonVisible,
  isSecondaryButtonEnabled,
  isSecondaryButtonLoaderVisible,
  secondaryButtonState,
  secondaryButtonTextColor,
  secondaryButtonText,
  secondaryButtonPosition,
} from '@telegram-apps/sdk';

if (setSecondaryButtonParams.isAvailable()) {
  setSecondaryButtonParams({
    backgroundColor: '#000000',
    hasShineEffect: true,
    isEnabled: true,
    isLoaderVisible: true,
    isVisible: true,
    position: 'top',
    text: 'My text',
    textColor: '#ffffff'
  });
  secondaryButtonBackgroundColor(); // '#000000'
  secondaryButtonHasShineEffect(); // true
  isSecondaryButtonEnabled(); // true
  isSecondaryButtonLoaderVisible(); // true
  isSecondaryButtonVisible(); // true
  secondaryButtonPosition(); // 'top'
  secondaryButtonText(); // 'My text'
  secondaryButtonTextColor(); // '#ffffff'

  secondaryButtonState();
  // {
  //   backgroundColor: '#000000',
  //   hasShineEffect: true,
  //   isActive: true,
  //   isLoaderVisible: true,
  //   isVisible: true,
  //   position: 'top',
  //   text: 'My text',
  //   textColor: '#ffffff'
  // }
}

跟踪点击

要添加按钮点击监听器，请使用 onClick 方法。 它返回一个函数，用于移除绑定的 监听器。 或者，您也可以使用 offClick 方法。

Variable

if (secondaryButton.onClick.isAvailable()) {
  function listener() {
    console.log('Clicked!');
  }

  const offClick = secondaryButton.onClick(listener);
  offClick();
  // or
  secondaryButton.onClick(listener);
  secondaryButton.offClick(listener);
}

Functions

import {
  onSecondaryButtonClick,
  offSecondaryButtonClick,
} from '@telegram-apps/sdk';

if (onSecondaryButtonClick.isAvailable()) {
  function listener() {
    console.log('Clicked!');
  }

  const offClick = onSecondaryButtonClick(listener);
  offClick();
  // or
  onSecondaryButtonClick(listener);
  offSecondaryButtonClick(listener);
}