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

riyad

主题参数​

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

安装​

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

Variable :

1. import { themeParams } from '@telegram-apps/sdk';
   ) x! c- o% g  |+ ^. s: ~3 }$ C
2. 
   
3. themeParams.mount();
   2 I9 e! ?- A; i8 h% w6 O( k
4. themeParams.isMounted(); // true

复制代码

Function :

1. import {
   8 `3 E, f& `+ i+ v5 h7 |5 I
2.   mountThemeParams,
   / |% K; b4 |- N* n- M# z( ]6 g
3.   isThemeParamsMounted,
   
4. } from '@telegram-apps/sdk';
   0 ?2 J" i3 @+ t: x. f) u, q
5. 
   
6. mountThemeParams();
   
7. isThemeParamsMounted(); // true

复制代码

. c1 \* Q7 e( Z* Q/ r" V4 H

要卸载，请使用 unmount 方法：

Variable :

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

复制代码

Functions :

1. import {
   7 V* G9 ^! I5 @1 K* z$ |
2.   unmountThemeParams,
   
3.   isThemeParamsMounted,
     h' q1 L" {$ `
4. } from '@telegram-apps/sdk';
   
5. 
   
6. unmountThemeParams();
   
7. isThemeParamsMounted(); // false

复制代码

绑定 CSS 变量​

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

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

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

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

Variable :

1. themeParams.bindCssVars();
   
2. // Creates CSS variables like:
   : _" h; ]% _6 Q* n' \
3. // --tg-theme-button-color: #aabbcc
   ( C( R2 N! b. T* @- z7 t
4. // --tg-theme-accent-text-color: #aabbcc
   
5. // --tg-theme-bg-color: #aabbcc
   3 R, ~  J( f9 t, v0 W) N3 a
6. // ...
   
7. 
   " Z4 b8 S4 K6 {9 C0 u
8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
   
9. // Creates CSS variables like:
   & b+ j) r* V& ]  Q4 B% g
10. // --my-prefix-buttonColor: #aabbcc
    ( ?# _3 g! [( m2 o$ h3 t
11. // --my-prefix-accentTextColor: #aabbcc
    : ?/ ^  h% N& |3 p
12. // --my-prefix-bgColor: #aabbcc
    6 R4 a# ]" L8 }0 z- {
13. // ...
    2 }" a! W2 b$ t0 K/ j. U
14. 
    
15. // themeParams.isCssVarsBound() -> true

复制代码

Functions :

1. import {
   8 c' ^" Y0 K: _) T2 e% T/ p
2.   bindThemeParamsCssVars,
   
3.   isThemeParamsCssVarsBound,
   ) y+ F5 l( E# [  Y: X& m, ]
4. } from '@telegram-apps/sdk';
   
5. 
   
6. bindThemeParamsCssVars();
   ( V: ]6 g/ H5 z- k6 c, q8 Q
7. // Creates CSS variables like:
   
8. // --tg-theme-button-color: #aabbcc
   * H1 F2 K) D0 c! i
9. // --tg-theme-accent-text-color: #aabbcc
   / Y2 t% a* m, @8 _1 g! n- K
10. // --tg-theme-bg-color: #aabbcc
    
11. // ...
    
12. 
    , k. X# @5 w2 g7 E# m* Y* Y+ e! H
13. bindThemeParamsCssVars(key => `--my-prefix-${key}`);
    
14. // Creates CSS variables like:
    ! i4 S9 T, i  X+ I/ W8 [
15. // --my-prefix-buttonColor: #aabbcc
    4 z" e5 f' `. J7 V( ~/ F5 C
16. // --my-prefix-accentTextColor: #aabbcc
    
17. // --my-prefix-bgColor: #aabbcc
    8 X/ [$ m( P1 L# L
18. // ...
    ) H8 g' J' m7 h
19. 
    
20. // isThemeParamsCssVarsBound() -> true

复制代码

属性
$ r0 g+ c* z/ b2 g7 BVariable :
/ Q  O/ @' N" F5 J

1. themeParams.accentTextColor(); // RGB | undefined
   + E% x6 o$ @: k/ ~; }" S
2. themeParams.backgroundColor(); // RGB | undefined
   
3. themeParams.buttonTextColor(); // RGB | undefined
   # H4 A' @$ }. d  z- c# g% i
4. themeParams.buttonColor(); // RGB | undefined
   8 }& v* h+ d  s# [
5. themeParams.destructiveTextColor(); // RGB | undefined
   2 G3 t* @/ g/ G- A0 d
6. themeParams.headerBackgroundColor(); // RGB | undefined
   
7. themeParams.hintColor(); // RGB | undefined
   
8. themeParams.linkColor(); // RGB | undefined
   
9. themeParams.subtitleTextColor(); // RGB | undefined
   1 v; i, y$ @8 C% p
10. themeParams.sectionBackgroundColor(); // RGB | undefined
    
11. themeParams.secondaryBackgroundColor(); // RGB | undefined
    
12. themeParams.sectionSeparatorColor(); // RGB | undefined
    1 ~9 _+ ~4 N" N7 c2 u
13. themeParams.sectionHeaderTextColor(); // RGB | undefined
    
14. themeParams.textColor(); // RGB | undefined
    
15. 
    
16. themeParams.state(); // Record<string, RGB>;

复制代码

Functions :

1. import {
   9 G' l$ E+ {4 k; t. C
2.   themeParamsAccentTextColor,
   
3.   themeParamsBackgroundColor,
   
4.   themeParamsButtonTextColor,
   4 {7 T- w* K# v5 p% G3 j0 j  o
5.   themeParamsButtonColor,
   6 H, s1 k+ e# P: x
6.   themeParamsDestructiveTextColor,
   3 X. T* G  e- D, s# g( {' ^6 D
7.   themeParamsHeaderBackgroundColor,
   
8.   themeParamsHintColor,
   4 V- E6 \3 k9 {( N* m( K
9.   themeParamsLinkColor,
   ) {, _* p5 k: \% h% B7 h" O
10.   themeParamsSubtitleTextColor,
    0 v9 `9 g1 J0 Q5 ^
11.   themeParamsSectionBackgroundColor,
    
12.   themeParamsSecondaryBackgroundColor,
    : J- C6 r% A! @! q% t
13.   themeParamsSectionSeparatorColor,
    
14.   themeParamsSectionHeaderTextColor,
    
15.   themeParamsTextColor,
    
16.   themeParamsState,
    / Q# I' J' C. x% ^
17. } from '@telegram-apps/sdk';
    ' N9 j/ P4 Z# }8 |, n! Y5 |
18. 
    6 H# F# a; g* r
19. themeParamsAccentTextColor(); // RGB | undefined
    8 e$ `2 ?' S. g; _0 `: y1 x
20. themeParamsBackgroundColor(); // RGB | undefined
    
21. themeParamsButtonTextColor(); // RGB | undefined
    
22. themeParamsButtonColor(); // RGB | undefined
    3 x$ G! X4 \  R2 ]
23. themeParamsDestructiveTextColor(); // RGB | undefined
    
24. themeParamsHeaderBackgroundColor(); // RGB | undefined
    
25. themeParamsHintColor(); // RGB | undefined
    
26. themeParamsLinkColor(); // RGB | undefined
    
27. themeParamsSubtitleTextColor(); // RGB | undefined
    
28. themeParamsSectionBackgroundColor(); // RGB | undefined
    3 g5 S- y3 N" X- D
29. themeParamsSecondaryBackgroundColor(); // RGB | undefined
    1 t1 m( O( m$ D" d; Z' a
30. themeParamsSectionSeparatorColor(); // RGB | undefined
    ! G- O5 Z" B( z
31. themeParamsSectionHeaderTextColor(); // RGB | undefined
    
32. themeParamsTextColor(); // RGB | undefined
      ?# v0 F9 f& {3 X  v
33. 
    
34. themeParamsState(); // Record<string, RGB>;

复制代码

) Q  q) ]1 Y7 z/ y
" i; }) u" D9 C1 Z9 W