小组件
此页面将概述所有可用的组件，帮助您进一步为玩家自定义奖励体验！
☸ 转盘令牌组件
转盘令牌组件可以使用以下HTML标签嵌入到您网站的任何位置：
添加后，组件会自动显示当前用户拥有可用令牌的所有转盘。
转盘组件示例
转盘组件示例
行为
- 组件为每个转盘显示一个图标。
- 如果用户对同一个转盘拥有多个令牌，转盘图标上会显示一个徽章，指示可用令牌的数量。
- 品牌定制（颜色、字体等）目前不支持通过Fast Track CRM进行，但可以通过下面概述的CSS变量实现。
转盘组件只有在转盘令牌已被领取且准备转动时才会显示！
布局定制
默认情况下，组件水平显示转盘图标，图标之间有10px的间隔。您可以使用以下CSS变量调整布局方向和间距：
| 变量名 | 默认值 | 可能的值 |
|---|---|---|
--ft-wheel-tokens-direction | row | row, column |
--ft-wheel-tokens-gap | 10px | 任何有效的CSS长度值 |
转盘图标样式
您可以使用以下CSS变量控制转盘图标的大小：
| 变量名 | 默认值 | 可能的值 |
|---|---|---|
--ft-wheel-tokens-icon-width | 50px | 任何有效的CSS长度值 |
--ft-wheel-tokens-icon-height | 50px（如果未设置则默认为图标宽度） | 任何有效的CSS长度值 |
徽章样式
当转盘有超过一个可用令牌时，会显示徽章。此徽章的外观可以使用以下CSS变量进行定制：
| 变量名 | 默认值 | 可能的值 |
|---|---|---|
--ft-wheel-tokens-badge-background-color | #ff0000 | 任何有效的CSS颜色 |
--ft-wheel-tokens-badge-text-color | #ffffff | 任何有效的CSS颜色 |
--ft-wheel-tokens-badge-border-radius | 50%（圆形徽章） | 任何有效的CSS长度值 |
--ft-wheel-tokens-badge-text-size | 12px | 任何有效的CSS长度值 |
--ft-wheel-tokens-badge-height | 20px | 任何有效的CSS长度值 |
--ft-wheel-tokens-badge-width | 20px（如果未设置则默认为徽章高度） | 任何有效的CSS长度值 |