ILLA组件

ILLA组件

ILLA 提供了数十种预构建组件，用于快速构建 Web 前端界面

​

组件列表

​

输入类组件

• Input 输入：用于获取用户输入的较短的字符串

• Number input 数字输入：用于获取用户输入的数字

• Editable text 可编辑文本：用于显示字符串并在单击时切换到编辑模式

• Textarea input 长文本输入: 用于获取用户输入的长字符串

• 上传：用于选取本地文件并将其解析为base64数据。 单击此处 了解有关上传组件的更多信息

• 即将上线
  • Recording 录音
  • Slider 滑动输入
  • Range slider 滑动范围输入
  • Rich text input 富文本编辑
  • JSON editor JSON编辑

​

选择输入类组件

• Switch 开关: 可以返回 true 或 false 的开关

• Select 下拉选择: 在下拉列表中显示所有选项并允许用户选择

• Radio group 单选: 显示所有选项并允许用户选择其中一个

• Checkbox group 复选: 显示所有选项并允许用户选择多个选项

• Cascader 级联选择: 用于显示和选择一组关联的数据

• Radio button 单选按钮: 以按钮样式显示所有选项，允许用户选择其中之一。

• 即将上线
  • Multiple select 多选
  • Tree select 树状选择

​

日历输入类组件

• Date 日期: 用于输入日期，允许自定义数据格式

• Date range 日期范围: 用于输入日期范围，允许自定义数据格式

• Date time 日期时间: 用于输入日期和时间，允许自定义数据格式

• 即将上线
  • Time 时间

​

展示类组件

• Text 文本: 它用于显示字符串并允许通过 JavaSript 获取动态数据。 支持Markdown语法。 单击此处 了解更多信息。

• Image 图片: 用于显示图像。图像源可以是 URL 或 base64 数据。

• Button 按钮: 点击触发相应的业务逻辑

• Icon 图标: 用于表示动作类型、状态等，也可用于在点击时触发事件

• Statistics 数值展示: 用于显示统计数字

• Rate 评分: 用于输入或显示评分

• Bar progress 进度条: 用于展示进度

• 环状进度条: 用于展示进度

• Timeline 时间轴: 用于显示时间轴信息，跟踪用户现在正在做什么以及过去做过什么。

• Divider 分割线: 用于分割不同内容

• Tabs 选项卡: 选项卡对内容进行分类，以便在有限的空间内呈现大量的信息。 用户可以轻松地在选项卡面板之间切换，而无需从一个页面转换到另一个页面

• Menu 菜单: 用于显示页面结构，控制页面跳转或触发其他事件

• Container 容器: 将组件分组到支持多个视图的卡片中。点击这里 了解更多

• Form 表单: 将输入组件的数据打包成一个对象，作为表单组件的value，可以直接提交给API

• List 列表: 自定义列表中的组件并显示数据

• Modal 弹窗: 通过浮层显示数据或进行操作，使用户界面交互更加友好

• PDF: 支持 PDF URL 或 base64 编码数据

• Video 视频: 支持大多数视频服务或任何常见视频文件类型的直接链接。

• Carousel 轮播: 图片轮播.

• 即将上线
  • Audio 音频
  • Steps 步骤
  • Collapsible 折叠面板
  • Map box 地图

​

数据类组件

• Chart 图表: 可视化您的数据，支持柱形图、折线图、散点图、饼图。 单击此处 了解更多信息。

• Table 表格: 查看数据并与数据交互的常用组件。 您可以对信息行进行排序、过滤、分页和下载。 表格还支持行选择和自定义列。 单击此处 了解更多信息。

​

搜索组件

您可以单击右侧面板上的INSERT选项卡进入组件列表。 通过顶部的输入框输入组件名称，搜索组件。

​

使用事件处理器触发事件

以按钮组件为例，可以通过如图所示的方式为该组件设置一个事件处理器，触发一个Action或控制其他组件等。

​

在Action中使用组件的数据

您可以在操作或其他组件中使用组件的数据。以输入组件为例，可以使用{{input1.value}}获取组件中输入的值。不同的组件可能有不同的数据格式，请通过左侧面板查看数据格式。