# 翻牌器
翻牌器组件用于在页面中展示实时数据的变化，在初始化或数据刷新时页面该组件展示数据会连续变动到新的数据。
在高级页面设计器中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886508.png)，从"文本 \> 通用"中，拖拽"翻牌器"组件到画布中，如[图1]所示。
图1翻牌器   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125217.png "点击放大")
#### 属性
在属性中，设置翻牌器组件的位置、边框、背景等。
图2属性   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285013.png "点击放大")
- 基础
  - 组件标题：设置组件的标题。
  
  - 组件名称：设置组件的名称。
   
- 位置
  - 距离左端：组件到页面左侧的距离，单位为px。
  
  - 距离顶端：组件到页面顶部的距离，单位为px。
  
  - 宽度：组件的宽度，单位为px。
  
  - 高度：组件的高度，单位为px。
  
  - 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是"1"，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为"0"。
  
  - 自适应高度：组件的高度是否随宽度改变。
   
- 边框：设置组件的边框样式，如全边框或角边框。
- 背景
  - 样式：设置背景的样式，如普通、居中、拉伸等。
  
  - 图片链接：背景图片URL。
  
  - 颜色：设置背景的颜色。
   
 
#### 高级设置
选中翻牌器组件，单击鼠标右键选择"高级设置"，可设置翻牌器的样式和动作。
图3翻牌器高级设置   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285017.png "点击放大")
图4普通类型效果   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285005.gif "点击放大")
图5滚动类型效果   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285009.gif "点击放大")
- 样式设置
  - 数字大小：数字文本的大小。
  
  - 数字颜色：数字文本的颜色。
  
  - 数字背景色：数字所占格子的背景颜色。
  
  - 数字间隔(px)：数字之间的间隔距离，取值范围为4\~30px。
  
  - 卡片内边距：整体数字和组件边框的内边距。
  
  - 字体粗细：数字文本字体的粗细。
  
  - 显示千分逗号：数值是否显示千分位逗号分隔符。
  
  - 显示标题：是否显示翻牌器组件的标题。
  
  - 标题内容：翻牌器组件的标题内容。当打开"显示标题"开关时，该参数才会出现。
  
  - 标题对齐方式：翻牌器组件的标题对齐方式。当打开"显示标题"开关时，该参数才会出现。
  
  - 标题颜色：翻牌器组件的标题文本颜色。当打开"显示标题"开关时，该参数才会出现。
  
  - 标题大小：翻牌器组件的标题文本大小。当打开"显示标题"开关时，该参数才会出现。
  
  - 显示单位：是否显示翻牌器数字的单位。
  
  - 单位内容：翻牌器数字的单位文本内容。当打开"显示单位"开关时，该参数才会出现。
  
  - 单位颜色：翻牌器数字的单位文本颜色。当打开"显示单位"开关时，该参数才会出现。
  
  - 单位大小：翻牌器数字的单位文本大小。当打开"显示单位"开关时，该参数才会出现。
   
- 动画设置
  - 动画类型：翻牌器数字动画类型，支持"普通类型"、"滚动类型"和"翻牌类型"。
  
  - 动画时间(ms)：动画播放的时长，单位为ms。
  
  - 单次变换间隔(ms)：动画单次变换的间隔时长，单位为ms。
   
#### 数据
在数据中，设置组件的数据来源。更多介绍，请参见[如何调用后台接口](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0192.html)。
图6设置组件数据   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960285001.png "点击放大")
#### 事件
在事件中，查看组件可配置的事件列表。更多关于事件的介绍，请参见[初识事件-动作](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0167.html)。
图7设置事件   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933045896.png "点击放大")