Accordion

Accordion UI组件包含几个面板，一个显示在另一个之下。最终用户可以折叠或展开这些面板，这使得该UI组件对于在有限的空间中显示信息非常有用。

包含：dx.web.js, dx.all.js
从“devextreme/ui/ Accordion”导入Accordion

// You can create the Accordion widget using the following code.
// Read more at //js.devexpress.com/Documentation/Guide/Widgets/Common/Advanced/3rd-Party_Frameworks_Integration_API/#Create_and_Configure_a_Widget.

new DevExpress.ui.dxAccordion(container, {
"dataSource": [
{
"title": "Personal Data",
"text": "Name: John Smith, Birth Year: 1986"
},
{
"title": "Contacts",
"text": "Phone: (555)555-5555, Email: John.Smith@example.com"
}
]
});

点击复制

import Accordion from "devextreme/ui/accordion";

new Accordion(container, {
accessKey:undefined,
activeStateEnabled:false,
animationDuration:300,
collapsible:false,
dataSource:Edit,
deferRendering:true,
disabled:false,
elementAttr:{},
focusStateEnabled:true,
height:undefined,
hint:undefined,
hoverStateEnabled:true,
itemComponent:null,
itemHoldTimeout:750,
itemRender:null,
items:Edit,
itemTemplate:"item",
itemTitleComponent:null,
itemTitleRender:null,
itemTitleTemplate:"title",
keyExpr:null,
multiple:false,
noDataText:"No data to display",
onContentReady:null,
onDisposing:null,
onInitialized:null,
onItemClick:null,
onItemContextMenu:null,
onItemHold:null,
onItemRendered:null,
onItemTitleClick:null,
onOptionChanged:null,
onSelectionChanged:null,
repaintChangesOnly:false,
rtlEnabled:false,
selectedIndex:0,
selectedItem:null,
selectedItemKeys:null,
selectedItems:null,
tabIndex:0,
visible:true,
width:undefined
});

点击复制

配置

定义Accordion UI组件配置属性的对象。

名称	描述
accessKey	指定将焦点设置在UI组件上的快捷键。
activeStateEnabled	指定UI组件是否因用户交互而改变其视觉状态。
animationDuration	一个数字，指定在面板展开或折叠的动画上花费的时间(以毫秒为单位)。
collapsible	指定是否可以折叠所有项，或者是否必须始终展开至少一个项。
dataSource	将UI组件绑定到数据。
deferRendering	指定在显示面板时是否呈现面板的内容，如果为false，则立即呈现内容。
disabled	指定UI组件是否响应用户交互。
elementAttr	指定要附加到UI组件的容器元素的全局属性。
focusStateEnabled	指定UI组件是否可以集中使用键盘导航。
height	指定UI组件的高度。
hint	指定当用户在UI组件上暂停时出现的提示文本。
hoverStateEnabled	指定当用户在UI组件上暂停时，UI组件是否改变其状态。
itemComponent	在React中指定的itemTemplate属性的别名，接受自定义组件。
itemHoldTimeout	触发onItemHold事件之前的时间周期(以毫秒为单位)。
itemRender	在React中指定的itemTemplate属性的别名，接受呈现函数。
items	UI组件显示的项数组。
itemTemplate	为项指定自定义模板。
itemTitleComponent	在React中指定的itemTitleTemplate属性的别名，接受自定义组件。
itemTitleRender	在React中指定的itemTitleTemplate属性的别名，接受呈现函数。
itemTitleTemplate	指定项目标题的自定义模板。
keyExpr	指定key属性，该属性提供用于访问数据项的键值，每个键值必须是唯一的。
multiple	指定UI组件是一次可以展开多个项还是只能展开单个项。
noDataText	指定在项集合为空时UI组件显示的文本或HTML标记。
onContentReady	一个在UI组件被渲染和每次重新绘制组件时执行的函数。
onDisposing	在UI组件被处理之前执行的函数。
onInitialized	JavaScript框架中用于保存UI组件实例的函数。
onItemClick	当单击或轻击集合项时执行的函数。
onItemContextMenu	当右键单击或按下集合项时执行的函数。
onItemHold	当一个集合项被持有一段指定时间后执行的函数。
onItemRendered	渲染集合项后执行的函数。
onItemTitleClick	当单击或轻击accordion项目的标题时执行的函数。
onOptionChanged	UI 组件属性更改后执行的函数。
onSelectionChanged	选择集合项或取消选择时执行的函数。
repaintChangesOnly	指定是否仅重新绘制数据发生更改的那些元素。
rtlEnabled	将 UI 组件切换为从右到左的表示形式。
selectedIndex	当前展开项目的索引号。
selectedItem	扩展的项目对象。
selectedItemKeys	指定当前扩展的项目键的数组。
selectedItems	当前扩展的项目对象的数组。
tabIndex	指定使用 Tab 键导航时的元素编号。
visible	指定 UI 组件是否可见。
width	指定 UI 组件的宽度。

方法

本节描述用于操作Accordion UI组件的成员。

名称	描述
beginUpdate()	推迟可能对性能产生负面影响的呈现，直到调用endUpdate()方法。
collapseItem(index)	折叠具有特定索引的项目。
defaultOptions(rule)	指定该组件的与设备相关的默认配置属性。
dispose()	释放分配给Accordion实例的所有资源。
element()	获取根UI组件元素。
endUpdate()	在调用beginUpdate()方法后刷新UI组件。
expandItem(index)	扩展具有特定索引的项目。
focus()	将焦点设置在UI组件上。
getDataSource()	获取数据源实例。
getInstance(element)	获取使用DOM节点找到的UI组件的实例。
getInstance(element)	获取UI组件的实例，使用它来访问UI组件的其他方法。
off(eventName)	将所有事件处理程序与单个事件分离。
off(eventName, eventHandler)	从单个事件中分离特定的事件处理程序。
on(eventName, eventHandler)	订阅事件。
on(events)	订阅事件。
option()	获取所有UI组件属性。
option(optionName)	获取单个属性的值。
option(optionName, optionValue)	更新单个属性的值。
option(options)	更新多个属性的值。
registerKeyHandler(key, handler)	注册当用户按下特定键时要执行的处理程序。
repaint()	重新绘制 UI 组件而不重新加载数据，调用它来更新 UI 组件的标记。
resetOption(optionName)	将属性重置为其默认值。
updateDimensions()	更新 UI 组件内容的尺寸。

事件

本节描述由该UI组件触发的事件。

名称	描述
contentReady	当 UI 组件的内容准备就绪时引发。
disposing	在UI组件被销毁之前引发。
initialized	仅在 UI 组件初始化后引发一次。
itemClick	单击或点击集合项时引发。
itemContextMenu	右键单击或按下集合项时引发。
itemHold	当收集项被持有一段指定时间时引发。
itemRendered	呈现集合项后引发。
itemTitleClick	当单击或点击accordion项目的标题时引发。
optionChanged	UI 组件属性更改后引发。
selectionChanged	当集合项展开或折叠时引发。

半岛外围网上直营

Accordion

配置

方法

事件

用科技创就卓越

Create excellence with technology