Skip to content

基础组件

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

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


文本 text

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

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

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


标题 title

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

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

图片 image

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

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

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


视频 video

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

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

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


音频 audio

用途:背景音、提示音。

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

当前时间 currentTime

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

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

形状 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 类似,受目标站是否允许嵌入限制)。


相关文档

巧曦大屏搭建平台 · 联系我们