文檔首頁>>DevExtreme 中文文檔>>Accordion
Accordion
Accordion UI組件包含幾個(gè)面板，一個(gè)顯示在另一個(gè)之下。最終用戶可以折疊或展開這些面板，這使得該UI組件對(duì)于在有限的空間中顯示信息非常有用。
包含：dx.web.js, dx.all.js
從“devextreme/ui/ Accordion”導(dǎo)入Accordion
// You can create the Accordion widget using the following code.
// Read more at https://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"
}
]
});
點(diǎn)擊復(fù)制
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
});
點(diǎn)擊復(fù)制
配置
定義Accordion UI組件配置屬性的對(duì)象。
| 名稱 | 描述 |
|---|---|
| accessKey | 指定將焦點(diǎn)設(shè)置在UI組件上的快捷鍵。 |
| activeStateEnabled | 指定UI組件是否因用戶交互而改變其視覺狀態(tài)。 |
| animationDuration | 一個(gè)數(shù)字，指定在面板展開或折疊的動(dòng)畫上花費(fèi)的時(shí)間(以毫秒為單位)。 |
| collapsible | 指定是否可以折疊所有項(xiàng)，或者是否必須始終展開至少一個(gè)項(xiàng)。 |
| dataSource | 將UI組件綁定到數(shù)據(jù)。 |
| deferRendering | 指定在顯示面板時(shí)是否呈現(xiàn)面板的內(nèi)容，如果為false，則立即呈現(xiàn)內(nèi)容。 |
| disabled | 指定UI組件是否響應(yīng)用戶交互。 |
| elementAttr | 指定要附加到UI組件的容器元素的全局屬性。 |
| focusStateEnabled | 指定UI組件是否可以集中使用鍵盤導(dǎo)航。 |
| height | 指定UI組件的高度。 |
| hint | 指定當(dāng)用戶在UI組件上暫停時(shí)出現(xiàn)的提示文本。 |
| hoverStateEnabled | 指定當(dāng)用戶在UI組件上暫停時(shí)，UI組件是否改變其狀態(tài)。 |
| itemComponent | 在React中指定的itemTemplate屬性的別名，接受自定義組件。 |
| itemHoldTimeout | 觸發(fā)onItemHold事件之前的時(shí)間周期(以毫秒為單位)。 |
| itemRender | 在React中指定的itemTemplate屬性的別名，接受呈現(xiàn)函數(shù)。 |
| items | UI組件顯示的項(xiàng)數(shù)組。 |
| itemTemplate | 為項(xiàng)指定自定義模板。 |
| itemTitleComponent | 在React中指定的itemTitleTemplate屬性的別名，接受自定義組件。 |
| itemTitleRender | 在React中指定的itemTitleTemplate屬性的別名，接受呈現(xiàn)函數(shù)。 |
| itemTitleTemplate | 指定項(xiàng)目標(biāo)題的自定義模板。 |
| keyExpr | 指定key屬性，該屬性提供用于訪問數(shù)據(jù)項(xiàng)的鍵值，每個(gè)鍵值必須是唯一的。 |
| multiple | 指定UI組件是一次可以展開多個(gè)項(xiàng)還是只能展開單個(gè)項(xiàng)。 |
| noDataText | 指定在項(xiàng)集合為空時(shí)UI組件顯示的文本或HTML標(biāo)記。 |
| onContentReady | 一個(gè)在UI組件被渲染和每次重新繪制組件時(shí)執(zhí)行的函數(shù)。 |
| onDisposing | 在UI組件被處理之前執(zhí)行的函數(shù)。 |
| onInitialized | JavaScript框架中用于保存UI組件實(shí)例的函數(shù)。 |
| onItemClick | 當(dāng)單擊或輕擊集合項(xiàng)時(shí)執(zhí)行的函數(shù)。 |
| onItemContextMenu | 當(dāng)右鍵單擊或按下集合項(xiàng)時(shí)執(zhí)行的函數(shù)。 |
| onItemHold | 當(dāng)一個(gè)集合項(xiàng)被持有一段指定時(shí)間后執(zhí)行的函數(shù)。 |
| onItemRendered | 渲染集合項(xiàng)后執(zhí)行的函數(shù)。 |
| onItemTitleClick | 當(dāng)單擊或輕擊accordion項(xiàng)目的標(biāo)題時(shí)執(zhí)行的函數(shù)。 |
| onOptionChanged | UI 組件屬性更改后執(zhí)行的函數(shù)。 |
| onSelectionChanged | 選擇集合項(xiàng)或取消選擇時(shí)執(zhí)行的函數(shù)。 |
| repaintChangesOnly | 指定是否僅重新繪制數(shù)據(jù)發(fā)生更改的那些元素。 |
| rtlEnabled | 將 UI 組件切換為從右到左的表示形式。 |
| selectedIndex | 當(dāng)前展開項(xiàng)目的索引號(hào)。 |
| selectedItem | 擴(kuò)展的項(xiàng)目對(duì)象。 |
| selectedItemKeys | 指定當(dāng)前擴(kuò)展的項(xiàng)目鍵的數(shù)組。 |
| selectedItems | 當(dāng)前擴(kuò)展的項(xiàng)目對(duì)象的數(shù)組。 |
| tabIndex | 指定使用 Tab 鍵導(dǎo)航時(shí)的元素編號(hào)。 |
| visible | 指定 UI 組件是否可見。 |
| width | 指定 UI 組件的寬度。 |
方法
本節(jié)描述用于操作Accordion UI組件的成員。
| 名稱 | 描述 |
|---|---|
| beginUpdate() | 推遲可能對(duì)性能產(chǎn)生負(fù)面影響的呈現(xiàn)，直到調(diào)用endUpdate()方法。 |
| collapseItem(index) | 折疊具有特定索引的項(xiàng)目。 |
| defaultOptions(rule) | 指定該組件的與設(shè)備相關(guān)的默認(rèn)配置屬性。 |
| dispose() | 釋放分配給Accordion實(shí)例的所有資源。 |
| element() | 獲取根UI組件元素。 |
| endUpdate() | 在調(diào)用beginUpdate()方法后刷新UI組件。 |
| expandItem(index) | 擴(kuò)展具有特定索引的項(xiàng)目。 |
| focus() | 將焦點(diǎn)設(shè)置在UI組件上。 |
| getDataSource() | 獲取數(shù)據(jù)源實(shí)例。 |
| getInstance(element) | 獲取使用DOM節(jié)點(diǎn)找到的UI組件的實(shí)例。 |
| getInstance(element) | 獲取UI組件的實(shí)例，使用它來訪問UI組件的其他方法。 |
| off(eventName) | 將所有事件處理程序與單個(gè)事件分離。 |
| off(eventName, eventHandler) | 從單個(gè)事件中分離特定的事件處理程序。 |
| on(eventName, eventHandler) | 訂閱事件。 |
| on(events) | 訂閱事件。 |
| option() | 獲取所有UI組件屬性。 |
| option(optionName) | 獲取單個(gè)屬性的值。 |
| option(optionName, optionValue) | 更新單個(gè)屬性的值。 |
| option(options) | 更新多個(gè)屬性的值。 |
| registerKeyHandler(key, handler) | 注冊(cè)當(dāng)用戶按下特定鍵時(shí)要執(zhí)行的處理程序。 |
| repaint() | 重新繪制 UI 組件而不重新加載數(shù)據(jù)，調(diào)用它來更新 UI 組件的標(biāo)記。 |
| resetOption(optionName) | 將屬性重置為其默認(rèn)值。 |
| updateDimensions() | 更新 UI 組件內(nèi)容的尺寸。 |
事件
本節(jié)描述由該UI組件觸發(fā)的事件。
| 名稱 | 描述 |
|---|---|
| contentReady | 當(dāng) UI 組件的內(nèi)容準(zhǔn)備就緒時(shí)引發(fā)。 |
| disposing | 在UI組件被銷毀之前引發(fā)。 |
| initialized | 僅在 UI 組件初始化后引發(fā)一次。 |
| itemClick | 單擊或點(diǎn)擊集合項(xiàng)時(shí)引發(fā)。 |
| itemContextMenu | 右鍵單擊或按下集合項(xiàng)時(shí)引發(fā)。 |
| itemHold | 當(dāng)收集項(xiàng)被持有一段指定時(shí)間時(shí)引發(fā)。 |
| itemRendered | 呈現(xiàn)集合項(xiàng)后引發(fā)。 |
| itemTitleClick | 當(dāng)單擊或點(diǎn)擊accordion項(xiàng)目的標(biāo)題時(shí)引發(fā)。 |
| optionChanged | UI 組件屬性更改后引發(fā)。 |
| selectionChanged | 當(dāng)集合項(xiàng)展開或折疊時(shí)引發(fā)。 |
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
提供CDN加速/云存儲(chǔ)服務(wù)
客服熱線