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

riyad

主题参数​

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

安装​

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

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   
2. 
   % z% G! `% x( E* _, J! V1 p( I
3. themeParams.mount();
   ' M7 @0 Y- X7 C2 c5 b7 U: t6 q
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   
2.   mountThemeParams,
   
3.   isThemeParamsMounted,
   3 l$ N; R) i* n/ M
4. } from '@telegram-apps/sdk';
   
5. 
   
6. mountThemeParams();
   : y) w5 |+ M0 [8 F! X( @2 A1 ^
7. isThemeParamsMounted(); // true

复制代码

要卸载，请使用 unmount 方法：

Variable :

1. themeParams.unmount();
   ; p/ @) X  E! q9 F2 R! v" O2 W
2. themeParams.isMounted(); // false

复制代码

Functions :

1. import {
   
2.   unmountThemeParams,
   ' e0 H6 t2 n- D9 z, S2 R
3.   isThemeParamsMounted,
   
4. } from '@telegram-apps/sdk';
   
5. 
   ( B! [1 ?8 J5 B. Y+ [4 ^. i) o4 V* o
6. unmountThemeParams();
   1 Z* g( C: u& j1 B( n% c  u
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

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

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

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

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

4 C1 H9 _  G! z$ }Variable :
% S' i$ c& h6 `% [$ L" w( b+ W

1. themeParams.bindCssVars();
   2 U$ T$ ]/ T: `
2. // Creates CSS variables like:
   2 M- C4 E3 ]4 U. u
3. // --tg-theme-button-color: #aabbcc
   / Q2 B2 I, I7 w5 ?% a
4. // --tg-theme-accent-text-color: #aabbcc
     C; Y2 F4 U0 e. c
5. // --tg-theme-bg-color: #aabbcc
   ' u; w2 a5 r3 u: X0 s9 o5 [6 x: Z) o
6. // ...
   
7. 
   
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
   : P/ n$ `4 i2 A
9. // Creates CSS variables like:
   
10. // --my-prefix-buttonColor: #aabbcc
    
11. // --my-prefix-accentTextColor: #aabbcc
    
12. // --my-prefix-bgColor: #aabbcc
    3 f7 u* @4 z- e/ I% N4 I0 ^
13. // ...
    
14. 
    
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :

1. import {
   
2.   bindThemeParamsCssVars,
   ! h' L, J& N3 r& |5 U% `- H- k
3.   isThemeParamsCssVarsBound,
   
4. } from '@telegram-apps/sdk';
   
5. 
   2 h" i1 {8 i6 t+ k* ]% ]
6. bindThemeParamsCssVars();
   
7. // Creates CSS variables like:
   5 x6 p0 R# j$ Y/ L8 M! G
8. // --tg-theme-button-color: #aabbcc
   
9. // --tg-theme-accent-text-color: #aabbcc
   ( b, ^- Y' h% c. G" m
10. // --tg-theme-bg-color: #aabbcc
    ! O$ s3 j4 y# ], W' J
11. // ...
      F; F3 M! r' B0 A* |! A8 F
12. 
    $ ~, K7 q- M! u- \! h" A% W
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    
14. // Creates CSS variables like:
    
15. // --my-prefix-buttonColor: #aabbcc
    3 J3 \: x4 f$ u% ]/ R/ I
16. // --my-prefix-accentTextColor: #aabbcc
    
17. // --my-prefix-bgColor: #aabbcc
    8 w5 f' M$ E2 \8 l
18. // ...
    
19. 
    7 s) g$ j# N5 \# H
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
8 x( F; v9 b! a# b; Y7 T& xVariable :

1. themeParams.accentTextColor(); // RGB | undefined
   ) N/ g2 P. e( d( Y, u
2. themeParams.backgroundColor(); // RGB | undefined
   % h( ?0 c/ r" U/ X2 Z, T
3. themeParams.buttonTextColor(); // RGB | undefined
   
4. themeParams.buttonColor(); // RGB | undefined
   
5. themeParams.destructiveTextColor(); // RGB | undefined
   
6. themeParams.headerBackgroundColor(); // RGB | undefined
   
7. themeParams.hintColor(); // RGB | undefined
   
8. themeParams.linkColor(); // RGB | undefined
   5 w( z9 r  F7 ^) O
9. themeParams.subtitleTextColor(); // RGB | undefined
   
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    1 u  ]2 e" D- D  z, w* p
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    $ T/ t$ t5 a( K' A. A/ T7 E
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    
14. themeParams.textColor(); // RGB | undefined
    / s  |$ Y3 A- E: b8 w
15. 
    
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :
) {& @9 l7 w0 L. J' {5 J

1. import {
   6 L  O+ R7 U9 b- @
2.   themeParamsAccentTextColor,
   1 \7 p) W+ ]0 q. P  N9 }  h3 _3 _
3.   themeParamsBackgroundColor,
   
4.   themeParamsButtonTextColor,
   
5.   themeParamsButtonColor,
   
6.   themeParamsDestructiveTextColor,
   
7.   themeParamsHeaderBackgroundColor,
   1 d4 t: B9 `7 j+ |7 a7 Z
8.   themeParamsHintColor,
   
9.   themeParamsLinkColor,
   
10.   themeParamsSubtitleTextColor,
    ) N" v4 a, \" _1 C
11.   themeParamsSectionBackgroundColor,
    : j- o5 J" b8 X1 t- F. x
12.   themeParamsSecondaryBackgroundColor,
    
13.   themeParamsSectionSeparatorColor,
    3 s, F9 g8 S* d) X: g. {
14.   themeParamsSectionHeaderTextColor,
    
15.   themeParamsTextColor,
    + O/ S. M$ Y7 {; t+ m( D
16.   themeParamsState,
    : s+ b# e; H6 n3 R# b6 K5 a
17. } from '@telegram-apps/sdk';
    " o' o  [$ f5 W' m, C
18. 
    
19. themeParamsAccentTextColor(); // RGB | undefined
    # F* x, n( v5 z/ `. a5 o
20. themeParamsBackgroundColor(); // RGB | undefined
    # [, f. R, V8 i
21. themeParamsButtonTextColor(); // RGB | undefined
    
22. themeParamsButtonColor(); // RGB | undefined
    % W0 u0 P' q. H! ~  ^. a( w
23. themeParamsDestructiveTextColor(); // RGB | undefined
    
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    
25. themeParamsHintColor(); // RGB | undefined
    
26. themeParamsLinkColor(); // RGB | undefined
    8 W, E$ _( K# H) j% K# J; Z9 n3 c
27. themeParamsSubtitleTextColor(); // RGB | undefined
    , u! M# E" F0 }2 i4 w) M0 U* d! Q
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    - W- g6 ]# u1 x& M
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    # _; \3 [' b4 ~" W* o: h# I
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    
32. themeParamsTextColor(); // RGB | undefined
    # Z+ {4 q5 e0 F. a8 @
33. 
    
34. themeParamsState(); // Record<string, RGB>;

复制代码