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';
   9 F; J: b9 q$ o% i+ m2 A
2. 
   
3. const vp = await initViewport();
   + z( d  _( L( a! m0 q1 f
4. 
   * C  v& t, v# n) k( n; [! M, T! J
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) {
     q3 G6 b8 Z! W- r  E! e
3.     case 'height':
   
4.       return `--viewportHeight`;
   * x+ s/ J' \, i; B( \4 f$ b
5.     case 'width':
   
6.       return `--viewportWidth`;
   
7.     case 'stable-height':
   
8.       return `--viewportStableHeight`;
     g$ R7 O" S0 E
9.     default:
   
10.       return `--void`;
    8 q% j4 `( s0 W
11.   }
    # ~8 ]  `! d! H! x6 R% I
12. });

复制代码

bindThemeParamsCSSVars​

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

1. import { bindThemeParamsCSSVars, initThemeParams } from '@telegram-apps/sdk';
   
2. 
   9 ~$ e3 e( ]* ^- J) z
3. const tp = initThemeParams();
   
4. 
   
5. bindThemeParamsCSSVars(tp);

复制代码

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

• --tg-theme-bg-color
• --tg-theme-secondary-bg-color
• --tg-theme-accent-text-color
• 等等
  

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

1. bindThemeParamsCSSVars(tp, key => {
   / @" u! N& Y+ j( |1 [% Q
2.   // Converts camel case to kebab case.
   
3.   return `--${key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}`;
   + v/ @: P% J6 f5 i8 m) j
4. });

复制代码

bindMiniAppCSSVars​

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

1. import { bindMiniAppCSSVars, initMiniApp, initThemeParams } from '@telegram-apps/sdk';
   ; s4 i, j0 d5 Y0 ~7 i7 ^8 I3 a- U
2. 
   
3. const ma = initMiniApp();
   0 y/ K( z8 N9 q' E
4. const tp = initThemeParams();
   
5. 
   
6. bindMiniAppCSSVars(ma, tp);

复制代码

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

1. bindMiniAppCSSVars(ma, tp, key => {
   ! U4 k3 r4 m3 N$ r/ Z% }
2.   switch (key) {
   
3.     case 'bg':
   
4.       return `--miniAppBg`;
   
5.     case 'header':
   
6.       return `--miniAppHeader`;
   . a0 G( W) B  {* d
7.     default:
   
8.       return `--void`;
   
9.   }
   - }" L2 _. C8 ^8 v: n- Q6 W, F
10. });

复制代码