Advertisement

virtualized-table-for-antd:适用于蚂蚁设计的虚拟表组件

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:ZIP


简介:
Virtualized-Table-for-ANTD是一款专为提高大型数据集处理性能而优化的虚拟滚动表格插件,完美兼容蚂蚁金服的UI设计库Ant Design。 用于AntD4的虚拟表格组件,提供gzip压缩功能,确保快速、可恢复且占用空间最小! 安装方法: ```shell npm i --save virtualizedtableforantd4 ``` 使用`useVT`时,请参考以下选项配置: ```typescript interface vt_opts { id?: number; /** * @default 5 */ overscanRowCount?: number; scroll?: { y: number }; onScroll?: ({ left, top, isEnd }) => void; } ``` 注意:`onScroll`选项仅在处理原生事件的滚动时生效。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • virtualized-table-for-antd
    优质
    Virtualized-Table-for-ANTD是一款专为提高大型数据集处理性能而优化的虚拟滚动表格插件,完美兼容蚂蚁金服的UI设计库Ant Design。 用于AntD4的虚拟表格组件,提供gzip压缩功能,确保快速、可恢复且占用空间最小! 安装方法: ```shell npm i --save virtualizedtableforantd4 ``` 使用`useVT`时,请参考以下选项配置: ```typescript interface vt_opts { id?: number; /** * @default 5 */ overscanRowCount?: number; scroll?: { y: number }; onScroll?: ({ left, top, isEnd }) => void; } ``` 注意:`onScroll`选项仅在处理原生事件的滚动时生效。
  • 规范AntDesign官方包XD.rar
    优质
    该资源为蚂蚁集团官方出品的Ant Design设计规范及配套的XD组件包,适用于UI设计师快速创建美观且符合用户体验标准的产品界面。 阿里设计规范AntDesign官方提供了XD版本的组件包以及AntDesignMobile Template V1.0;此外还有Ant.Design.Pro和Ant.Design.3.0.Components等多个版本供开发者使用。
  • Lite-Virtual-List:Vue瀑布流
    优质
    Lite-Virtual-List是一款专为Vue设计的高效组件库,支持瀑布流布局与虚拟滚动技术,有效提升长列表场景下的性能和用户体验。 轻虚拟列表 支持基于Vue的瀑布流虚拟列表组件库。 功能包括: - 支持固定高度。 - 支持高度可变。 - 支持两列瀑布流布局。 - 支持DOM多屏配置。 - 支持状态选择。 - 支持数据动态附加和删除。 使用方法: 安装 ```shell npm install lite-virtual-list ``` 使用: ```javascript import liteVirtualList from lite-virtual-list Vue.use(liteVirtualList) ``` 模板中使用: ```html ```
  • Antd-Data-Table:结合AntdTable和Form进行数据搜索、展示与操作
    优质
    Antd-Data-Table是一款集成了Ant Design Table和Form组件的数据处理工具,支持高效的数据搜索、展示及操作功能。 antd数据表 一个结合了antd的Table和Form组件来实现数据搜索、显示及操作功能的组件。 特征: - 摆脱繁琐任务:处理分页、表格行选择,编写搜索字段表单项组件以及动作组件。 - 关注重点:进行数据获取请求并返回结果;如有必要,则呈现特定的数据字段。此外,还可以开发插件来对一个或多个数据对象执行操作。 安装: ```shell $ yarn add antd-data-table --save ``` 最简单的数据表实例: 导入DataTable组件: ```javascript import { DataTable } from antd-data-table; ``` 定义搜索字段数组(示例): ```javascript const searchFields : SearchField[] = [ { label: ID, name: id, type: input, payload: { props: { placeholder: } } }, { label: 选择, name: select, type: select } ``` 注意:上述代码示例中的`pay`字段可能是拼写错误,正确的应该是`payload`。
  • 规范
    优质
    《蚂蚁的设计规范》是一本由蚂蚁集团设计团队编写的书籍,详细介绍了其内部的设计原则、流程和最佳实践,旨在提升产品用户体验。 在数字化时代,良好的用户体验(UX)和用户界面(UI)设计是产品成功的关键因素之一。阿里巴巴旗下的蚂蚁金服团队为了推动高效、一致且美观的界面设计,制定了一套名为“蚂蚁设计规范”的指导原则。这套规范不仅涵盖了设计的基本理念,还包括实际操作中的模板、组件以及开发示例,为设计师和开发者提供了全面的设计资源。 深入理解“蚂蚁设计规范”的核心设计理念可以发现,该规范强调以人为本,注重用户体验,并力求在功能性和美学之间找到平衡点。设计应简洁易用且直观明了,让用户能够快速完成任务并轻松地理解界面内容;同时,这套规范还提倡一致性原则,确保不同页面和功能间的设计风格统一一致,以降低用户的认知负担。 关于具体的设计部分,“蚂蚁设计规范”详细阐述了色彩、字体、图标及布局等关键元素的使用规则。其中,色彩作为视觉传达的重要手段之一,在该规范中提供了一套完整的颜色体系来表达品牌调性、信息层次和交互状态;而选择合适的字体组合与排版原则,则有助于提高信息的可读性和视觉舒适度;此外,简洁明了且标准化设计的图标库也被提供了出来。 在模板方面,“蚂蚁设计规范”为常见的页面类型(如登录注册页、列表页及详情页)以及组件提供了一系列预设方案。这些模板遵循了设计原则,并能帮助设计师快速搭建界面,节省时间同时保证质量的一致性。 对于构成界面的基本单元——组件,“蚂蚁设计规范”对按钮、输入框、导航栏和提示等常用组件进行了详细定义,包括它们的样式、尺寸及状态变化等方面的内容。此外,这些组件不仅适用于UI设计领域,在前端开发中也得到了支持,实现了设计与开发之间的无缝对接,并提高了开发效率。 最后,“蚂蚁设计规范”的实用部分——即开发示例,则展示了如何在实际项目中应用上述的设计原则和组件。通过代码示例的形式,开发者可以更好地理解和实现这些设计理念,以确保设计方案能够被准确地实施并保持一致性。 总的来说,“蚂蚁设计规范”是阿里巴巴蚂蚁金服团队对高效、高质量设计的系统化总结,为设计团队及开发团队提供了统一的语言与工具,并促进了产品的设计质量和开发效率。无论是新手还是经验丰富的从业者,在实际项目中结合自身特点灵活运用这些规范将有助于不断优化我们的工作流程和产出效果。
  • 金服Web库.rplib
    优质
    蚂蚁金服Web组件库rplib是专为开发者打造的一站式Web开发解决方案,提供丰富的可复用UI组件与工具集,助力高效构建高质量企业级应用。 蚂蚁金服的Web组件库rplib提供了一系列可复用的前端UI组件,旨在帮助开发者快速构建高质量的企业级应用。该库包含了丰富的样式设计与交互功能,并且具有良好的兼容性和扩展性,适用于各种复杂的业务场景。通过使用这个组件库,开发人员可以提高工作效率并保证项目的一致性。
  • antd-virtual-select:优化长列antd select
    优质
    antd-virtual-select是一款针对Ant Design框架Select组件进行性能优化的插件,特别适用于处理包含大量选项的数据集。通过采用虚拟滚动技术,有效提升了大型数据列表下的用户交互体验和应用性能。 开始 安装 npm i antd-virtual-select 包。 功能特性: - 使用 antd Select 的 dropdownRender 方法来自定义原组件的下拉列表部分。 - 虚拟滚动渲染,只在可视区内渲染列表项,并动态加载其他数据,支持上万条数据的高效显示。 - 对自定义列表项绑定与原始 Select 组件相同的方法和回调函数的支持。 - 同步使用 antd 的下拉菜单样式。 - 具有相同的 api 选项,如设置 mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} 属性可将组件转换为支持大量数据渲染的 AutoComplete 组件。 更多信息关于在 antd 中处理长列表性能问题可以参考相关文档或讨论。注意,antd 4.0 的 Select 组件已经内置了虚拟列表功能(适用于 ie11+ 浏览器),而此组件基于 antd 3.x 版本,并且支持 ie9 浏览器。 使用说明: - 基本用法与 antd Select 相同,只需将原来的 Select 替换为 SuperSelect 即可。
  • 【Ant Design】Axure金服后台界面
    优质
    该资源为Axure组件,专为设计蚂蚁金服风格的后台界面打造,采用Ant Design的设计规范,助力快速高效地创建高质量的产品原型。 蚂蚁的企业级产品体系庞大且复杂。这类产品的量级巨大、功能繁多,并发频繁变动也是常态,因此设计与开发需要具备快速响应的能力。此外,这些产品中存在许多相似的页面及组件,可以通过抽象提取出一些稳定且高复用性的内容。 Ant Design基于“确定”和“自然”的设计理念,采用模块化解决方案来降低冗余生产成本,并使设计师能够专注于提升用户体验。接下来我将分享这款原型组件的设计理念与应用,希望能为大家带来便利。
  • 蜜蜂数据集,学习
    优质
    蚂蚁蜜蜂数据集是一套用于图像分类研究和学习的数据集合,包含大量清晰标注的蚂蚁与蜜蜂图片,非常适合学生和研究人员用来训练机器学习模型。 蚂蚁蜜蜂数据集是一个较小的数据集,非常适合用于学习。
  • Qt线
    优质
    Qt蚂蚁线表格是一款基于Qt框架开发的高效数据展示和管理工具,支持复杂的数据结构及多种交互操作。 在Qt编程环境中,QTableWidget是一个非常常用的组件,用于创建和展示二维数据表格。它提供了丰富的功能,如编辑单元格、排序、选择等。而Qt蚂蚁线,特别是表格蚂蚁线,是QTableWidget的一个特殊效果,用于指示用户当前选择或复制的区域,与Excel中的操作类似。这个效果在用户进行复制、剪切或拖拽操作时特别有用,增强了用户体验。 要实现表格蚂蚁线,在Qt中通常需要掌握以下知识点: 1. **QTableWidget的基本使用**:了解如何创建和配置表格(包括设置列数和行数)、插入与删除单元格以及编辑单元格内容。 2. **选区绘制**:通过重写QTableWidget的paintEvent()函数,你可以定制自己的绘图逻辑。在用户进行选择操作时,你需要捕获并解析鼠标事件,并计算出选区坐标,在paintEvent中画出蚂蚁线。 3. **图形上下文(QPainter)**: 使用QPainter类可以实现2D图形绘制功能,包括设置线条样式、颜色和宽度等属性来创建蚂蚁线效果。 4. **Qt样式表**:虽然默认情况下可能没有包含蚂蚁线的显示方式,但通过应用自定义的Qt风格文件(QSS),可以在CSS中定义所需的外观,并将其应用于QTableWidget上。 5. **信号与槽机制**:利用Qt中的事件驱动编程核心——信号和槽来响应用户交互。例如,可以连接cellClicked()或selectionChanged()等信号到相应的处理函数以更新蚂蚁线显示状态。 6. **维护选区的状态信息**: 为了确保正确的蚂蚁线展示效果,需要管理当前选择区域的起始点与结束点位置,并适时地对其进行修改和保存。 7. **性能优化**:当表格数据量较大时,频繁绘图可能会影响程序运行效率。因此,在实现过程中考虑使用缓存技术或者仅在必要时刻更新显示来提高整体性能表现。 8. **自定义QTableWidgetItem**: 如果需要更高级的功能(比如定制单元格的渲染),可以继承QTableWidgetItem类并覆盖其paint()方法以实现在单元级别上的蚂蚁线效果。 通过掌握上述知识点,你可以为QTableWidget添加具有Excel风格的蚂蚁线功能,从而提升用户在操作表格时的整体体验。