如何使 Foundry Slate 容器可折叠？

Question

我想制作一个 Slate 仪表板，其中包含我在其他地方看到的可折叠容器，但我不知道要应用哪种 CSS 样式。

有人可以帮助我了解如何完成此操作吗？

Answer 1

基本策略是设置容器的高度为0px，当它的父级有一定的class时，它的溢出设置为隐藏。换句话说，在父容器中添加一个条件class，如{{#if w_toggle.on}}hide-me{{/if}}，然后添加CSS看起来像

.hide-me {  
  #widget-w_child_container {    
    height: 0px !important;     
    overflow: hidden;   
  }
}

有关更高级的样式和布局技术，请在文档中找到 Slate 开发最佳实践指南的 UX/UI 注意事项部分。