UI組件

立即下載DevExtreme

Accordion

Accordion UI組件包含幾個(gè)面板，一個(gè)顯示在另一個(gè)之下。最終用戶可以折疊或展開這些面板，這使得該UI組件對(duì)于在有限的空間中顯示信息非常有用。

ActionSheet

ActionSheet UI組件是一個(gè)包含一組位于另一個(gè)下面的按鈕的表單，這些按鈕通常表示與單個(gè)任務(wù)相關(guān)的幾個(gè)選項(xiàng)。

Autocomplete

Autocomplete UI組件是一個(gè)文本框，當(dāng)用戶在其中輸入時(shí)提供建議。

BarGauge

BarGauge UI組件包含幾個(gè)圓形條形圖，每個(gè)條形圖表示一個(gè)值。

Box

Box UI組件允許您在其中安排各種元素，獨(dú)立且自適應(yīng)的Box UI組件充當(dāng)布局的構(gòu)建塊。

Bullet

當(dāng)您需要將單個(gè)度量值與目標(biāo)值進(jìn)行比較時(shí)，Bullet UI組件非常有用，UI組件由一條表示測(cè)度的水平線和一條表示目標(biāo)值的垂直線組成。

Button

Button UI組件是一個(gè)簡(jiǎn)單的按鈕，當(dāng)用戶單擊它時(shí)執(zhí)行指定的命令。

ButtonGroup

ButtonGroup是一個(gè)UI組件，它包含一組切換按鈕，可以用作模式切換器。

Calendar

Calendar是一個(gè)UI組件，它顯示日歷，并允許最終用戶在指定的日期范圍內(nèi)選擇所需的日期。

Chart

Chart是一個(gè)UI組件，它使用多種系列類型以及不同的交互元素(如工具提示、十字指針、圖例等)來可視化來自本地或遠(yuǎn)程存儲(chǔ)的數(shù)據(jù)。

CheckBox

CheckBox是一個(gè)小框，當(dāng)最終用戶選中它時(shí)，它顯示已經(jīng)啟用了特定的功能或選擇了特定的屬性。

CircularGauge

CircularGauge是一個(gè)UI組件，用于指示圓形數(shù)值刻度上的值。

ColorBox

ColorBox是一個(gè)UI組件，它允許最終用戶輸入顏色或從下拉編輯器中選擇顏色。

ContextMenu

ContextMenu UI組件顯示一個(gè)單一或多層上下文菜單，最終用戶通過右鍵單擊或長(zhǎng)按調(diào)用該菜單。

DataGrid

DataGrid是一個(gè)UI組件，它用網(wǎng)格的形式表示來自本地或遠(yuǎn)程源的數(shù)據(jù)。該UI組件提供諸如排序、分組、過濾等基本特性，以及更高級(jí)的功能，如狀態(tài)存儲(chǔ)、客戶端導(dǎo)出、主-細(xì)節(jié)接口等。

DateBox

DateBox是一個(gè)UI組件，它用指定的格式顯示日期和時(shí)間，并允許用戶選擇或鍵入所需的日期/時(shí)間值。

DateRangeBox

DateRangeBox是一個(gè)UI組件，它允許用戶選擇日期范圍(選擇或輸入開始和結(jié)束日期)。

DeferRendering

DeferRendering是一個(gè)UI組件，它在呈現(xiàn)內(nèi)容之前等待它的內(nèi)容準(zhǔn)備好。當(dāng)內(nèi)容準(zhǔn)備就緒時(shí)，DeferRendering會(huì)顯示一個(gè)加載指示器。

Diagram

Diagram UI組件提供了一個(gè)可視化界面來幫助您設(shè)計(jì)新的和修改現(xiàn)有的圖。

Draggable

Draggable是一個(gè)用戶界面實(shí)用工具，它允許用戶界面組件元素被拖放。

Drawer

Drawer是一個(gè)可忽略的或永久可見的面板，用于在響應(yīng)式web應(yīng)用程序布局中導(dǎo)航。

提示：Drawer UI組件沒有設(shè)計(jì)成包含另一個(gè)Drawer，不要使用嵌套的drawer，避免應(yīng)用程序中可能出現(xiàn)的問題。

DropDownBox

DropDownBox UI組件由一個(gè)文本字段(顯示當(dāng)前值)和一個(gè)下拉字段(可以包含任何UI元素)組成。

DropDownButton

DropDownButton是一個(gè)打開下拉菜單的按鈕。

FileManager

FileManager是一個(gè)UI組件，它允許用戶上傳、選擇和管理不同文件存儲(chǔ)中的文件和目錄。

FileUploader

FileUploader UI組件允許最終用戶向服務(wù)器上傳文件，最終用戶可以在文件資源管理器中選擇文件，或者將文件拖放到頁(yè)面上的FileUploader區(qū)域。

FilterBuilder

FilterBuilder UI組件允許用戶構(gòu)建復(fù)雜的過濾器表達(dá)式，其中包含無限數(shù)量的過濾器條件，并通過使用UI的邏輯操作進(jìn)行組合。

Form

Form UI組件將數(shù)據(jù)對(duì)象的字段表示為標(biāo)簽編輯器對(duì)的集合，這些可以安排在幾個(gè)組、選項(xiàng)卡和列中。

Funnel

Funnel是一個(gè)UI組件，可以在不同階段將值可視化，它有助于評(píng)估這些階段的價(jià)值變化，并識(shí)別潛在的問題。Funnel UI組件使用不同的交互元素(工具提示、標(biāo)簽、圖例)傳遞信息，使您不僅可以創(chuàng)建，還可以創(chuàng)建。

Gallery

Gallery是一個(gè)UI組件，它在carousel中顯示一組圖像，UI組件提供了各種導(dǎo)航控件，允許用戶在圖像之間切換。

Gantt

Gantt 是一個(gè)UI組件，顯示任務(wù)流和任務(wù)之間的依賴關(guān)系。

HtmlEditor

 HtmlEditor是一個(gè)所見即所得的編輯器，允許您格式化文本和視覺內(nèi)容，并用HTML或Markdown輸出， HtmlEditor是建立在之上的。

LinearGauge

LinearGauge是一個(gè)UI組件，用于指示線性數(shù)值刻度上的值。

List

List是一個(gè)UI組件，它表示一個(gè)可滾動(dòng)列表中的項(xiàng)目集合。

LoadIndicator

LoadIndicator是一個(gè)UI元素，通知查看器進(jìn)程正在進(jìn)行中。

LoadPanel

LoadPanel是一個(gè)覆蓋UI組件，通知查看器加載正在進(jìn)行中。

Lookup

Lookup是一個(gè)UI組件，它允許最終用戶搜索下拉菜單中顯示的集合中的項(xiàng)。

Map

Map是一個(gè)交互式UI組件，它顯示帶有標(biāo)記和路線的地理地圖。

Menu

Menu UI組件是一個(gè)帶有可點(diǎn)擊項(xiàng)的面板，單擊一個(gè)項(xiàng)目將打開一個(gè)下拉菜單，其中可以包含幾個(gè)子菜單。

MultiView

MultiView是一個(gè)包含多個(gè)視圖的UI組件，最終用戶通過在水平方向上滑動(dòng)視圖來導(dǎo)航視圖。

NumberBox

NumberBox是一個(gè)UI組件，它顯示一個(gè)數(shù)值，并允許用戶通過輸入一個(gè)值來修改它，并使用鍵盤或鼠標(biāo)對(duì)其進(jìn)行遞增或遞減。

PieChart

PieChart是一個(gè)UI組件，它將數(shù)據(jù)可視化為一個(gè)分成扇區(qū)的圓圈，每個(gè)扇區(qū)代表整體的一部分。

PivotGrid

PivotGrid是一個(gè)UI組件，它允許您顯示和分析來自本地存儲(chǔ)或OLAP多維數(shù)據(jù)集的多維數(shù)據(jù)。

PivotGridFieldChooser

一個(gè)用于數(shù)據(jù)透視網(wǎng)格的補(bǔ)充UI組件，允許您管理數(shù)據(jù)透視網(wǎng)格中顯示的數(shù)據(jù)。字段選擇器已經(jīng)集成在PivotGrid中，可以使用上下文菜單調(diào)用。如果需要在PivotGrid UI組件附近持續(xù)顯示字段選擇器，請(qǐng)使用PivotGridFieldChooser UI組件。

 PivotGridFieldChooser和PivotGrid必須綁定到PivotGridDataSource的同一個(gè)實(shí)例，分別創(chuàng)建PivotGridDataSource，然后將其分配給兩個(gè)UI組件，如上面的代碼所示。

PolarChart

PolarChart是一個(gè)UI組件，可以在極坐標(biāo)系中可視化數(shù)據(jù)。

PolarChart UI組件在極坐標(biāo)系中可視化數(shù)據(jù)。在這個(gè)系統(tǒng)中，平面上的每個(gè)點(diǎn)都是由到中心的距離(點(diǎn)的值)和從固定方向的角度(點(diǎn)的參數(shù))決定的。要理解圖表在極坐標(biāo)系統(tǒng)中是如何顯示的，想象一下它在直角坐標(biāo)系中是如何顯示的，然后在您的腦海中對(duì)參數(shù)軸進(jìn)行四舍五入。

Popover

Popover是一個(gè)UI組件，它在一個(gè)帶有指向指定UI元素的箭頭的框中顯示通知。

Popup

Popup UI組件是一個(gè)覆蓋在當(dāng)前視圖上的彈出窗口。

ProgressBar

ProgressBar是一個(gè)顯示當(dāng)前進(jìn)度的UI組件。

RadioGroup

RadioGroup是一個(gè)UI組件，它包含一組單選按鈕，并允許最終用戶從這組按鈕中進(jìn)行單個(gè)選擇。

RangeSelector

RangeSelector是一個(gè)UI組件，它允許用戶選擇刻度上的值范圍。

這個(gè)UI組件表示一個(gè)刻度(數(shù)字或日期-時(shí)間)和兩個(gè)滑塊，用戶通過移動(dòng)滑塊來選擇所需的范圍。

可以在RangeSelector UI組件的后臺(tái)顯示圖表。這允許最終用戶在圖表系列中選擇所需的范圍，您還可以將RangeSelector UI組件與獨(dú)立的Chart UI組件集成來模擬圖表縮放和滾動(dòng)。

RangeSlider

RangeSlider是一個(gè)UI組件，它允許最終用戶選擇一個(gè)數(shù)值范圍。

Resizable

Resizable UI組件允許在UI中調(diào)整其內(nèi)容的大小。

ResponsiveBox

ResponsiveBox UI組件允許您創(chuàng)建具有適合不同屏幕尺寸布局的應(yīng)用程序或網(wǎng)站。

Sankey

Sankey是一個(gè)UI組件，可以可視化值集之間的流量大小，被連接的值稱為節(jié)點(diǎn);連接——鏈接，流量越大，連接越寬。

Scheduler

Scheduler是一個(gè)UI組件，它表示計(jì)劃的數(shù)據(jù)，并允許用戶管理和編輯它。

ScrollView

ScrollView是一個(gè)UI組件，它允許用戶滾動(dòng)其內(nèi)容。

SelectBox

SelectBox UI組件是一個(gè)編輯器，它允許最終用戶從下拉列表中選擇一個(gè)項(xiàng)目。

Slider

Slider是一個(gè)UI組件，它允許最終用戶在連續(xù)的可能值范圍內(nèi)設(shè)置數(shù)值。

Sortable

Sortable是一個(gè)用戶界面實(shí)用程序，它允許通過拖放手勢(shì)對(duì)UI組件的項(xiàng)進(jìn)行重新排序。

Sparkline

Sparkline UI組件是一個(gè)緊湊的圖表，只包含一個(gè)系列。由于它們的大小，閃光線用很少的空間，可以很容易地收集到表格中或直接嵌入到文本中。

SpeedDialAction

SpeedDialAction是一個(gè)執(zhí)行自定義操作的按鈕，它可以由浮動(dòng)動(dòng)作按鈕(FAB)表示，也可以由FAB打開的快速撥號(hào)菜單中的按鈕表示。

當(dāng)頁(yè)面上只有一個(gè)SpeedDialAction時(shí)，它由浮動(dòng)動(dòng)作按鈕(FAB)表示。

當(dāng)有多個(gè)SpeedDialActions時(shí)，它們被收集到一個(gè)可以包含多個(gè)操作的快速撥號(hào)菜單中。在本例中，F(xiàn)AB打開菜單，您可以使用 floatingActionButtonConfig 對(duì)象來改變動(dòng)作的最大數(shù)量，F(xiàn)AB的位置，以及打開和關(guān)閉狀態(tài)下的圖標(biāo)。

Switch

Switch是一個(gè)UI組件，可以處于兩種狀態(tài)：“開”和“關(guān)”。

TabPanel

TabPanel是一個(gè)UI組件，由Tabs和MultiView UI組件組成，它會(huì)自動(dòng)將選中的選項(xiàng)卡與當(dāng)前顯示的視圖同步，反之亦然。

Tabs

Tabs組件是一個(gè)選項(xiàng)卡條，用于在頁(yè)面或視圖之間切換，這個(gè)UI組件包含在TabPanel UI組件中，但是您也可以單獨(dú)使用Tabs。

TagBox

TagBox UI組件是一個(gè)編輯器，它允許最終用戶從下拉列表中選擇多個(gè)項(xiàng)目。

TextArea

TextArea是一個(gè)UI組件，允許用戶輸入和編輯多行文本。

TextBox

TextBox是一個(gè)UI組件，允許用戶輸入和編輯單行文本。

TileView

TileView UI組件包含一組tile，Tiles 可以存儲(chǔ)比普通按鈕更多的信息，這就是為什么它們?cè)跒橛|摸設(shè)備設(shè)計(jì)的應(yīng)用程序中非常受歡迎的原因。

Toast

Toast是一個(gè)提供彈出通知的UI組件。

Toolbar

Toolbar是一個(gè)UI組件，包含通常管理屏幕內(nèi)容的項(xiàng)，這些項(xiàng)可以是純文本或UI組件。

Tooltip

Tooltip UI組件顯示頁(yè)面上指定元素的工具提示。

TreeList

TreeList是一個(gè)UI組件，它用多列樹視圖的形式表示來自本地或遠(yuǎn)程源的數(shù)據(jù)，這個(gè)UI組件提供了排序、過濾、編輯、選擇等功能。

TreeMap

TreeMap是一個(gè)UI組件，它通過使用嵌套的矩形來顯示分層數(shù)據(jù)。

在TreeMap UI組件中，分層數(shù)據(jù)由一組嵌套的矩形表示，其大小與可視化值成正比，TreeMap使用普通和分層數(shù)據(jù)源進(jìn)行操作。此外，它還可以可視化從平面數(shù)據(jù)源重構(gòu)的層次結(jié)構(gòu)。

TreeMap提供了三種開箱即用的布局算法，以及實(shí)現(xiàn)自己的算法的能力，UI組件還包含API方法，使您能夠?qū)崿F(xiàn)向下鉆取功能。此外，TreeMap支持其他DevExtreme數(shù)據(jù)可視化小部件中可用的所有交互功能:單擊，懸停和選擇。

TreeView

TreeView UI組件是文本數(shù)據(jù)的樹狀表示。

ValidationGroup

ValidationGroup是一個(gè)UI組件，它允許您同時(shí)驗(yàn)證多個(gè)編輯器。

提示：不支持嵌套驗(yàn)證組。

ValidationSummary

用于顯示編輯器驗(yàn)證規(guī)則檢查結(jié)果的UI組件。

Validator

一個(gè)UI組件，用于根據(jù)定義的驗(yàn)證規(guī)則驗(yàn)證關(guān)聯(lián)的DevExtreme編輯器。

VectorMap

VectorMap是一個(gè)可視化地理位置的UI組件，該UI組件表示包含區(qū)域和標(biāo)記的地理地圖，地區(qū)體現(xiàn)了大陸和國(guó)家。標(biāo)記標(biāo)記地圖上的特定點(diǎn)，例如城鎮(zhèn)、城市或首都。

錯(cuò)誤和警告

本節(jié)列出UI組件中可能出現(xiàn)的錯(cuò)誤和警告。

Markup Components

本節(jié)描述在定義UI組件標(biāo)記時(shí)可以使用的組件。

UI 事件

用于處理用戶與UI元素交互的事件。

DevExtreme提供UI事件，用于處理用戶與特定UI元素的交互。 DevExpress.events名稱空間公開了一個(gè)API來處理UI事件。

下面的代碼顯示了如何從具有目標(biāo)ID的頁(yè)面元素附加、觸發(fā)和分離dxhold事件處理程序，timeout參數(shù)指定目標(biāo)應(yīng)該保持多長(zhǎng)時(shí)間來允許處理程序執(zhí)行：

var dxholdHandler = function(jQueryEvent) {
alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
};

$("#target").on("dxhold", { timeout: 1000 }, dxholdHandler);
$("#target").trigger("dxhold");
$("#target").off("dxhold", dxholdHandler);

CSS類

本節(jié)將介紹用于定義元素外觀的DevExtreme CSS類。