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类。