切换控件允许您创建可以折叠的内容区块,这样访问者只能看到每个内容区块的标题。这使您能以精简的形式展示内容,用户无需滚动长页面即可轻松查看各个标题。
向页面添加切换控件
首先,在控件添加面板中找到切换控件,然后将其拖放到页面的某个区域或容器中。
内容设置
接下来,移至“基础”部分。默认情况下会添加3个切换项。使用‘添加新项’按钮可增加更多切换项到列表中。您还可以更改切换项的顺序或删除项。
点击每个标签以展开设置区域。在标题选项中为每个项输入标题,或设置动态显示规则以动态显示或隐藏该项。
图标
图标:选择一个图标来表示展开项的动作。可以选择不使用图标或从图标库中选择一个图标。
活动图标:选择一个图标来表示折叠活动项的动作。可以选择不使用图标或从图标库中选择一个图标。
图标可以显示在每个项的开头或结尾,位置可以从样式设置面板中设置。
布局
选择您希望切换控件使用的布局。有两种类型的布局:经典和手风琴。使用经典布局,多个项可以同时展开。使用手风琴布局,一次只能展开一个项。当您展开另一个手风琴项时,之前打开的项会自动折叠,看起来像手风琴。
默认活动
开启此选项将使第一个项默认展开,否则,所有项都将被折叠。
切换控件的样式设置
通用
之间留空:设置各面板之间的间距。
常规/悬停/活动:设置常规/悬停/活动模式下折叠面板的样式
背景颜色:选择面板内容的颜色。
边框类型:设置面板内容的边框类型、参数、颜色。
边框半径:设置边框半径以控制角的圆润度。
阴影:为切换控件或每个项(如果项之间有间隔)设置盒子阴影。您可以调整阴影的颜色、水平位置、垂直位置、模糊度和扩散范围以及阴影的位置,阴影位置可以是内嵌或轮廓。
标题栏样式设置
外边距:调整标题栏周围的空间,控制标题栏与其他元素的距离。
内边距:设置标题文本与标题栏边界之间的距离,增加读取舒适度。
排版:定义标题文本的字体、大小、粗细等排版属性。
图标对齐方式:选择图标在标题栏中的对齐方式,可选左对齐或右对齐。
图标大小:设置标题栏中图标的尺寸。
间距:调整图标与标题文本之间的距离。
常规/悬停/活动:为常规、悬停和活动模式设置不同的样式
背景类型:为常规、悬停和活动模式设置不同的背景类型,如纯色或渐变色。
颜色:选择标题栏的背景颜色。
文字颜色:设置标题文本的颜色,确保与背景的对比度。
图标颜色:定义标题栏图标的颜色。
边框类型:选择标题栏的边框样式,例如无边框、实线、虚线等。
边框半径:调整标题栏边框的圆角大小。
阴影:为标题栏设置阴影,增强视觉层次感。
内容容器
背景类型:设置内容区域的背景,可以选择纯色或渐变色。
文字颜色:定义内容文本的颜色,以保证可读性。
排版:调整内容文本的字体、大小、行高等排版设置。
外边距:设定内容容器与其它界面元素之间的空间。
内边距:设置内容文本与容器边界之间的距离。
边框类型:选择内容容器的边框样式。
边框半径:设定内容容器边框的圆角大小。
阴影:为内容容器添加阴影效果,提升视觉效果。
高级设置
设置适用于此控件的高级选项。