English 简体中文 繁體中文 한국 사람 日本語 Deutsch русский بالعربية TÜRKÇE português คนไทย french

简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE คนไทย Français русский

回答

收藏

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

开源社区 开源社区 7083 人阅读 | 0 人回复 | 2025-02-25

主题参数

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

安装

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

Variable :

  1. import { themeParams } from '@telegram-apps/sdk';( P. w. x- o  e! c( e' K$ j

  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 {1 {2 I4 Z5 e1 K( m, B3 G4 P# _
  2.   mountThemeParams,5 g( P7 O9 q* ^+ r$ m  g2 E
  3.   isThemeParamsMounted,
    3 l$ N; R) i* n/ M
  4. } from '@telegram-apps/sdk';# u( g3 a. T& \0 y. E3 i
  5. , q) [; y1 ]9 D2 S
  6. mountThemeParams();
    : y) w5 |+ M0 [8 F! X( @2 A1 ^
  7. isThemeParamsMounted(); // true
复制代码
6 I: ]0 a* W) V

要卸载,请使用 unmount 方法:

Variable :

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

Functions :

  1. import {% T* Y. I! }% o: I, g' `2 B
  2.   unmountThemeParams,
    ' e0 H6 t2 n- D9 z, S2 R
  3.   isThemeParamsMounted,6 o' {9 B  h! R- G+ m0 @
  4. } from '@telegram-apps/sdk';6 J0 K. h9 `9 v1 }8 P( C

  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- 前缀。: W' ^% K" D4 E* }! p1 {5 T

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. // ...( W* A. ~( c4 S; b/ }
  7. 1 s" u9 y6 {0 a( W6 e2 O  u4 r
  8. themeParams.bindCssVars(key => `--my-prefix-${key}`);
    : P/ n$ `4 i2 A
  9. // Creates CSS variables like:$ O1 L. |  G2 f- R
  10. // --my-prefix-buttonColor: #aabbcc! L+ F% O' K# `
  11. // --my-prefix-accentTextColor: #aabbcc2 I* C" L, @% R" o/ @* L: }( j
  12. // --my-prefix-bgColor: #aabbcc
    3 f7 u* @4 z- e/ I% N4 I0 ^
  13. // ...6 M) l6 M9 n6 n* i. K% Y
  14. % X) o5 ^- c% |  ^6 T$ ~+ ^0 u
  15. // themeParams.isCssVarsBound() -> true
复制代码
Functions :! q: `% q, ?- x" l% C0 H6 m, z1 M$ [
  1. import {( K7 T; F0 W5 F: ]7 Q
  2.   bindThemeParamsCssVars,
    ! h' L, J& N3 r& |5 U% `- H- k
  3.   isThemeParamsCssVarsBound,( j( \" f; }% k6 `6 s* j. I( w  }
  4. } from '@telegram-apps/sdk';$ y5 p% A- n# Q7 ^

  5. 2 h" i1 {8 i6 t+ k* ]% ]
  6. bindThemeParamsCssVars();& ]3 v/ c3 ]3 ?- b; V
  7. // Creates CSS variables like:
    5 x6 p0 R# j$ Y/ L8 M! G
  8. // --tg-theme-button-color: #aabbcc9 @% K$ \" W( V" a+ u
  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}`);3 q0 y) p+ M% ^# ?, p
  14. // Creates CSS variables like:$ H- h" i. e2 C; z, J+ q% v
  15. // --my-prefix-buttonColor: #aabbcc
    3 J3 \: x4 f$ u% ]/ R/ I
  16. // --my-prefix-accentTextColor: #aabbcc/ H4 a" F$ v6 v0 K8 l' y& R! D
  17. // --my-prefix-bgColor: #aabbcc
    8 w5 f' M$ E2 \8 l
  18. // ...% {! V" Q4 C$ \7 ?% `* @$ {

  19. 7 s) g$ j# N5 \# H
  20. // isThemeParamsCssVarsBound() -> true
复制代码
属性
8 x( F; v9 b! a# b; Y7 T& xVariable :8 Y& E/ P$ R8 s. o: H, y$ ~
  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 | undefined6 i8 E: `* |/ _: y* R  h6 d
  4. themeParams.buttonColor(); // RGB | undefined: f  r+ x- a) L3 \3 ]' b, x2 G
  5. themeParams.destructiveTextColor(); // RGB | undefined1 u* o$ p1 B! N! U
  6. themeParams.headerBackgroundColor(); // RGB | undefined9 A/ B% ?2 p/ E8 A$ \& k
  7. themeParams.hintColor(); // RGB | undefined! M/ x1 F/ |$ U1 u& [
  8. themeParams.linkColor(); // RGB | undefined
    5 w( z9 r  F7 ^) O
  9. themeParams.subtitleTextColor(); // RGB | undefined5 _8 E( {& W" {: n
  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. f5 \: C8 D" P$ U1 @1 G1 `
  13. themeParams.sectionHeaderTextColor(); // RGB | undefined, w+ R! G1 k; J# z
  14. themeParams.textColor(); // RGB | undefined
    / s  |$ Y3 A- E: b8 w
  15. ' n+ Y( _  ^; h
  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,5 ~9 @( r( l+ [+ Y
  4.   themeParamsButtonTextColor,: T, ?% @9 f+ y! C2 n
  5.   themeParamsButtonColor,6 k% R( c' N4 R" m2 |
  6.   themeParamsDestructiveTextColor,2 B6 f8 P- f1 D
  7.   themeParamsHeaderBackgroundColor,
    1 d4 t: B9 `7 j+ |7 a7 Z
  8.   themeParamsHintColor,) P/ j0 m; T9 g  G4 S
  9.   themeParamsLinkColor,$ K( ?/ _0 w6 n5 s- x2 {
  10.   themeParamsSubtitleTextColor,
    ) N" v4 a, \" _1 C
  11.   themeParamsSectionBackgroundColor,
    : j- o5 J" b8 X1 t- F. x
  12.   themeParamsSecondaryBackgroundColor,6 W5 N) z! `3 S& h$ Z
  13.   themeParamsSectionSeparatorColor,
    3 s, F9 g8 S* d) X: g. {
  14.   themeParamsSectionHeaderTextColor,6 N  }: w5 {# f! `7 T
  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. 8 I" A; |1 ^( u& F8 e0 o
  19. themeParamsAccentTextColor(); // RGB | undefined
    # F* x, n( v5 z/ `. a5 o
  20. themeParamsBackgroundColor(); // RGB | undefined
    # [, f. R, V8 i
  21. themeParamsButtonTextColor(); // RGB | undefined5 ^& |6 H( d; K8 x2 R: W; h6 ]6 H* M
  22. themeParamsButtonColor(); // RGB | undefined
    % W0 u0 P' q. H! ~  ^. a( w
  23. themeParamsDestructiveTextColor(); // RGB | undefined$ `" k! K5 F, |  D  |1 l1 @9 G
  24. themeParamsHeaderBackgroundColor(); // RGB | undefined0 c6 h3 J3 h% F
  25. themeParamsHintColor(); // RGB | undefined0 C- o. o, L% C3 c8 u  r. V
  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* F9 }& ^/ G& l. B
  31. themeParamsSectionHeaderTextColor(); // RGB | undefined" r5 x# _' Q1 p; a4 c+ o
  32. themeParamsTextColor(); // RGB | undefined
    # Z+ {4 q5 e0 F. a8 @
  33. 5 o5 ?- H# y7 ^5 n+ J  j
  34. themeParamsState(); // Record<string, RGB>;
复制代码
. @$ v, {( [+ i% w2 v
; }" h5 T6 N0 o! l* L! N6 {3 Q
2 x. b. T/ n7 x0 S2 ^2 `
分享到:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则