使用组件

如果将所有内部系统抽象出来,那么我们可以发现有一些频繁出现的元素,比如说表格、按钮和下拉菜单等等。

在卡拉云中,组件不光是组成应用界面的元素,还是实现与用户交互功能的主要组成。比如说,表格组件不光可以展示数据,它还可以允许你的用户点击选中其中一行,并触发一些事件。

我们在卡拉云中内置了数十种的组件供你使用,最常见的一些组件包括

  • 表格 - 用于展示和操作列表类数据
  • 文本 - 用于展示文本、HTML 或 Markdown
  • 弹出框 - 允许用户点击触发弹框,并在弹框中进行其它操作
  • 图片 - 展示任意图片

在本文中,我们将介绍如何方便地上手,用数分钟可以打造你中意的内部工具界面,以及如何配置组件的属性来实现各种功能。

添加和删除一个组件

要添加一个组件非常容易,只需要往应用编辑界面内的画布上你希望组件展示的地方拖拽组件即可。比如说,下图中展示我们将一个表格组件拖拽到界面上

添加表格

🚧
组件不可重叠

请注意,两个组件之间不可以重叠,如果有重叠在拖拽时会出现提示

要删除一个组件也非常容易,只需要用鼠标点击选中要删除的组件,在右侧点击回收按钮即可。已删除的组件不可恢复,组件中的数据和设置将被删除。

删除表格

重命名组件

在卡拉云中,每个组件的名字必须唯一。这也是为什么在添加组件时,如果有多个同类组件,新增组件的名字的后缀序号会加一。比如说,在添加第一个表格时,表格初始名为 table1, 而添加第二个表格时,新增加的表格名字为 table2

在组件较多时,更有意义的名字通常可以帮助我们更好地管理应用。比如如果一个按钮叫作 approveUser 而另一个叫 denyUser,我们会立即知道按钮的作用。相反如果两个按钮分别叫 button1button2 的话,那么我们在配置应用时会更容易混淆一些。因此,在这样的情况下你可以将组件重命名。

📘
好的命名有助于管理应用

我们强烈推荐将组件名改为更有意义的名字,名字可以以下划线、大小写英文字母或数字,但必须以字母名开头

重命名时,点击选中组件,在右侧的配置栏中,点击组件当前的名字,输入新名字并回车即可将其改为新名字。请注意,新的名字必须不在本应用内存在,否则会提示重命名错误。

重命名表格

组件的属性

每个组件有一系列可以配置的属性(Property),在构建你的应用时,你的绝大部分逻辑和功能都配置在每个组件的属性中。

组件中的属性可以是静态的,比如说一个按钮,你可以将其颜色设置为 #107E7D 藏青色,这里的颜色不随着其它条件变化而变化。静态属性可以满足很多需求,比如你可以配置一个表格各列的名字,按钮的颜色,文本框的内容等等。

改变按钮颜色

但真正让卡拉云与众不同的,是它允许你将任何属性设置为动态属性,来完成任何复杂的需求。动态属性是指,你可以通过简单的 JavaScript 代码,来组件本身或其它组件的数据,来控制功能。多数情况下动态属性可以用来

  • 引用一个查询返回的数据
  • 引用其它组件的属性
  • 执行 JavaScript 代码

我们用一个简单的小功能来说明如何使用动态属性。假设我们在做一个内容管理系统,用户需要输入一些字符,同时我们需要实时统计用户输入的字符数。

动态属性

那么我们可以先添加一个输入框和一个文本框,输入框里用户可以输入字符,在文本框中我们进行字数统计。

我们在文本框的值属性中(即text1.value) 中将其设置为 已输入 {{input1.value.length }} 个字符,这样每当用户在输入框组件 input1 中输入字符时,文本框的属性会动态引用 input1 中的 value 属性,也就是键入的字符。同时 input1.value 是一个 JavaScript 字符串,因此我们可以很容易地用 length 属性来统计字数。

动态输入

每当输入框中的用户输入变化时,文本框会同时计算 input1.value.length 并将其展示出来。可以看到,只要在双大括号中 {{}} 的代码,都会被当作 JavaScript 来执行,同时你也可以引用任何组件的名字和其变量的内容。

当然这个过分简单的例子只是用来说明如何使用动态属性,卡拉云中的动态属性其实等价于 JavaScript,因此,在卡拉云中你可以根据业务需要,构建功能更丰富也更复杂的应用。

组件有哪些属性

在卡拉云的编辑界面中,只要在大双括号中(即 {{ }} 中)输入组件名,就会有自动提示列出组件所有可用的属性名。卡拉云的文档中我们也会不断总结组件的属性,以方便你开发

👍
自动补全

在键入双括号时,自动补全会提示你所有可能的组件和查询的名字以及对应的属性名,不用担心找不到组件和对应的属性名

自动补全

© 2021 卡拉云 Built with ❤️ in Beijing

京ICP备15049164号-9