模态

的模态元素是一个由dropzone驱动的元素，它让用户能够使用元素库中的片段来组合其内容。这是设计复杂模态布局能力的巨大进步。情态元素由两部分组成:

1. 切换:基本上是一个按钮元素触发莫代尔的打开。
2. 模态:在组合设计时放置元素的实际内容区域。

在本文中，我们将专门关注元素的模态部分可用的样式选项。如果你想了解更多关于Toggle控件的信息，你可以查看我们的文章按钮．

孩子们

模态元素中的第一个控制组是孩子们控制组，其特点是一个可排序的新元素可以添加，重新排序，并根据需要删除:

这使得处理Modal Element的直接子元素变得非常容易，而不需要转到全局Outline视图。

设置

接下来是设置控件组，以围绕外观和功能的重要控件的一般集合为特色:

• 基本字体大小:设置字体大小属性在模态本身。这对于为孩子们树立一个新的基本价值观特别有帮助。
• 维度:维度组由各种宽度而且高度在上面的截图中找到的控件。如果有必要，这些可以用来指定Modal本身的固定尺寸。
• 文本对齐:应用一个text-align值到模态本身，类似于其他布局元素。
• 转型:允许您更改transition-duration而且transition-timing-function模态如何进入和退出。
• 身体滚动:控件上发生的滚动事件可选地禁用身体当莫代尔是开放的。
• 溢出:默认情况下，莫代尔溢出是可见，但您可以设置为隐藏的在这里，如果你希望完成一个特定的外观为您的设计。
• 背景:基地背景颜色可以设置在这里一起启用一个可选”先进的背景,”它允许用户利用英雄图像，视频，视差效果，和更多!

背景＆关闭

的背景＆关闭控制组包含一组简洁的选项，旨在完成你的Modal的整体风格:

而背景而且关闭颜色选择器是相对简单的，有一些特定的控件”关闭”按钮，特别有助于了解它们的功能:

• 密切的大小＆维度:关闭大小”设置基准字体大小在按钮本身，”维”控件指定按钮总体应占用多少物理空间。例如，如果您将基本大小设置为20 px并将尺寸设置为x2.5，按钮的宽度而且高度会出来50 px总的来说，里面的图标只占了底座20 px．注意这一点很重要，因为它决定了模式与屏幕边缘之间的间隔。
• 关闭位置:允许用户指定按钮应该出现在屏幕的哪个角落。

设计

在开头之后”孩子们”而且”设置”对照组，一系列的设计控件是可用的，允许进一步定制的模式。在这些控件中，要注意的一个特别有用的控件是Flexbox设置:

这个控件将允许您为Modal的直接子控件选择启用内部flexbox布局上下文。此功能类似于在其他布局元素(如列、单元格或Div)上找到的Flexbox控件。

演示

查看模态元素的现场演示点击这里．