下拉
在本文中,我们将讨论下拉元素及其设置。
所有建造者现在都可以使用新的掉落区供电下拉的元素使用户能够使用元素库中的片段来组合其内容。这是一个巨大的进步,在能力设计复杂的下拉布局。下拉元素由两个组成部分组成:
- 切换:基本上是一个按钮元素触发下拉菜单的打开。
- 下拉菜单:在组合设计时放置元素的实际内容区域。
在本文中,我们将专门关注元素的下拉部分可用的样式选项。如果你想了解更多关于Toggle控件的信息,你可以查看我们的文章按钮.
孩子们
下拉元素中的第一个控制组是孩子们控制组,其特点是一个可排序的新元素可以添加,重新排序,并根据需要删除:

这使得使用下拉元素的直接子元素非常容易,而不需要转到全局Outline视图。
设置
接下来是设置控件组,以围绕外观和功能的重要控件的一般集合为特色:

- 基本字体大小:设置
字体大小
属性上的下拉列表本身。这对于为孩子们树立一个新的基本价值观特别有帮助。 - 维度:维度组由各种
宽度
和高度
在上面的截图中找到的控件。如果需要,这些可以用来指定下拉菜单本身的固定尺寸。 - 文本对齐:应用一个
text-align
值到下拉菜单本身,类似于其他布局元素。 - 转型:允许您更改
transition-duration
和transition-timing-function
下拉菜单应该如何进入和退出。 - 触发:取决于你的下拉菜单是如何运作的,你可能希望它是由用户点击切换或简单地悬停在它上面打开。
- 溢出:默认情况下,下拉菜单
溢出
是可见
,但您可以设置为隐藏的
在这里,如果你希望完成一个特定的外观为您的设计。 - 背景:基地
背景颜色
可以设置在这里一起启用一个可选”先进的背景,”它允许用户利用英雄图像,视频,视差效果,和更多!
设计
在开头之后”孩子们”和”设置”对照组,一系列的设计控件是可用的,允许进一步定制的下拉菜单。在这些控件中,要注意的一个特别有用的控件是Flexbox设置:

此控件将允许您为下拉菜单的直接子菜单选择启用内部flexbox布局上下文。此功能类似于在其他布局元素(如列、单元格或Div)上找到的Flexbox控件。
除此之外,另一个要特别注意的项目是第一下拉边距控件以及为什么要使用它:

默认情况下,下拉列表将自己定位在最近的触发器或包含元素的精确边缘。在某些情况下,这可能意味着它被直接放置在Toggle上。如果您希望将下拉菜单从Toggle移开一点,给它们一些间距,您可以使用此控件来调整初始下拉菜单,任何嵌套的下拉菜单都不会受到此值的影响。
演示
要查看下拉元素的现场演示点击这里.
看到不准确的东西了吗?让我们知道