界面控件DevExpress JS ASP.NET Core v24.1 - 全新的分割器组件

ops/2024/9/24 21:40:42/

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

DevExtreme v24.1已全新发布,新版本发布了全新的分割器组件、改进并增强了UI/UX和API等,欢迎下载最新版组件体验!

DevExtreme v24.1正式版下载(Q技术交流:532598169)

全新的分割器组件

新的Splitter(分割器)组件允许您将页面或部分划分为多个可调面板。

DevExtreme v24.1产品图集

这些面板可以是:

  • resizable - 带有拖拽图标的句柄允许用户修改大小。
  • collapsible - 带有箭头图标的句柄允许用户折叠面板。

如果启用这两个属性,句柄将同时显示两个图标,并且用户可以根据需要调整/折叠给定面板的大小。如果两个属性都为false,则句柄仍然隐藏。

DevExtreme v24.1产品图集

Splitter(分割器)组件可以垂直或水平定向,方向影响以下与面板相关的属性(可以以像素或百分比指定)。

  • size - 指定面板的初始宽度(水平方向)或高度(垂直方向)。
  • maxSize, minSize - 定义面板的调整大小限制。
  • collapsedSize - 指定折叠时可折叠窗格的大小。

Angular

<dx-splitter orientation="vertical">
<dxi-item
[collapsible]="true"
size="50%"
minSize="20px"
сollapsedSize="30px"
>
</dxi-item>
</dx-splitter>

React

javascript">const App = () => (
<Splitter orientation="vertical">
<Item
collapsible={true}
size="50%"
minSize="20px"
сollapsedSize="30px"
/>
</Splitter>
);
export default App;

Vue

<template>
<DxSplitter orientation="vertical">
<DxItem
:collapsible="true"
size="50%"
min-size="20px"
collapsed-size="30px"
/>
</DxSplitter>
</template>

jQuery

javascript">$('#splitter').dxSplitter({
orientation: 'vertical',
items: [
{
collapsible: true,
size: '50%',
minSize: '20px',
collapsedSize: '30px',
},
],
});

Splitter(分割器)面板可以包含多种内容类型,从简单的HTML到复杂的组件。您可以在item标签中放置HTML标记,或者使用以下属性填充内容面板:

  • itemTemplate - 为所有面板定义自定义模板。
  • template - 为每个特定面板设置自定义模板。

若要自定义分割器外观,请指定separatorSize属性来修改手柄较短边的大小,您还可以通过CSS更改颜色和图标。

启用Splitter(分割器)组件中的allowKeyboardNavigation ,通过快捷键控制Splitter(分割器)操作、镜像鼠标功能。

对于复杂的布局,如我们的演示中所示的嵌套分割器(它还强调了使用模板进行内容插入)。

UI/UX和API增强
DropDownButton - 自定义按钮模板

在v24.1中,您可以自定义内容(例如头像或多行文本)替换DropDownButton中的基本按钮。

DevExtreme v24.1产品图集

Angular

<dx-drop-down-button icon="spindown" template="button-template">
<div *dxTemplate="let data of 'button-template'">
<div class="text-container">
<div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div>
<div class="position"> {{ currentEmployee.Position }} </div>
</div>
<span class="dx-icon-{{ data.icon }} dx-icon"></span>
</div>
</dx-drop-down-button>

React

const renderButton = (data) => {
return (
<React.Fragment>
<div className="text-container">
<div class="name"> {currentEmployee.FirstName} {currentEmployee.LastName} </div>
<div class="position"> {currentEmployee.Position} </div>
</div>
<span className={"dx-icon-" + data.icon + " dx-icon"}></span>
</React.Fragment>
);
};
export default function App() {
return (
<DropDownButton
icon="spindown"
render={renderButton}
/>
);
}

Vue

<template>
<DxDropDownButton
icon="spindown"
template="button-template"
>
<template #button-template="{ data }">
<div class="text-container">
<div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div>
<div class="position"> {{ currentEmployee.Position }} </div>
</div>
<span :class="'dx-icon-' + data.icon + ' dx-icon'"></span>
</template>
</DxDropDownButton>
</template>

jQuery

javascript">$("#myDropDownButton").dxDropDownButton({
icon: 'spindown',
template: (data, $element) => {
const $textContainer = $('<div class="text-container">').appendTo($element);
$(`<div class='name'>${currentEmployee.FirstName} {currentEmployee.LastName}</div>`).appendTo($textContainer);
$(`<div class='position'> ${currentEmployee.Position} </div>`).appendTo($textContainer);
$(`<span class="dx-icon-${data.icon} dx-icon"></span>`).appendTo($element);
},
});
菜单/ContextMenu - 项目滚动

超过页面大小的子菜单(在菜单或上下文菜单中)现在可以滚动。

DevExtreme v24.1产品图集

您可以根据需要使用CSS样式表自定义子菜单,例如下面的代码片段限制了ContextMenu中的子菜单高度:

CSS

.dx-context-menu .dx-menu-items-container {
max-height: 200px;
}

在Menu组件中,使用onSubmenuShowing 函数来配置与滚动相关的设置。例如,当项数超过指定限制时,可以限制子菜单的大小:

Angular

javascript">onSubmenuShowing({ submenuContainer, itemData } {
if (itemData.items.length > 5) {
submenuContainer.style.maxHeight = this.limitSubmenuHeight ? `200px` : '';
}
}

React

javascript">const onSubmenuShowing = useCallback(({ submenuContainer, itemData }) => {
if (itemData.items.length > 5) {
submenuContainer.style.maxHeight = limitSubmenuHeight ? `200px` : '';
}
}, []);

Vue

javascript">function onSubmenuShowing({ submenuContainer, itemData } {
if (itemData.items.length > 5) {
submenuContainer.style.maxHeight = limitSubmenuHeight.value ? '200px' : '';
}
}

jQuery

javascript">onSubmenuShowing: ({ submenuContainer, itemData }) => {
if (itemData.items.length > 5) {
$(submenuContainer).css('maxHeight', 200 || '');
}
}
表单 - 组标题自定义内容

新表单groupItem.captionTemplate选项为组标题启用自定义内容替换。

DevExtreme v24.1产品图集

HTML编辑器 - 拼写检查和CSP支持

DevExtreme HTML编辑器现在在所有支持的浏览器中使用拼写检查功能,这个新增功能通过实时拼写纠正/建议支持增强了文本编辑功能。

以前的版本在向HTML编辑器传递带有内联样式的标记时需要Content Security Policy (CSP)指令,DevExtreme HTML编辑器v24.1完全支持CSP。

DevExtreme v24.1产品图集


http://www.ppmy.cn/ops/56755.html

相关文章

【JAVA poi-tl-ext 富文本转word】

富文本转word 环境使用poi-tl-ext的原因富文本转word代码 环境 jdk 1.8 <dependency><groupId>io.github.draco1023</groupId><artifactId>poi-tl-ext</artifactId><version>0.4.16</version> </dependency>poi-tl-ext已经包…

亚信安全新一代终端安全TrustOne2024年重磅升级

以极简新主义为核心&#xff0c;亚信安全新一代终端安全TrustOne自2023年发布以来&#xff0c;带动了数字化终端安全的革新。60%&#xff0c;安装部署及管理效率的提升&#xff1b;50%&#xff0c;安全管理资源的节省&#xff1b;100%&#xff0c;信创非信创场景的全覆盖。Trus…

Linux进程编程(使用fork函数创建进程以及fork函数的实际引用场景)

目录 一、进程以及相关概念和指令 1.什么是进程、什么是程序、有什么区别&#xff1f; 2.如何查看系统中有哪些进程&#xff1f; 3.什么是进程标识符&#xff1f; 4.什么叫父进程&#xff0c;什么叫子进程&#xff1f; 二、进程的创建 三、fork函数的实际应用场景 总结…

利用PaddleOCR进行图片的跨页表格提取与合并(PDF扫描版)

利用PaddleOCR进行扫描版PDF的跨页表格提取与合并 前言1.环境准备2.文件路径与阈值设置3.定义辅助函数4.处理PDF文件5.总结 前言 在处理PDF文件中的表格时&#xff0c;常常会遇到表格跨页的情况。并且一些PDF文件为扫描版。这种情况下&#xff0c;如果要将跨页的表格合并为一个…

昇思25天学习打卡营第14天|K近邻算法实现红酒聚类

红酒Wine数据集 类别(13类属性)&#xff1a;Alcohol&#xff0c;酒精&#xff1b;Malic acid&#xff0c;苹果酸 Ash&#xff0c;灰&#xff1b;Alcalinity of ash&#xff0c;灰的碱度&#xff1b; Magnesium&#xff0c;镁&#xff1b;Total phenols&#xff0c;总酚&#xf…

线性代数|机器学习-P23梯度下降

文章目录 1. 梯度下降[线搜索方法]1.1 线搜索方法&#xff0c;运用一阶导数信息1.2 经典牛顿方法&#xff0c;运用二阶导数信息 2. hessian矩阵和凸函数2.1 实对称矩阵函数求导2.2. 线性函数求导 3. 无约束条件下的最值问题4. 正则化4.1 定义4.2 性质 5. 回溯线性搜索法 1. 梯度…

【计算机组成原理 | 第二篇】计算机硬件架构的发展

目录 前言&#xff1a; 冯诺依曼计算机架构 现代计算机架构&#xff1a; 总结&#xff1a; 前言&#xff1a; 在当今数字化时代&#xff0c;计算机硬件不仅是技术进步的见证者&#xff0c;更是推动这一进步的基石。它们构成了我们日常生活中不可或缺的数字生态系统的核心&a…

CSS实现table表格:隔行换色的效果

表格是网页中十分重要的组成元素。表格用来存储数据&#xff0c;包含标题、表头、行和单元格。在HTML语言中&#xff0c;表格标记使用符号<table>表示。定义表格光使用<table>是不够的&#xff0c;还需要定义表格中的行、列、标题等内容。推荐博文&#xff1a;《HT…