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

riyad

主题参数​

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

安装​

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

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   % x  G6 A* [' c3 |& V( \/ D4 M
2. 
   1 ~* T0 {( R) V5 p+ X% `
3. themeParams.mount();
   
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   7 b- h" w: q2 F1 J* t9 ^$ j( S
2.   mountThemeParams,
   
3.   isThemeParamsMounted,
   
4. } from '@telegram-apps/sdk';
   9 M# |1 b& }/ ?( M! w! {1 G+ n
5. 
   
6. mountThemeParams();
   
7. isThemeParamsMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. themeParams.unmount();
   ( v' [4 C! C1 d8 j) ^% t) k
2. themeParams.isMounted(); // false

复制代码

Functions :

1. import {
   7 n4 _2 J& ?' y- A3 A) j
2.   unmountThemeParams,
   
3.   isThemeParamsMounted,
   ' ?4 x4 X$ P, d+ n/ o
4. } from '@telegram-apps/sdk';
   
5. 
   7 o' Z! O' M* k5 x2 h& p3 \) d
6. unmountThemeParams();
   4 `# f& G0 G; W5 k* Y4 g4 \
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

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

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

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

• 将数值转换为 kebab 大小写。
• 预置 --tg-theme- 前缀。
  

! Q0 @  `7 K) I3 I2 i; s" R( `- U1 |Variable :

1. themeParams.bindCssVars();
   ( s% ]( q( c( w3 R: U% _! \1 ~
2. // Creates CSS variables like:
   
3. // --tg-theme-button-color: #aabbcc
   
4. // --tg-theme-accent-text-color: #aabbcc
   
5. // --tg-theme-bg-color: #aabbcc
   9 q( a4 _+ g* v+ ^% }- p
6. // ...
   
7. 
   
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
     Z! g) D! \; D1 j
9. // Creates CSS variables like:
   2 y! a. c% }0 C+ D! r
10. // --my-prefix-buttonColor: #aabbcc
    
11. // --my-prefix-accentTextColor: #aabbcc
    
12. // --my-prefix-bgColor: #aabbcc
    
13. // ...
    
14. 
    
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :
$ S% F3 x4 X3 F) l# i! o

1. import {
   
2.   bindThemeParamsCssVars,
   ( [5 a: R: ]  b/ ], j) {4 `
3.   isThemeParamsCssVarsBound,
   % K: U4 [1 T3 e% N# M" ]) H
4. } from '@telegram-apps/sdk';
   : n- g( `- r6 x- ?" ]4 s3 L! g
5. 
   $ i7 t' H  f( j5 a$ H
6. bindThemeParamsCssVars();
   1 B4 ]5 I* `* ]! b
7. // Creates CSS variables like:
   4 U) ~5 [; K, A+ ?1 [
8. // --tg-theme-button-color: #aabbcc
     L! w/ k) ^  M' v7 E
9. // --tg-theme-accent-text-color: #aabbcc
   " Q$ }: Z3 \1 B& j9 @
10. // --tg-theme-bg-color: #aabbcc
    & l: W% v; ^# c2 c/ e8 `( b4 `+ i
11. // ...
    
12. 
    
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    5 E$ C7 {1 G9 ~2 D" V  [+ Y/ ?% k
14. // Creates CSS variables like:
    ' n- D! L! X' S% W! r  {& S
15. // --my-prefix-buttonColor: #aabbcc
    
16. // --my-prefix-accentTextColor: #aabbcc
    
17. // --my-prefix-bgColor: #aabbcc
    ) y$ Q: `! D* _
18. // ...
    
19. 
    
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
: E/ q* j' H1 @  a0 @: @Variable :

1. themeParams.accentTextColor(); // RGB | undefined
   
2. themeParams.backgroundColor(); // RGB | undefined
   
3. themeParams.buttonTextColor(); // RGB | undefined
   
4. themeParams.buttonColor(); // RGB | undefined
   3 B+ L8 M6 V5 Q0 V- y$ v- W3 A
5. themeParams.destructiveTextColor(); // RGB | undefined
   1 U3 ^  T/ P0 y+ u/ k& J( p! y
6. themeParams.headerBackgroundColor(); // RGB | undefined
   
7. themeParams.hintColor(); // RGB | undefined
   ' J# L& K6 g& f" q+ p4 d0 f  A: T
8. themeParams.linkColor(); // RGB | undefined
   
9. themeParams.subtitleTextColor(); // RGB | undefined
   
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    # Q% k% W7 `1 v7 O: o
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    ) g3 Y% `8 G' L3 t. z$ S$ r$ F
14. themeParams.textColor(); // RGB | undefined
    6 @! X! [. d4 F+ a: N) k" L
15. 
    
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :
( M% x% U7 C$ V) u

1. import {
   
2.   themeParamsAccentTextColor,
   
3.   themeParamsBackgroundColor,
   
4.   themeParamsButtonTextColor,
   
5.   themeParamsButtonColor,
   $ A) Z7 [. X* h- T8 M
6.   themeParamsDestructiveTextColor,
   
7.   themeParamsHeaderBackgroundColor,
   + h9 V+ U# r, o
8.   themeParamsHintColor,
   ) a9 t: v7 X2 w! L) K4 J4 ^
9.   themeParamsLinkColor,
   ; j* j: _: G  B- {
10.   themeParamsSubtitleTextColor,
    + u. N; j7 F" ?- z/ Y
11.   themeParamsSectionBackgroundColor,
    
12.   themeParamsSecondaryBackgroundColor,
    
13.   themeParamsSectionSeparatorColor,
    
14.   themeParamsSectionHeaderTextColor,
    
15.   themeParamsTextColor,
    
16.   themeParamsState,
    
17. } from '@telegram-apps/sdk';
    
18. 
    
19. themeParamsAccentTextColor(); // RGB | undefined
    
20. themeParamsBackgroundColor(); // RGB | undefined
    " n5 O. n; p+ A# ?, f  e; k
21. themeParamsButtonTextColor(); // RGB | undefined
    " i. f: i2 s/ g( e& h
22. themeParamsButtonColor(); // RGB | undefined
    
23. themeParamsDestructiveTextColor(); // RGB | undefined
    
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    4 u/ B2 \' Y' ?# w2 c2 a# {
25. themeParamsHintColor(); // RGB | undefined
    
26. themeParamsLinkColor(); // RGB | undefined
    
27. themeParamsSubtitleTextColor(); // RGB | undefined
    : y- f2 @1 B3 y; s1 E
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    ' e- H+ b( Z! H/ a' b# l' _' w$ e
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    . o0 b" r) M9 T9 ]) W
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    
32. themeParamsTextColor(); // RGB | undefined
    3 c5 p' F# h6 a9 n7 \
33. 
    
34. themeParamsState(); // Record<string, RGB>;

复制代码

3 E: e8 S* P" Y- H+ z