插槽

了解插槽

你可以将组件中的任意容器定义为插槽。使用实例时,根据具体场景的需要,可以在实例的插槽内放入任意元素。 合理使用插槽,可以大幅提高组件使用的灵活度、减少不必要的组件状态。 1280X1280插槽-01.jpeg

插槽功能受到前端“插槽(Slot)”概念的启发,比如在Vue中,插槽允许一个组件接受动态的内容。

如何创建插槽

  1. 在画布上选中一个「组件」或「组件集」,在右侧属性栏找到“组件属性”,点击添加图标,在下拉菜单中选择「插槽」
  2. 在插槽设置面板中输入插槽名称后,点击「创建」
  3. 选中「组件」中需要设置为插槽的「容器」,在右侧属性面板最上方点击关联插槽属性按钮,在「下拉菜单」中选择刚才创建的插槽属性,完成插槽的创建

1280X1280-插槽.png

进一步了解组件属性

tips:插槽是一个容器,可以添加自动布局。

插槽的典型使用场景

场景一:提高模态 Modal 组件的灵活度

把模态组件中的内容部分创建为容器,并将容器关联「插槽属性」。在调用组件时,就可以在实例的插槽内,针对不同的业务场景自由进行设计,组合出丰富的业务设计稿。

场景二:提高组件库搭建的效率

菜单、列表、表格这类组件,都是对菜单项、列表项的循环构建。使用插槽后,就不用再枚举所有可能用到不同菜单项数量的状态了。

场景三:创建布局规范

可以将布局规范定义为组件,在调用时,使用者在规范的布局基础上进行页面设计。这个场景在插槽能力实现之前是做不到的。