实用！如何使用 Webix 创建 Email 客户端

正文

请到「今天看啥」查看全文

下面代码是用 Webix 中的 view 来定义一个视图组件，多个 view 可以实现复杂的应用布局结构：

在上述例子中，我们用到了两种类型的 view，其中，

• rows 代码垂直布局的多个列，这个，我们每个行（row）就是一个view；

• ui.template 是一个用于包裹 HTML 内容的容器。这里我们用来类型为header的template来说明这个是应用头。更多 template 的类型，可以自行参阅https://docs.webix.com/samples/80_docs/template_types.html；

• ui.datatable 是一个功能丰富的数据表格组件；

• autoConfig 设置为 true，表明表格会根据数据来自适应；

• data 就是表格中放置的数据

进阶

在快速了解 Webix 的相关概念之后，我们就要来创建一个稍微复杂一点的应用，就是本文的主要内容“Email 客户端”。

布局

从大布局开始，再逐步求精，是构建前端应用的基本思路。我们创建了如下布局结构：

其中：

• cols 就是列，每行（row）可能包含了多个列（col）；

• height 和 width 属性来定义视图所需的大小了

• type，它定义了布局边框。如果使用clean将获得无边框的单元格，使用wide将获得有边框的、有更大空间的单元格。

实现 Toolbar

Toolbar（工具栏）可以包含各种元素，如按钮或下拉菜单等。

记住，要使用Webix创建组件，必须使用view:“component_name”代码行，元素属性允许选择工具栏的内容。

• elements 用来放置子的view组件。

• label 就是显示普通的文本标签

这里，我们使用了 ui.chart，来创建图表。

请到「今天看啥」查看全文