order: 3 group: order: 6 title: API

toc: content

内置组件

From-render 内部使用了如下内置组件，根据规则匹配对应组件，例如

const schema = {
  // ...
  // 此 item 会匹配 imageInput 图片输入框
  img: {
    type: 'string',
    format: 'image',
  },
};

有时，用户希望强制指定一个表单原件用某个内置或自定义的组件来展示，可使用 widget 字段来说明，例如下面的 item 会用 select 下拉单选组件来渲染，即使没有下拉选项：

const schema = {
  // ...
  string: {
    title: '下拉选框',
    type: 'string',
    widget: 'select', // 会强制使用 select 组件
  }
},

下面是目前 FormRender 已经支持的内置组件，其中规则的格式为${type}:${format}?${enum}/${readOnly}，没有规则的代表必须指明 widget 的组件

具体展示详见 playground - 基础控件，列表的展示见展示的最佳实践

input

• 组件：输入框
• 规则：string

textarea

• 组件：多行输入框
• 规则：string:textarea

number

• 组件：数字输入框
• 规则：integer | number

url

• 组件：链接输入框
• 规则：string:url

imageInput

• 组件：图片输入框
• 规则：string:image

date

• 组件：日期组件
• 规则：string:dateTime | string:date

time

• 组件：时间组件
• 规则：string:time

dateRange

• 组件：日期范围
• 规则：range:date | range:dateTime

timeRange

• 组件：时间范围
• 规则：range:time

checkbox

• 组件：是否选择
• 规则：-

checkboxes

• 组件：点击多选
• 规则：array?enum

select

• 组件：下拉单选
• 规则：*?enum_long

multiSelect

• 组件：下拉多选
• 规则：array?enum_long

radio

• 组件：点击单选
• 规则：*?enum

treeSelect

• 组件：树形选择
• 规则：-

color

• 组件：颜色选择
• 规则：string:color

upload

• 组件：上传组件
• 规则：string:upload

html

• 组件：文本（只读展示）
• 规则：html

slider

• 组件：滑动输入条
• 规则：-

rate

• 组件：五星评分
• 规则：-

cardList

• 组件：卡片形式的列表，用于展示数量不太多但结构复杂的 list
• 规则：-

simpleList

• 组件：简单的列表组件，用于展示每行只有 1-3 个简单元素的情况
• 规则：-

tableList

• 组件：表格形式的列表组件，用于展示每行只有 3 - n 个简单元素的情况，特别是数据量很大需要分页的
• 规则：-

drawerList

• 组件：使用抽屉的表格形式的列表组件，用于展示存在列表套列表，列表套对象等复杂元素的情况
• 规则：-

tabList

• 组件：使用 tab 形式的列表组件
• 规则：-

virtualList

• 组件：与 cardList 基本相同，但以虚拟滚动替代了传统的分页
• 规则：-