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';
   0 `1 |/ D& O% N) T4 `6 j
2. 
   7 p9 D. F  w4 _
3. const vp = await initViewport();
   1 e) d& \6 a1 C- ?/ |1 Z" L& C6 i2 b
4. 
   7 G6 _: d3 E0 L8 D6 V
5. bindViewportCSSVars(vp);

复制代码

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

1. bindViewportCSSVars(vp, key => {
   2 n: S7 x* _* E: _
2.   switch (key) {
   ; i  N2 v0 A8 e
3.     case 'height':
     ~, r/ V- A$ g' ~& U! _8 x
4.       return `--viewportHeight`;
   3 X. z6 f: c3 d9 x
5.     case 'width':
   . ^4 R, E9 H; K* o! F0 s$ v
6.       return `--viewportWidth`;
   
7.     case 'stable-height':
   
8.       return `--viewportStableHeight`;
   
9.     default:
   
10.       return `--void`;
    ! f* }0 r4 B8 k
11.   }
    
12. });

复制代码

bindThemeParamsCSSVars​

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

1. import { bindThemeParamsCSSVars, initThemeParams } from '@telegram-apps/sdk';
   
2. 
   5 i- G6 [, w: @# A" ?& w
3. const tp = initThemeParams();
   
4. 
   ; _9 I- P) H& P, A
5. bindThemeParamsCSSVars(tp);

复制代码

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

• --tg-theme-bg-color
• --tg-theme-secondary-bg-color
• --tg-theme-accent-text-color
• 等等
  4 `0 d+ `4 y; K

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

1. bindThemeParamsCSSVars(tp, key => {
   
2.   // Converts camel case to kebab case.
   3 F' X7 C: N1 f5 u
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';
   
2. 
   
3. const ma = initMiniApp();
   
4. const tp = initThemeParams();
   
5. 
   
6. bindMiniAppCSSVars(ma, tp);

复制代码

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

1. bindMiniAppCSSVars(ma, tp, key => {
   - o) Y3 D/ ^9 z6 c
2.   switch (key) {
   # u3 H1 _0 w6 w6 ?, b
3.     case 'bg':
   : G0 L) v: I5 H+ P0 y/ }
4.       return `--miniAppBg`;
   
5.     case 'header':
   
6.       return `--miniAppHeader`;
   
7.     default:
   
8.       return `--void`;
   
9.   }
   ) S& t8 @2 d+ n# m2 n
10. });

复制代码

# w  M! D9 g: I0 S3 i$ Q