010.动态面板的常用功能

• 动态面板的显示与隐藏效果
• 动态面板的调整大小以适应内容
• 动态面板的滚动栏设置
• 动态面板的固定到浏览器
• 100%宽度
• 从动态面板脱离
• 转化为母版

动态面板的显示与隐藏效果

使用场景
1登录验证时，输入用户名和密码进行校验
2.订单详情

1. 选中三个html组件，命名为显示、隐藏、切换
2. 拖拽一个动态面组件作为内容的显示区域，命名动态面板名称，面板状态
3. 编辑状态，拖动
   

调整大小以适应内容

1. 选中三个html组件，命名为显示、隐藏、切换
2. 拖拽一个动态面组件作为内容的显示区域，命名动态面板名称，面板状态
3. 编辑状态，拖动
   
   内容超出动态面板的显示区域，将会被隐藏起来
   
   可以看到超出面板的的区域将会被隐藏起来
   在动态面板上右键
   
   会出类似现以下组件不会跑到外面去了，动态面板不会浪费空间，不会担心超出动态面板区域将会被隐藏起来
   

动态面板的滚动栏设置

1. 选中三个html组件，命名为显示、隐藏、切换
2. 拖拽一个动态面组件作为内容的显示区域，命名动态面板名称，面板状态
3. 编辑状态，拖动，文本段落
   
   预发
   

固定到浏览器

在访问某个页面时，网站很多页面很长，但是发现某个页面区域一直在页面中显示(或悬浮在页面上)
eg(扣扣头像可以随时点击聊天或者某个通知的消息一直悬浮在那里，或者向上的箭头线下的箭头拖动箭头直接到达文件的尾部或顶部）

1.拖拽一个举矩形组件x 50 与y 700(第一个）
2.拖拽一个举矩形组件x 50 与y 700(第二个）

预览时，页面随着滚动条上下滚动，而图标始终固定在那里的，方便随时点击

100%宽度

预览： 矩形内容完全展现出来

动态页面的相互转换

动态面板转为母版

可重用的组件（例如导航组件，每个页面都会使用，其他页面可以直接引用，而不需要重新做导航菜单了）