Building a Navigation Component with Variables

在任何数字界面中，导航都是关键。智能组件使我们能够创建自定义交互式导航组件，这些组件与您原型的其余部分完美配合。在本指南中，我们将涵盖嵌套组件的概念，使用事件变量将事件添加到组件中的元素，并通过组件传递这些变量。使用嵌套组件的主要好处之一是它提供对其状态的完全控制，例如另一个组件中元素的唯一悬停状态。

从原子级别开始

Framer允许您创建完全交互式和动画组件，甚至允许您在其他组件中嵌套组件。我们正在为包含两种不同类型嵌套组件的网站构建导航栏组件，具有其自己的独特交互。我们的项目将包含一个导航栏，其中包含各种嵌套组件，即五个导航项和一个购物车组件。嵌套组件的设计，即导航列表项和购物车组件，将影响我们如何设计导航栏。因此，最佳工作流程包括从最“深层”的嵌套组件开始构建。

嵌套组件

一旦我们准备好两个组件，我们就可以开始创建一个我们将在其中嵌套它们的组件。绘制您的导航栏，在画布上选择它，然后单击工具栏中的组件工具。要在我们的新组件中嵌套不同的组件，只需将任何其他组件拖动到组件画布上，并将其放置在您设计的导航栏中。

从导航栏触发交互

回到主画布，我们想能够点击“服装”并导航到一个全新的屏幕。如果您使用原型连接器将组件连接到新屏幕，我们可以设置交互。但是，如果我们在组件中的任何位置单击，都会触发此操作。这不是我们想做的事情，因为我们只想从特定元素触发此转换。这就是事件变量的作用，它们是不附加到属性（如不透明度或填充）而是附加到事件的特殊类型变量。