搭建复杂设计

设计应用程序的外观和感觉是一个令人兴奋的前景，Slate 为您提供了灵活性，可以自定义和覆盖微件外观的许多方面。然而，许多项目在实现与设计模型的像素完美匹配时，往往偏离轨道，而忽视了工作流功能的清晰高效实现。

另一种思考方式是，每一个样式覆盖都是对应用程序简洁性和可维护性的权衡。在选择您的设计和样式时要谨慎和深思熟虑，并花时间在进行新一轮功能开发之前，定期重构和清理您的应用程序。

搭建复杂设计

使用容器微件来布置您的应用程序。在足够的容器之间找到平衡，以逻辑地组织您的应用程序，而不是不必要地嵌套容器。请记住，在搭建应用程序时，每个微件最终都会为文档模型 (DOM) ↗添加多个层次，而 DOM 的复杂性与浏览器资源使用、页面加载和应用程序的一般响应能力直接相关——也就是说，您的应用程序有多“重”。如有疑问，请减少使用微件，并尽量避免将容器嵌套超过3或4层。

在几乎所有情况下，您都应避免使用 CSS 来影响应用程序的设计——远离position，而使用静态微件定位或弹性容器进行相对定位。在某些特定情况下这里有一些例外，但对于应用程序的一般设计，您将通过坚持使用内置定位工具来避免不必要的复杂性并提高应用程序的可读性。

对齐微件

Slate 的一个常被忽视的功能是将微件彼此对齐的能力。按住 CTRL（在 Mac 上为 CMD）键并单击以选择一个或多个微件。当选择多个微件时，右侧面板将不再显示微件配置，而是提供多个选项以对齐或分布微件。

此外，如果您希望您的设计“自动”发生，您可以使用弹性容器来布置子微件。有关使用弹性容器的更多信息，请参见下面的响应式设计部分。

显示和隐藏微件

动态设计通常包括根据应用程序的状态显示或隐藏内容。有多种方式可以实现这一点。以下三个模式共享一些选项，并讨论了相对的优点和缺点。

简单：使用类隐藏

在最简单的情况下，您可以通过在微件显示配置中将附加类属性模板化为hidden来隐藏微件。常见模式是使用函数（或您的状态变量）来确定是否显示微件，然后将该函数的输出模板化到微件中。虽然这很简单，但它不适合多个微件，您会看到“隐藏”在页面加载时的微件会短暂闪烁，因为它们会保持可见，直到依赖图解析并应用类。

改进：使用标签容器隐藏

更好的方式，特别是在多个微件的情况下，是使用一个标签容器，其中一个标签为空，另一个包含要显示的微件。这里的模式是应用一些 CSS 来隐藏容器边框和背景（即使容器相对于背景“不可见”）：

Copied!
1
2
3
4
5
6
// 这段代码将移除任何包含 'minimal' 作为 'Additional Class' 的容器的边框和背景。

.minimal sl-app-container {
    border: none; // 移除边框
    background: none; // 移除背景
}

然后模板化selectedTabIndex属性以在隐藏和可见之间切换。使用这种模式，页面加载时不会闪烁，微件会立即隐藏。

复杂：从根元素隐藏

如果您需要的不仅是“隐藏”微件，而是将其从DOM中完全移除，可以通过在父容器上模板化一个附加类，通过根元素选择器来隐藏微件来实现。这种模式在响应式设计中最常见，在这种情况下，您需要隐藏一个微件并且让同一级别的其他子微件重新定位。

每个Slate微件的根元素都有一个ID选择器，格式如下：widget-[widgetName]。假设我们有一个名为w_myHTMLWidget的微件，它是w_sidebar容器的子元素。要完全隐藏该微件，您需要在全局样式中定义一个类：

Copied!
1
2
3
4
5
.hide-myHTMLWidget {
    #widget-myHTMLWidget {
        display: none; /* 隐藏 id 为 widget-myHTMLWidget 的 HTML 元素 */
    }
}

然后在 w_sidebar 中，您可以有条件地添加此类，整个微件将会隐藏。有关使用条件 CSS 类的更多模式和示例，请参阅下面的样式操作部分。

“多页面”应用程序

对应用程序进行分段的最常见模式是使用标签容器。每个容器标签可以视作一个独立页面，但重要的是要记住，这些“页面”只是一个UI函数——例如，它不会影响依赖图的解析，因此即使图表位于不同的标签上，填充该图表的查询仍将随依赖图的解析一起运行。

如果您正在使用标签容器搭建一个多页面应用程序，请确保勾选启用延迟渲染选项——这会将标签上的微件渲染移动到标签打开时而不是页面加载时。这对于非常大的应用程序特别有用，因为在任何给定点，大多数微件都“隐藏”在另一个标签上，并且可以大大提高页面加载时间。

即使您不想允许用户手动选择某个标签，也应使用标签容器——例如，如果您正在搭建一个工作流应用程序并需要控制用户何时移动到下一个标签。在这种情况下，您可以取消勾选显示标签标题选项，然后使用 Handlebars 语句来模板化在任何给定点应该显示哪个标签（从零开始）。一个常见的模式是将此标签作为应用程序状态的一部分进行跟踪（请参阅上面的构建有状态的应用程序），这样您只需更新状态变量中当前标签的值，应用程序中的标签就会更改。

响应式设计

在您的 Foundry 实例中搜索使用弹性容器教程。