Skip to content

基础组件 ​

19 类基础组件用于排版、装饰、导航与嵌入。拖拽到画布后,在右侧 内容 / 样式 / 行为 中配置(iframe、内容块无样式段)。

通用 行为 见 组件配置总览 · 行为。


文本 text ​

用途:普通段落、说明文字。

分段主要配置
内容文本内容
样式字体大小、行高、文字颜色(支持纯色/渐变)、粗细、对齐方式
行为交互事件、入场动画

使用建议:长文案适当增大行高;大屏可读字号通常 ≥ 16px。


标题 title ​

用途:大屏主标题、区块标题,支持装饰边框与发光。

分段主要配置
内容标题文字
样式字号、颜色、粗细、对齐、字间距、文字阴影;可选 显示边框及边框宽/色/圆角
行为交互事件、入场动画

图片 image ​

用途:展示静态图片、Logo、背景装饰。

分段主要配置
内容图片地址(上传或 URL)、替代文字 alt、适应方式(contain / cover / fill)
样式圆角、边框(若有)
行为交互事件、入场动画

可从 素材 Tab 拖入公共图片,或使用 我的上传。


视频 video ​

用途:播放本地或网络视频。

分段主要配置
内容视频地址、封面 poster、适应方式、显示控制条、自动播放、静音、循环
样式圆角等
行为交互事件、入场动画

大屏自动播放通常需 静音 + 自动播放 同时开启(受浏览器策略限制)。


音频 audio ​

用途:背景音、提示音。

分段主要配置
内容音频地址、标题、自动播放、循环、静音、音量、显示控件
样式播放器区域样式
行为交互事件、入场动画

当前时间 currentTime ​

用途:实时时钟,无需手动刷新。

分段主要配置
内容日期时间格式(如 YYYY-MM-DD HH:mm:ss)、24 小时制、是否显示秒
样式字号、颜色、粗细、对齐
行为交互事件、入场动画

数字滚动 numberScroll ​

用途:KPI、统计数字等从起始值 缓动滚动 到目标值,适合大屏强调数据变化。

分段主要配置
内容目标值、起始值、小数位数、千分位、前缀/后缀、动画时长(ms)、缓动
样式字号、颜色(纯色/渐变)、粗细、对齐
行为滚动模式(翻牌卷轴 / 打字机 / 无)、卷轴过冲、等宽数字、高频更新节流;交互事件、入场动画

使用建议:配合数据源绑定可展示实时指标;长数字建议开启千分位;翻牌卷轴 适合 KPI 大屏强调感,打字机 适合逐字展示。


形状 shape ​

用途:矩形、线条、三角形等装饰与分区。

分段主要配置
内容形状类型(矩形 / 线条 / 三角形 / 圆)、线条 角度、三角形方向;矩形可设四角圆角
样式填充色、描边色、描边宽度
行为交互事件、入场动画

线条通过 线条角度 控制方向(0° 水平,90° 垂直)。


图标 icon ​

用途:Ant Design 图标点缀。

分段主要配置
内容图标选择(搜索 Outlined 图标)
样式图标大小、颜色
行为交互事件、入场动画

按钮 button ​

用途:可点击操作,配合 行为 · 交互事件 切页或打开链接。

分段主要配置
内容按钮文字、Ant Design 按钮类型(primary / default 等)、尺寸、可选图标
样式自定义背景/边框/文字色(覆盖类型默认)、字号、圆角
行为交互事件、入场动画

标签 tag ​

用途:状态标记、分类标签。

分段主要配置
内容标签文字、预设 颜色、是否描边、是否可关闭、可选图标
样式字号、内边距
行为交互事件、入场动画

菜单 menu ​

用途:大屏内导航,切换页面或外链。

分段主要配置
内容菜单项 树形编辑(标签、图标、链接类型:页面 / 外链 / 子菜单)、布局方向(水平 / 垂直)、默认展开、可折叠、居中对齐
样式背景色、文字色、选中/悬停色、图标大小与间距、字号、缩进
行为交互事件、入场动画

菜单项 链接类型 选「页面」时,target 填大屏内 页面 ID 或配置的目标页。

完整导航配置、与 事件链 的区别见 菜单与事件链。


表格 table ​

用途:静态或可绑数据的表格(无自动滚动)。

分段主要配置
内容表格尺寸、是否显示表头、边框、启用分页、每页条数
样式背景、内边距
数据列配置(title、dataIndex、对齐)、行数据;数据源绑定、列映射
行为交互事件、入场动画

支持 填入示例数据。绑定 API 时用列映射对齐字段名。


网页 iframe ​

用途:嵌入外部网页。

分段主要配置
内容URL、圆角、沙箱模式(限制脚本/表单等)、刷新间隔(0 不刷新)
行为交互事件、入场动画

部分站点禁止被 iframe 嵌入(X-Frame-Options),需目标站允许。


内容块 contentBlock ​

用途:在当前页 内嵌 本大屏的 其它页面(推荐),或嵌入外部 链接 URL(iframe)。

分段主要配置
内容内容来源、嵌入页/URL、页面显示尺寸、滚动与自动滚动
样式圆角、边框
行为交互事件、入场动画

手把手:总览页嵌入「明细页」 ​

目标:第 1 页只占一块区域,里面显示你在第 2 页做好的布局。

  1. 顶栏 页面 ▼ → 添加页面 → 在第 2 页做好明细布局(图表、表格等)。
  2. 切回 第 1 页(总览)。
  3. 左栏 基础组件 → 内容块 → 拖到画布,拉大块区域。
  4. 选中内容块 → 内容 分段:
    • 内容来源 → 大屏其它页面(不要选「链接地址」)
    • 嵌入页面 → 下拉选 第 2 页(列表里没有当前页)
    • 页面显示尺寸:
      • 铺满内容块:嵌入页缩放到组件框大小(做缩略总览)
      • 使用页面画布宽高:按第 2 页原始 1920×1080 渲染,块较小时可 滚动 查看
  5. 若选「使用页面画布宽高」,可按需开 超出可滚动、自动上下滚动(监控长列表常用)。
  6. 保存 → 预览:总览页对应区域应出现第 2 页内容。
  7. 若仍空白:确认嵌入页不是当前页、嵌入页上确有组件。

外链模式:内容来源 选 链接地址 → 填 URL(与 网页 iframe 类似,受目标站是否允许嵌入限制)。


相关文档 ​

巧曦大屏搭建平台 · 技术支持