速成班101
10 模块
5 周数

组件设计

点击复制

为网络应用程序设计图形组件


可以简单地把元素放在画布的空位上,但最好是立即设法使一切整齐有序。因此,首先,我们将设计工作区。让我们在画布上添加一个组件(Container)到画布上,在那里我们将放置所有其他元素。添加后,你应该点击齿轮图标,并进入这个容器的配置。

容器设置

让我们来看看可用的设置。

  • Name- 我们可以在应用程序的业务流程中引用这个容器的名称。例如,如果我们想创建业务流程来改变这个容器的一些设置。
  • Direction- 在给定的容器内的元素将被布置的方向。水平方向,如果你想把它们排成一排,一个接一个,反之亦然,垂直方向,当元素在彼此的下面。
  • Wrap- 设置元素的输出。它们是否应该在同一行(nowrap),或者可以被包裹起来(wrap)。
  • Alignment- 容器中的元素应该如何对齐(为水平和垂直对齐单独设置)。
  • Size- 容器的大小。它可以设置为可用空间的百分比,也可以有一个严格固定的像素大小。
  • Max Width-允许的最大宽度(如果它没有被严格设置,而是根据内容的不同而变化)。
  • Margin/Padding- 从容器边框缩进。分别是外部或内部。
  • Image, Gradient or Overlay (Background color)- 设置所需背景的能力。你可以选择一个特定的颜色(或不同颜色的梯度组合)或选择一个背景图片。
  • Border- 选择框架和它的外观(颜色、厚度、圆角半径)。
  • Visible- 元素(以及所有嵌套元素)的可见性。

选定的设置可以在截图中看到。当然,你可以试验和改变它们,选择你的独特设计。

让我们在创建的容器中再添加一个。我们将向它添加必要的输入字段。把它设置为垂直,居中对齐,40%的宽度,以及左边的padding-left(padding-left 20px)。

应用组件

接下来,将组件本身添加到容器中。我们的业务流程接受两个类型为float 的数字。为了输入它们,你需要添加两个 Input组件 (float),一个按钮(Button),它将启动计算过程,并做一个小的视觉调整,以签署它们的 Label.

让我们再添加一个块,在这里我们将签署我们计划的一般计算内容(求和、减法等)。让我们把宽度设置为30%,元素垂直排列,居中,右对齐(end/center)。让我们在容器本身添加5个Label ,并立即将它们的文字改为所需的文字。

视觉设计的最后一步是添加另一个容器来显示计算结果。我们通过与前一个容器的类比来添加它,但我们将对齐方式设置为右边,左边有一个小的填充。这个容器的特点是,它最初将是不可见的(Visible 开关是关闭的)。让我们在得到计算结果的时候把它打开。让我们给它添加5个Label ,我们甚至不需要改变它们的文本,因为这个块仍然是不可见的(主要是设置它们的Name ,这样你就可以在创建业务流程时识别必要的元素)。

如果一切操作正确,我们将在网页设计器中看到以下结果。

而这是在发布的应用程序中。

Was this article helpful?
还在寻找答案吗?
加入社区