UI組件

立即下載DevExtreme

Accordion

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

ActionSheet

 ActionSheet UI組件是一個包含一組位于另一個下面的按鈕的表單，這些按鈕通常表示與單個任務相關的幾個選項。

Autocomplete

Autocomplete UI組件是一個文本框，當用戶在其中輸入時提供建議。

BarGauge

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

Box

Box UI組件允許您在其中安排各種元素，獨立且自適應的Box UI組件充當布局的構建塊。

Bullet

 當您需要將單個度量值與目標值進行比較時，Bullet UI組件非常有用，UI組件由一條表示測度的水平線和一條表示目標值的垂直線組成。

Button

Button UI組件是一個簡單的按鈕，當用戶單擊它時執行指定的命令。

ButtonGroup

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

Calendar

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

Chart

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

CheckBox

 CheckBox是一個小框，當最終用戶選中它時，它顯示已經啟用了特定的功能或選擇了特定的屬性。

CircularGauge

CircularGauge是一個UI組件，用于指示圓形數值刻度上的值。

ColorBox

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

ContextMenu

 ContextMenu UI組件顯示一個單一或多層上下文菜單，最終用戶通過右鍵單擊或長按調用該菜單。

DataGrid

 DataGrid是一個UI組件，它用網格的形式表示來自本地或遠程源的數據。該UI組件提供諸如排序、分組、過濾等基本特性，以及更高級的功能，如狀態存儲、客戶端導出、主-細節接口等。

DateBox

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

DateRangeBox

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

DeferRendering

 DeferRendering是一個UI組件，它在呈現內容之前等待它的內容準備好。當內容準備就緒時，DeferRendering會顯示一個加載指示器。

Diagram

Diagram UI組件提供了一個可視化界面來幫助您設計新的和修改現有的圖。

Draggable

Draggable是一個用戶界面實用工具，它允許用戶界面組件元素被拖放。

Drawer

Drawer是一個可忽略的或永久可見的面板，用于在響應式web應用程序布局中導航。

提示：Drawer UI組件沒有設計成包含另一個Drawer，不要使用嵌套的drawer，避免應用程序中可能出現的問題。

DropDownBox

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

DropDownButton

DropDownButton是一個打開下拉菜單的按鈕。

FileManager

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

FileUploader

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

FilterBuilder

 FilterBuilder UI組件允許用戶構建復雜的過濾器表達式，其中包含無限數量的過濾器條件，并通過使用UI的邏輯操作進行組合。

Form

 Form UI組件將數據對象的字段表示為標簽編輯器對的集合，這些可以安排在幾個組、選項卡和列中。

Funnel

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

Gallery

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

Gantt

Gantt 是一個UI組件，顯示任務流和任務之間的依賴關系。

HtmlEditor

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

LinearGauge

LinearGauge是一個UI組件，用于指示線性數值刻度上的值。

List

List是一個UI組件，它表示一個可滾動列表中的項目集合。

LoadIndicator

LoadIndicator是一個UI元素，通知查看器進程正在進行中。

LoadPanel

LoadPanel是一個覆蓋UI組件，通知查看器加載正在進行中。

Lookup

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

Map

Map是一個交互式UI組件，它顯示帶有標記和路線的地理地圖。

Menu

 Menu UI組件是一個帶有可點擊項的面板，單擊一個項目將打開一個下拉菜單，其中可以包含幾個子菜單。

MultiView

MultiView是一個包含多個視圖的UI組件，最終用戶通過在水平方向上滑動視圖來導航視圖。

NumberBox

 NumberBox是一個UI組件，它顯示一個數值，并允許用戶通過輸入一個值來修改它，并使用鍵盤或鼠標對其進行遞增或遞減。

PieChart

 PieChart是一個UI組件，它將數據可視化為一個分成扇區的圓圈，每個扇區代表整體的一部分。

PivotGrid

 PivotGrid是一個UI組件，它允許您顯示和分析來自本地存儲或OLAP多維數據集的多維數據。

PivotGridFieldChooser

 一個用于數據透視網格的補充UI組件，允許您管理數據透視網格中顯示的數據。字段選擇器已經集成在PivotGrid中，可以使用上下文菜單調用。如果需要在PivotGrid UI組件附近持續顯示字段選擇器，請使用PivotGridFieldChooser UI組件。

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

PolarChart

PolarChart是一個UI組件，可以在極坐標系中可視化數據。

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

Popover

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

Popup

Popup UI組件是一個覆蓋在當前視圖上的彈出窗口。

ProgressBar

ProgressBar是一個顯示當前進度的UI組件。

RadioGroup

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

RangeSelector

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

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

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

RangeSlider

RangeSlider是一個UI組件，它允許最終用戶選擇一個數值范圍。

Resizable

Resizable UI組件允許在UI中調整其內容的大小。

ResponsiveBox

ResponsiveBox UI組件允許您創建具有適合不同屏幕尺寸布局的應用程序或網站。

Sankey

 Sankey是一個UI組件，可以可視化值集之間的流量大小，被連接的值稱為節點;連接——鏈接，流量越大，連接越寬。

Scheduler

Scheduler是一個UI組件，它表示計劃的數據，并允許用戶管理和編輯它。

ScrollView

ScrollView是一個UI組件，它允許用戶滾動其內容。

SelectBox

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

Slider

Slider是一個UI組件，它允許最終用戶在連續的可能值范圍內設置數值。

Sortable

Sortable是一個用戶界面實用程序，它允許通過拖放手勢對UI組件的項進行重新排序。

Sparkline

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

SpeedDialAction

 SpeedDialAction是一個執行自定義操作的按鈕，它可以由浮動動作按鈕(FAB)表示，也可以由FAB打開的快速撥號菜單中的按鈕表示。

當頁面上只有一個SpeedDialAction時，它由浮動動作按鈕(FAB)表示。

 當有多個SpeedDialActions時，它們被收集到一個可以包含多個操作的快速撥號菜單中。在本例中，FAB打開菜單，您可以使用 floatingActionButtonConfig 對象來改變動作的最大數量，FAB的位置，以及打開和關閉狀態下的圖標。

Switch

Switch是一個UI組件，可以處于兩種狀態：“開”和“關”。

TabPanel

 TabPanel是一個UI組件，由Tabs和MultiView UI組件組成，它會自動將選中的選項卡與當前顯示的視圖同步，反之亦然。

Tabs

 Tabs組件是一個選項卡條，用于在頁面或視圖之間切換，這個UI組件包含在TabPanel UI組件中，但是您也可以單獨使用Tabs。

TagBox

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

TextArea

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

TextBox

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

TileView

 TileView UI組件包含一組tile，Tiles 可以存儲比普通按鈕更多的信息，這就是為什么它們在為觸摸設備設計的應用程序中非常受歡迎的原因。

Toast

Toast是一個提供彈出通知的UI組件。

Toolbar

Toolbar是一個UI組件，包含通常管理屏幕內容的項，這些項可以是純文本或UI組件。

Tooltip

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

TreeList

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

TreeMap

TreeMap是一個UI組件，它通過使用嵌套的矩形來顯示分層數據。

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

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

TreeView

TreeView UI組件是文本數據的樹狀表示。

ValidationGroup

ValidationGroup是一個UI組件，它允許您同時驗證多個編輯器。

提示：不支持嵌套驗證組。

ValidationSummary

用于顯示編輯器驗證規則檢查結果的UI組件。

Validator

一個UI組件，用于根據定義的驗證規則驗證關聯的DevExtreme編輯器。

VectorMap

 VectorMap是一個可視化地理位置的UI組件，該UI組件表示包含區域和標記的地理地圖，地區體現了大陸和國家。標記標記地圖上的特定點，例如城鎮、城市或首都。

錯誤和警告

本節列出UI組件中可能出現的錯誤和警告。

Markup Components

本節描述在定義UI組件標記時可以使用的組件。

UI 事件

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

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

 下面的代碼顯示了如何從具有目標ID的頁面元素附加、觸發和分離dxhold事件處理程序，timeout參數指定目標應該保持多長時間來允許處理程序執行：

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類

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