开启并发展网页设计职业生涯

导航是任何数字界面中的关键要素。智能组件让我们能够创建定制交互式导航组件，使其与原型中的其他部分完美协同。本指南将涵盖组件嵌套的概念、使用事件变量为组件元素添加事件，以及在组件间传递事件的方法。使用嵌套组件的主要优势之一在于能够完全掌控其状态，例如实现组件内部元素的独特悬停状态。

从原子层面开始

Framer 允许您创建完全交互式且带动画效果的组件，甚至支持在组件内部嵌套其他组件。我们正在为网站构建一个导航栏组件，其中将包含两种不同类型的嵌套组件，各自拥有独特的交互逻辑。 我们的项目将包含一个导航栏，其中嵌套了多种组件：五个导航项和一个购物车组件。导航项列表与购物车这两个嵌套组件的设计，将直接影响导航栏的整体架构。因此，最优的工作流程应从"最深层"的嵌套组件开始构建，逐步向上扩展。

嵌套组件

当两个组件准备就绪后，我们便可开始创建用于嵌套它们的父级组件。绘制导航栏后，在画布上选中该组件，点击工具栏中的组件工具。若要在新组件中嵌套其他组件，只需将任意组件拖拽至组件画布，并将其放置在设计的导航栏内部即可。

从导航栏触发交互

回到主画布上，我们希望能够点击"服装"并跳转到一个全新的屏幕。 若通过原型连接器将组件连接至新屏幕，我们可设置交互操作。但此操作会触发组件内任意位置的点击。这并非我们期望的效果——我们只希望从特定元素触发该过渡。此时便需要事件变量：这类特殊变量不绑定属性（如透明度或填充色），而是绑定至事件。