html中编辑器制作goole图标,页面编辑器基础知识

应用制作工具的页面编辑器可确保以简单而直观的方式构建应用界面。将微件拖到画布上，再将它们绑定到数据，您便能够获得一个界面。

页面编辑器包含三个主要部分：用于构建界面的画布、包含所需的所有界面元素的微件面板，以及允许您控制细节的右侧边栏。

画布

借助画布，您可以设置构成应用界面的组件(称为“微件”)的位置，还能对其进行调整。画布支持 WYSIWYG(“所见即所得”)，但在发布或预览应用之前使用占位符呈现的数据绑定微件属性除外。

在向画布添加微件时，您可以调整画布的大小，以查看应用在不同的屏幕尺寸下的样子。如需了解详情，请参阅针对不同屏幕尺寸设置样式。

微件面板

将微件从微件面板拖到画布上。部分微件具有可帮助您将它们绑定到数据的向导。某些数据绑定会自动执行，前提是为页面设置了默认数据源。

右侧边栏

右侧边栏有构建界面所需的三个不同工具：

工具说明

属性编辑器一系列用于确定选定微件如何与数据交互、响应事件以及加载页面等的属性。

样式编辑器用于控制画布上微件的外观的面板。选择内置主题背景并使用 CSS 创建自定义样式。

概览可显示页面中的微件之间的关系，并且允许您隐藏微件并将其锁定到位的列表。

使用属性编辑器进行数据绑定

借助属性编辑器，您可以修改用于控制微件的大多数方面(包括微件的放置位置、显示的内容，甚至它的行为)的属性。例如，“标签”微件具有 text 属性，可用于确定它们显示的文本。

设置属性的方式有三种。如果您可以通过多种方式设置属性，请点击下拉列表图标 arrow_drop_down 以选择如何设置属性。

静态值 (

) - 静态值十分方便，因为您可以直接输入它们，但无法在用户与应用交互时对其进行更改。

绑定表达式 (

) - 绑定表达式十分强大，因为它们支持您将界面连接到数据模型，从而允许它们在用户输入或修改数据时动态地响应。

选择 (more_horiz) - 在预设选项中进行选择，或者定义(和选择)一个或多个选项。例如，为页面选择数据源或者向 styles 属性添加类名称列表。

注意：将微件绑定到数据是构建应用所需的最重要技能之一。请参阅将您的页面绑定到数据，以便更深入地了解有关绑定的信息。

画布小提示

以下是关于画布使用的一些提示和技巧：

按住 shift 并拖动鼠标可选择多个微件。

选择多个微件之后，您可以将它们作为一个组进行移动以及修改其共享属性等。

右键点击微件或画布可启动上下文相关菜单。

在重新排列微件时按住 control 键可暂时停用画布的快速对齐准则。

使用箭头键可以一次将一个微件移动一个像素。

更多详情

详细了解应用制作工具的许多微件。

了解如何使用样式来自定义应用的外观和风格。

查看高级布局，获取有关如何构建页面的指导。