下拉菜单

文档基于下拉菜单图v1.3.27版本

组件说明

下拉菜单提供可下拉滚动的菜单选项，可在有限的大屏空间内提供较大数量的选项。

效果案例

*下拉菜单 效果案例

一、样式

在样式中可以设置组件的基本属性、选项框和下拉框和下拉图片系列。

1、基本属性

位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、选项框

默认选中

在默认选中中可选择默认选中的选项卡编号，当默认选中编号为0时，则无默认选中选项卡。

*默认选中为0

占位字符

即默认不选中的状态下，显示的是占位字符，可自定义设置内容。

图文缩进

图文缩进控制的缩进距离为选项卡文字到边框左侧的距离，单位为px，如下图所示。

*图文缩进距离说明

对齐方式

默认为左对齐，可以更改为居中对齐或右对齐。

文字样式

可设置选项框内文本的字体、字号、颜色、透明度、间距等。

背景

背景填充方式可选择颜色或者自定义，若选择自定义可上传图片作为背景。

描边

描边可设置选项框描边的样式。

下拉图标

支持对下拉图标的图片、尺寸与右边距做调整。

*下拉图标

选中图标

选中图标可设置选中项尺寸的高度与宽度，以及文字到选中图标的距离。

具体设置距离如下图所示：

*选中图标设置区域说明

3、下拉框

自动收起

打开自动收起，鼠标移出下拉菜单范围则自动收起下拉框。

下拉框调试

打开下拉框调试功能，可以直接看到下拉选项，方便查看编辑的效果

*下拉框调试说明

下拉框

支持对下拉框高度与顶部偏移距离做出设置，单位为px。

*下拉框设置区域说明

滚动条

可以设置下拉菜单的滚动条，包括粗细、轨道颜色、滑块颜色。

*滚动条设置区域说明

下拉选项

支持下拉选项的选项高度、图文缩进和项间距编辑，具体编辑区域如下图所示：

*下拉选项置区域说明

默认样式&悬浮样式

支持对下拉框内文字样式与背景编辑。

默认样式为下拉框无操作时的样式，悬浮样式为鼠标置于选项上时的样式。

*设置悬浮样式背景为红色，默认样式背景为蓝色

4、下拉图片系列

对不同系列的选项做不同的图片展示。

二、数据

组件数据格式

*组件数据格式说明

JSON数据案例

[
	{
		"s": "1",
		"option": "浙江省"
	},
	{
		"s": "2",
		"option": "福建省"
	},
	{
		"s": "3",
		"option": "江西省"
	},
	{
		"s": "4",
		"option": "陕西省"
	}
]

数据配置项说明

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

回调参数

回调参数即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0