Telegram 小程序 | TypeScript @telegram-apps/sdk @2.x | 组件 | 主题参数

riyad

主题参数​

💠组件 负责 Telegram Mini Apps 主题参数。

安装​

在使用该组件之前，必须对其进行安装，以确保属性配置正确。 ，使用 mount 方法更新 isMounted 信号属性。

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   
2. 
   % x7 f7 |* U+ g& _  l) G: ]
3. themeParams.mount();
   
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   - E6 P* b- X: N/ r7 h% M. }4 }
2.   mountThemeParams,
   * ^1 N, Z1 G. p
3.   isThemeParamsMounted,
   % Q  [! W1 }1 [' V3 |( g2 ^
4. } from '@telegram-apps/sdk';
   & Z1 O- C" A* F: }. k
5. 
   
6. mountThemeParams();
   
7. isThemeParamsMounted(); // true

复制代码

/ z% t/ A2 Y. v8 z0 i1 h* n5 K

要卸载，请使用 unmount 方法：

Variable :

1. themeParams.unmount();
   
2. themeParams.isMounted(); // false

复制代码

Functions :

1. import {
   ! Z" l( D5 V& @- o5 G# A
2.   unmountThemeParams,
   
3.   isThemeParamsMounted,
   7 P( R4 K" V* Y4 _+ U
4. } from '@telegram-apps/sdk';
   
5. 
   
6. unmountThemeParams();
   
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

该作用域允许通过 CSS 变量公开其属性。

要创建新的 CSS 变量，请使用 bindCssVars 方法。 调用时，它会更新 isCssVarsBound 信号属性。

该方法可选择接受一个函数，该函数接收驼峰格式的主题调色板键， 返回 CSS 变量名。 默认情况下，该方法使用这些规则转换调色板键：

• 将数值转换为 kebab 大小写。
• 预置 --tg-theme- 前缀。
  " F" l. N8 m, T/ L: a& Q

! y8 r; s! E+ N7 TVariable :

1. themeParams.bindCssVars();
   
2. // Creates CSS variables like:
   
3. // --tg-theme-button-color: #aabbcc
   + `1 F* u- G9 G
4. // --tg-theme-accent-text-color: #aabbcc
   
5. // --tg-theme-bg-color: #aabbcc
   
6. // ...
   $ q! ]1 F! Q# w2 b7 l
7. 
   6 r/ x6 `' `1 {
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
   
9. // Creates CSS variables like:
   $ B1 E* z/ p- v# U" f6 [# V
10. // --my-prefix-buttonColor: #aabbcc
    
11. // --my-prefix-accentTextColor: #aabbcc
    9 x: A+ R. k! x7 b$ |+ V
12. // --my-prefix-bgColor: #aabbcc
    
13. // ...
    
14. 
    
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :

1. import {
   ; I/ ^, B8 \& k- x
2.   bindThemeParamsCssVars,
     u; x( y9 R8 S6 u1 W- d# h
3.   isThemeParamsCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   " k" B1 x" _" u/ J) x5 t: G
5. 
   6 A2 j' V  D$ t/ \6 k6 X
6. bindThemeParamsCssVars();
   
7. // Creates CSS variables like:
   
8. // --tg-theme-button-color: #aabbcc
   
9. // --tg-theme-accent-text-color: #aabbcc
   8 K2 E; l. a  y5 t  J6 u; J
10. // --tg-theme-bg-color: #aabbcc
    2 D0 v5 O# `0 O
11. // ...
    
12. 
    ' S0 @5 s2 d8 Y$ {/ U
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    
14. // Creates CSS variables like:
    - S" S! A2 G: V+ X; r
15. // --my-prefix-buttonColor: #aabbcc
    
16. // --my-prefix-accentTextColor: #aabbcc
    
17. // --my-prefix-bgColor: #aabbcc
    - o9 c6 C. o3 x: K9 e. i1 C
18. // ...
    
19. 
    " Q5 j0 T( g( O
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
Variable :

1. themeParams.accentTextColor(); // RGB | undefined
   , D$ ]' o$ n# {5 r& k1 l5 h4 L
2. themeParams.backgroundColor(); // RGB | undefined
   
3. themeParams.buttonTextColor(); // RGB | undefined
   
4. themeParams.buttonColor(); // RGB | undefined
   ) c( u1 m. i- a  Z' Q
5. themeParams.destructiveTextColor(); // RGB | undefined
   ) O% L4 z! e5 A
6. themeParams.headerBackgroundColor(); // RGB | undefined
   
7. themeParams.hintColor(); // RGB | undefined
   
8. themeParams.linkColor(); // RGB | undefined
   & Y# l6 [9 f/ s) t+ F( {* H
9. themeParams.subtitleTextColor(); // RGB | undefined
   8 M6 L5 N; y# d6 l* R# I) i
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    4 [6 V9 z0 W5 J3 k# l0 O6 _
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    & G. Z4 T. ^. b$ V: l
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    
14. themeParams.textColor(); // RGB | undefined
    # o$ q. B8 f0 `$ U% o
15. 
    
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :

1. import {
   - \% j( |  D4 C6 @# X0 o0 w
2.   themeParamsAccentTextColor,
   8 y0 D/ F. _6 _  y/ M6 v. C9 d
3.   themeParamsBackgroundColor,
   1 b1 {2 l8 u+ \
4.   themeParamsButtonTextColor,
   : ~$ w% m( u$ p/ Z8 T
5.   themeParamsButtonColor,
   
6.   themeParamsDestructiveTextColor,
   ( N" n+ g7 Z. l' N: w) N; ^% |
7.   themeParamsHeaderBackgroundColor,
   2 W5 {  Q6 I3 n$ V
8.   themeParamsHintColor,
   * m! `: |+ f; V# }/ r- {6 V
9.   themeParamsLinkColor,
   
10.   themeParamsSubtitleTextColor,
    
11.   themeParamsSectionBackgroundColor,
    , T# m( F) [& T4 h; h; P  t. D
12.   themeParamsSecondaryBackgroundColor,
    
13.   themeParamsSectionSeparatorColor,
    $ m. U, L& k6 _
14.   themeParamsSectionHeaderTextColor,
    2 n) S& {0 q$ i: f
15.   themeParamsTextColor,
    
16.   themeParamsState,
    % _  }: d8 @) Z3 r2 u
17. } from '@telegram-apps/sdk';
    
18. 
    ; l6 K4 P5 ]6 ~6 @
19. themeParamsAccentTextColor(); // RGB | undefined
    
20. themeParamsBackgroundColor(); // RGB | undefined
    
21. themeParamsButtonTextColor(); // RGB | undefined
    ( e0 I. c6 x+ |8 }: F4 v: _
22. themeParamsButtonColor(); // RGB | undefined
    
23. themeParamsDestructiveTextColor(); // RGB | undefined
    
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    , h7 r! k2 N0 H0 j' ]$ k
25. themeParamsHintColor(); // RGB | undefined
    
26. themeParamsLinkColor(); // RGB | undefined
    0 [' J8 r% b  V1 Q- o4 ^1 }
27. themeParamsSubtitleTextColor(); // RGB | undefined
    4 }( H* D" x5 y" j
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    & C! V6 i7 o+ t' x
32. themeParamsTextColor(); // RGB | undefined
    
33. 
    6 a6 S) d9 N2 K
34. themeParamsState(); // Record<string, RGB>;

复制代码

& o6 R# _' I! ]2 O, d: n0 U/ Y

7 ^  L% x2 I7 S) k6 _