主题参数 💠组件 负责 Telegram Mini Apps 主题参数。 安装在使用该组件之前,必须对其进行安装,以确保属性配置正确。 ,使用 mount 方法更新 isMounted 信号属性。 Variable : - import { themeParams } from '@telegram-apps/sdk';( P. w. x- o e! c( e' K$ j
% z% G! `% x( E* _, J! V1 p( I- themeParams.mount();
' M7 @0 Y- X7 C2 c5 b7 U: t6 q - themeParams.isMounted(); // true
复制代码Function : - import {1 {2 I4 Z5 e1 K( m, B3 G4 P# _
- mountThemeParams,5 g( P7 O9 q* ^+ r$ m g2 E
- isThemeParamsMounted,
3 l$ N; R) i* n/ M - } from '@telegram-apps/sdk';# u( g3 a. T& \0 y. E3 i
- , q) [; y1 ]9 D2 S
- mountThemeParams();
: y) w5 |+ M0 [8 F! X( @2 A1 ^ - isThemeParamsMounted(); // true
复制代码 6 I: ]0 a* W) V
要卸载,请使用 unmount 方法: Variable : - themeParams.unmount();
; p/ @) X E! q9 F2 R! v" O2 W - themeParams.isMounted(); // false
复制代码Functions : - import {% T* Y. I! }% o: I, g' `2 B
- unmountThemeParams,
' e0 H6 t2 n- D9 z, S2 R - isThemeParamsMounted,6 o' {9 B h! R- G+ m0 @
- } from '@telegram-apps/sdk';6 J0 K. h9 `9 v1 }8 P( C
( B! [1 ?8 J5 B. Y+ [4 ^. i) o4 V* o- unmountThemeParams();
1 Z* g( C: u& j1 B( n% c u - 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- themeParams.bindCssVars();
2 U$ T$ ]/ T: ` - // Creates CSS variables like:
2 M- C4 E3 ]4 U. u - // --tg-theme-button-color: #aabbcc
/ Q2 B2 I, I7 w5 ?% a - // --tg-theme-accent-text-color: #aabbcc
C; Y2 F4 U0 e. c - // --tg-theme-bg-color: #aabbcc
' u; w2 a5 r3 u: X0 s9 o5 [6 x: Z) o - // ...( W* A. ~( c4 S; b/ }
- 1 s" u9 y6 {0 a( W6 e2 O u4 r
- themeParams.bindCssVars(key => `--my-prefix-${key}`);
: P/ n$ `4 i2 A - // Creates CSS variables like:$ O1 L. | G2 f- R
- // --my-prefix-buttonColor: #aabbcc! L+ F% O' K# `
- // --my-prefix-accentTextColor: #aabbcc2 I* C" L, @% R" o/ @* L: }( j
- // --my-prefix-bgColor: #aabbcc
3 f7 u* @4 z- e/ I% N4 I0 ^ - // ...6 M) l6 M9 n6 n* i. K% Y
- % X) o5 ^- c% | ^6 T$ ~+ ^0 u
- // themeParams.isCssVarsBound() -> true
复制代码 Functions :! q: `% q, ?- x" l% C0 H6 m, z1 M$ [
- import {( K7 T; F0 W5 F: ]7 Q
- bindThemeParamsCssVars,
! h' L, J& N3 r& |5 U% `- H- k - isThemeParamsCssVarsBound,( j( \" f; }% k6 `6 s* j. I( w }
- } from '@telegram-apps/sdk';$ y5 p% A- n# Q7 ^
2 h" i1 {8 i6 t+ k* ]% ]- bindThemeParamsCssVars();& ]3 v/ c3 ]3 ?- b; V
- // Creates CSS variables like:
5 x6 p0 R# j$ Y/ L8 M! G - // --tg-theme-button-color: #aabbcc9 @% K$ \" W( V" a+ u
- // --tg-theme-accent-text-color: #aabbcc
( b, ^- Y' h% c. G" m - // --tg-theme-bg-color: #aabbcc
! O$ s3 j4 y# ], W' J - // ...
F; F3 M! r' B0 A* |! A8 F
$ ~, K7 q- M! u- \! h" A% W- bindThemeParamsCssVars(key => `--my-prefix-${key}`);3 q0 y) p+ M% ^# ?, p
- // Creates CSS variables like:$ H- h" i. e2 C; z, J+ q% v
- // --my-prefix-buttonColor: #aabbcc
3 J3 \: x4 f$ u% ]/ R/ I - // --my-prefix-accentTextColor: #aabbcc/ H4 a" F$ v6 v0 K8 l' y& R! D
- // --my-prefix-bgColor: #aabbcc
8 w5 f' M$ E2 \8 l - // ...% {! V" Q4 C$ \7 ?% `* @$ {
7 s) g$ j# N5 \# H- // isThemeParamsCssVarsBound() -> true
复制代码 属性
8 x( F; v9 b! a# b; Y7 T& xVariable :8 Y& E/ P$ R8 s. o: H, y$ ~
- themeParams.accentTextColor(); // RGB | undefined
) N/ g2 P. e( d( Y, u - themeParams.backgroundColor(); // RGB | undefined
% h( ?0 c/ r" U/ X2 Z, T - themeParams.buttonTextColor(); // RGB | undefined6 i8 E: `* |/ _: y* R h6 d
- themeParams.buttonColor(); // RGB | undefined: f r+ x- a) L3 \3 ]' b, x2 G
- themeParams.destructiveTextColor(); // RGB | undefined1 u* o$ p1 B! N! U
- themeParams.headerBackgroundColor(); // RGB | undefined9 A/ B% ?2 p/ E8 A$ \& k
- themeParams.hintColor(); // RGB | undefined! M/ x1 F/ |$ U1 u& [
- themeParams.linkColor(); // RGB | undefined
5 w( z9 r F7 ^) O - themeParams.subtitleTextColor(); // RGB | undefined5 _8 E( {& W" {: n
- themeParams.sectionBackgroundColor(); // RGB | undefined
1 u ]2 e" D- D z, w* p - themeParams.secondaryBackgroundColor(); // RGB | undefined
$ T/ t$ t5 a( K' A. A/ T7 E - themeParams.sectionSeparatorColor(); // RGB | undefined. f5 \: C8 D" P$ U1 @1 G1 `
- themeParams.sectionHeaderTextColor(); // RGB | undefined, w+ R! G1 k; J# z
- themeParams.textColor(); // RGB | undefined
/ s |$ Y3 A- E: b8 w - ' n+ Y( _ ^; h
- themeParams.state(); // Record<string, RGB>;
复制代码 Functions :
) {& @9 l7 w0 L. J' {5 J- import {
6 L O+ R7 U9 b- @ - themeParamsAccentTextColor,
1 \7 p) W+ ]0 q. P N9 } h3 _3 _ - themeParamsBackgroundColor,5 ~9 @( r( l+ [+ Y
- themeParamsButtonTextColor,: T, ?% @9 f+ y! C2 n
- themeParamsButtonColor,6 k% R( c' N4 R" m2 |
- themeParamsDestructiveTextColor,2 B6 f8 P- f1 D
- themeParamsHeaderBackgroundColor,
1 d4 t: B9 `7 j+ |7 a7 Z - themeParamsHintColor,) P/ j0 m; T9 g G4 S
- themeParamsLinkColor,$ K( ?/ _0 w6 n5 s- x2 {
- themeParamsSubtitleTextColor,
) N" v4 a, \" _1 C - themeParamsSectionBackgroundColor,
: j- o5 J" b8 X1 t- F. x - themeParamsSecondaryBackgroundColor,6 W5 N) z! `3 S& h$ Z
- themeParamsSectionSeparatorColor,
3 s, F9 g8 S* d) X: g. { - themeParamsSectionHeaderTextColor,6 N }: w5 {# f! `7 T
- themeParamsTextColor,
+ O/ S. M$ Y7 {; t+ m( D - themeParamsState,
: s+ b# e; H6 n3 R# b6 K5 a - } from '@telegram-apps/sdk';
" o' o [$ f5 W' m, C - 8 I" A; |1 ^( u& F8 e0 o
- themeParamsAccentTextColor(); // RGB | undefined
# F* x, n( v5 z/ `. a5 o - themeParamsBackgroundColor(); // RGB | undefined
# [, f. R, V8 i - themeParamsButtonTextColor(); // RGB | undefined5 ^& |6 H( d; K8 x2 R: W; h6 ]6 H* M
- themeParamsButtonColor(); // RGB | undefined
% W0 u0 P' q. H! ~ ^. a( w - themeParamsDestructiveTextColor(); // RGB | undefined$ `" k! K5 F, | D |1 l1 @9 G
- themeParamsHeaderBackgroundColor(); // RGB | undefined0 c6 h3 J3 h% F
- themeParamsHintColor(); // RGB | undefined0 C- o. o, L% C3 c8 u r. V
- themeParamsLinkColor(); // RGB | undefined
8 W, E$ _( K# H) j% K# J; Z9 n3 c - themeParamsSubtitleTextColor(); // RGB | undefined
, u! M# E" F0 }2 i4 w) M0 U* d! Q - themeParamsSectionBackgroundColor(); // RGB | undefined
- W- g6 ]# u1 x& M - themeParamsSecondaryBackgroundColor(); // RGB | undefined
# _; \3 [' b4 ~" W* o: h# I - themeParamsSectionSeparatorColor(); // RGB | undefined* F9 }& ^/ G& l. B
- themeParamsSectionHeaderTextColor(); // RGB | undefined" r5 x# _' Q1 p; a4 c+ o
- themeParamsTextColor(); // RGB | undefined
# Z+ {4 q5 e0 F. a8 @ - 5 o5 ?- H# y7 ^5 n+ J j
- 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 `
|