Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | CSS 变量

riyad

该软件包提供的实用程序可帮助开发人员自动管理组件 CSS 变量。 与 Telegram SDK 类似，@telegram-apps/sdk 允许开发人员设置全局 CSS 变量，将 连接到特定组件。bindViewportCSSVars​

bindViewportCSSVars 函数接受一个 Viewport 实例，并为以下属性创建 变量：height、width 和 stableHeight。

1. import { bindViewportCSSVars, initViewport } from '@telegram-apps/sdk';
   
2. 
   
3. const vp = await initViewport();
   7 q  b7 }0 ^3 t* Y
4. 
   - i5 W& R/ k( K# e4 e3 {
5. bindViewportCSSVars(vp);

复制代码

默认情况下，该函数会创建名为 的全局 CSS 变量：-tg-viewport-height、-tg-viewport-width 和 -tg-viewport-stable-height。 不过， 函数允许传递一个 CSS 变量名生成器，该生成器接受其中一个字符串值，每个 负责一个特定属性：width、height 或 stableHeight。

1. bindViewportCSSVars(vp, key => {
   
2.   switch (key) {
   * P  n3 g. T2 R3 |+ ^& L! J
3.     case 'height':
   
4.       return `--viewportHeight`;
   7 {& P) r# j( q$ L2 A% q8 F
5.     case 'width':
   
6.       return `--viewportWidth`;
   % H4 I+ s: V7 [& n; [# `
7.     case 'stable-height':
   
8.       return `--viewportStableHeight`;
   
9.     default:
   
10.       return `--void`;
    4 u/ |& E, M# d* k
11.   }
    0 P( t$ r2 ?8 E) m% b
12. });

复制代码

bindThemeParamsCSSVars​

该函数接受 ThemeParams 实例，并创建与主题参数相关的全局 CSS 变量。

1. import { bindThemeParamsCSSVars, initThemeParams } from '@telegram-apps/sdk';
   6 [+ @* V! D1 b, T' t
2. 
   * d3 G" L! c8 M/ I
3. const tp = initThemeParams();
   
4. 
   2 k. Z% t* \3 J; V4 S4 ^5 Q1 M
5. bindThemeParamsCSSVars(tp);

复制代码

默认情况下，该函数会将 ThemeParams 实例属性的驼峰字母大小写转换为短横线命名法大小写，并在 中添加前缀 --tg-theme-。 下面是创建变量的示例：

• --tg-theme-bg-color
• --tg-theme-secondary-bg-color
• --tg-theme-accent-text-color
• 等等
  . u! g+ W9 H' L& m6 B2 Y# n0 g

与 bindViewportCSSVars 函数类似，它允许传递一个接受 ThemeParams 实例属性的 CSS 变量名生成器。

1. bindThemeParamsCSSVars(tp, key => {
   & E* o  b  b+ _  a1 Z- y3 T% T  c
2.   // Converts camel case to kebab case.
   8 s9 I' {4 ~0 J7 B7 ~7 W- O5 \
3.   return `--${key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`;
   
4. });

复制代码

bindMiniAppCSSVars​

bindMiniAppCSSVars 函数接受一个 MiniApp 实例和 以及一个 ThemeParams 实例，创建与 MiniApp 实例相关的全局 CSS 变量。

1. import { bindMiniAppCSSVars, initMiniApp, initThemeParams } from '@telegram-apps/sdk';
   ( U8 k$ P/ R1 `" B* C4 q
2. 
   3 ?7 u! o2 |; }& M; {7 D
3. const ma = initMiniApp();
   7 L) q7 z: i; l! s4 q) e0 i$ G
4. const tp = initThemeParams();
   - g/ |; g5 ^% T9 a) @! Y8 I6 t
5. 
   5 q" s- {9 D) B1 [
6. bindMiniAppCSSVars(ma, tp);

复制代码

默认情况下，它会创建 --tg-bg-color 和 --tg-header-color 等变量。 不过，与所有 其他 CSS 变量绑定函数一样，它允许自定义生成的名称。 传递的生成器 接受其中一个关键字：bg 和 header，希望它能返回一个完整的 CSS 变量名。

1. bindMiniAppCSSVars(ma, tp, key => {
   
2.   switch (key) {
   
3.     case 'bg':
   # f- L, e' X- |6 l! y
4.       return `--miniAppBg`;
   
5.     case 'header':
   
6.       return `--miniAppHeader`;
   
7.     default:
   ' X2 ]3 @( o% j' V8 a
8.       return `--void`;
   - y, b% y: Y0 u' U8 S& @- Z- N, O' |
9.   }
   
10. });

复制代码

& O$ k3 ~* ]+ u6 `$ G  b% _% u
3 q0 d* \+ U7 ?: {