@telegram-apps/sdk
Version:
TypeScript Source Development Kit for Telegram Mini Apps client application.
44 lines (43 loc) • 1.94 kB
TypeScript
import { GetCSSVarNameFn } from './types.js';
/**
* True if CSS variables are currently bound.
*/
export declare const _isCssVarsBound: import('@telegram-apps/signals').Signal<boolean>, isCssVarsBound: import('@telegram-apps/signals').Computed<boolean>;
/**
* Creates CSS variables connected with the current viewport.
*
* By default, created CSS variables names are following the pattern "--tg-theme-{name}", where
* {name} is a viewport property name converted from camel case to kebab case.
*
* Default variables:
* - `--tg-viewport-height`
* - `--tg-viewport-width`
* - `--tg-viewport-stable-height`
* - `--tg-viewport-content-safe-area-inset-top`
* - `--tg-viewport-content-safe-area-inset-bottom`
* - `--tg-viewport-content-safe-area-inset-left`
* - `--tg-viewport-content-safe-area-inset-right`
* - `--tg-viewport-safe-area-inset-top`
* - `--tg-viewport-safe-area-inset-bottom`
* - `--tg-viewport-safe-area-inset-left`
* - `--tg-viewport-safe-area-inset-right`
*
* Variables are being automatically updated if the viewport was changed.
*
* @param getCSSVarName - function, returning computed complete CSS variable name. The CSS
* variable will only be defined if the function returned non-empty string value.
* @returns Function to stop updating variables.
* @throws {FunctionNotAvailableError} The environment is unknown
* @throws {CSSVarsBoundError} CSS variables are already bound
* @throws {FunctionNotAvailableError} The parent component is not mounted
* @throws {FunctionNotAvailableError} The SDK is not initialized
* @example Using no arguments
* if (bindCssVars.isAvailable()) {
* bindCssVars();
* }
* @example Using custom CSS vars generator
* if (bindCssVars.isAvailable()) {
* bindCssVars(key => `--my-prefix-${key}`);
* }
*/
export declare const bindCssVars: import('../../wrappers/wrapSafe.js').SafeWrapped<(getCSSVarName?: GetCSSVarNameFn) => VoidFunction, false, never>;