文檔半島外圍網上直營>>DevExtreme 中文文檔>>Accordion
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 | 當集合項展開或折疊時引發。 |
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線