Alva Canary的使用说明

Alva Canary官方版是一款操作简单功能实用的原型设计工具，该软件是特别为了编程人员所研发的，它能够用多种不同的组件来作为原型，然后将其他软件里提供的组件加入到这个原型当中，从而设计出一个焕然一新的程序。而且Alva Canary下载也很方便快捷。下面小编来教大家Alva Canary的使用说明，希望大家会喜欢。

Alva Canary的使用说明

第一次启动Alva

Alva应该安装到您的应用程序文件夹中。根据您的操作系统及其配置，具体位置可能会有所不同。例如，对于macOS来说/Applications/Alva。

1、找到Alva徽标并双击它以启动。Alva应该通过以下屏幕迎接你：

2、创建新文件并向其添加内容

点击Create new Alva File。您将在下一个屏幕的左下角找到基本模式列表。找到Text模式并将其拖放到模式列表正上方的元素窗格中。

3、调整属性

选择新添加的文本组件后，请查看Alva的右侧。这就是显示组件的所有属性(如设置)的位置。在我们的例子中，只有一个 - 文本值。让我们改变它Hello Alva!。

4、添加Box组件

让我们添加另一个组件。除了拖动组件，我们只需双击Box组件即可。Box Component具有更多属性。让我们将heightto 400px和background-color更改为#DA046E。

5、重新订购元素

您可能已经发现，支持子元素的元素左侧有一个小箭头。您可以将元素拖放到它们中。让我们将文本元素移动到框元素中!

添加设计草稿

1.导出设计组件

从您喜爱的设计工具(如Sketch，Figma或photoshop)导出设计组件，如SVG，PNG或JPG。

2.添加图像组件

从Essentials库中添加Image Component 并将其拖到上面的元素列表中。

3.上传您的设计组件

选择组件后，您将在右侧看到Image属性。单击“选择”，然后选择导出的文件。

4.设置图像大小

您可以调整组件的大小，甚至可以定义最小或最大大小。例如，您的组件可以是80%宽度，但最大为1280px。

添加设计草稿

1、添加输入

为了显示交互性，我们需要一个交互式组件。我们添加一个输入。

本指南教授如何将Alva项目连接到现成的Alva设计库。 React.ChangeEventHandler或React.EventHandler财产。

2、定义变量

在输入属性下方，您将找到交互属性。设置为 Set Variable。接下来，输入您想要的名字给它命名。最后，您需要定义有效负载。设置为value

3、将组件链接到值

要使用已定义的变量，需要在组件中使用它。在Input组件中，单击value属性上的链接图标，然后选择以前定义的变量。

4、开始输入

您输入的组件现在接受您输入的值。耶!

以上介绍的内容就是关于Alva Canary的使用说明，不知道大家学会了没有，如果你也遇到了这样的问题的话可以按照小编的方法自己尝试一下，希望可以帮助大家解决问题，谢谢！！！！想要了解更多的软件教程请关注Win10下载之家~~~