# 抽屉组件实现点击按钮滑出页面内容

来源快照：`result_data_new_260518.json`

- 来源 ID：`1970297249054265222`
- 模块：低代码平台e-builder
- 目录：常见问答 - 页面设计
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**  问题描述：**

  抽屉组件实现点击按钮滑出或弹出页面内容  

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157721135000920108&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**解决方式：**

比如说我们想要点击导航面板的more按钮打开抽屉组件里的内容

 

 

1： 页面设计器中放置抽屉组件，可以通过属性调整抽屉位置、动效等

 

位置：居中、顶部居中、底部居中、右居中、左居中、自定义（支持设置宽度和高度，定位在当前页面或全局）

 

动效设置：可设置为弹出、滑出、推出；以及方向、时长，自动关闭等

 

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157721139273400357&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


  


 

  


2：将组件拖拽到抽屉组件中，可以通过拖拽调整组件大小

  


  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157721139273400543&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


  


3：隐藏抽屉组件

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157721143666352151&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

 

![](https://www.e-cology.com.cn/api/file/preview?type=redirect&imgFormat=image&fileId=942331411218006017)

 

4：导航面板组件添加标题按钮more,事件动作“显示或隐藏组件”实现点击按钮滑出页面内容

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157721143448985638&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
