当前位置: 首页 > news >正文

重新定义页签!Choerodon UI Tabs让管理更高效

01 引言

Tabs 组件通过提供平级区域,将大块内容进行有效的收纳和展现,从而保持界面整洁。但在企业应用的快速发展中,这样传统的页签组件已无法满足我们对界面布局和个性化展示的追求。Choerodon UI Tabs 组件通过支持多级分组、个性化配置、柔性布局与可拖拽等特性功能,重新定义了页签组件的边界,为用户带来前所未有的体验。

02 功能特性

/ 解锁个性化力量 /

传统页签组件往往限制了用户的自定义能力,页签顺序固定、标题不能修改。而 Choerodon UI Tabs 组件赋予用户控制页签顺序、重命名、是否展示页签数据等个性化设置的能力,让每个用户的界面都成为他们个性的延伸。

在这里插入图片描述

个性化设置

用户可通过鼠标悬浮页签区域,点击齿轮图标,在右侧弹出抽屉查看 Tabs 个性化相关配置。

1、设为默认

个性化设置,快捷访问。 支持用户根据个人习惯或工作需求,设置默认展示的标签页,在下次打开该界面时将直接进入该页签,极大地提升了浏览效率和用户体验。

在这里插入图片描述

2、显示数量

数据量概览,个性化展示。用户可以自主选择并展示与页签关联的数据源的数据量标记。这一功能使用户能够根据个人需求,自定义页面上显示的数据量信息,从而快速获取关键数据的概览。

在这里插入图片描述

3、重新命名

页签重命名,一目了然。 用户可以自由地对各个页签进行重命名,以符合个人喜好或实际内容。通过自定义页签名称,用户可以更清晰地标识和区分不同的页面功能或内容类别,从而快速找到所需信息。

在这里插入图片描述

4、 拖拽排序

轻松整理,拖拽自定义。 用户可以通过简单的拖拽操作来排序页签,从而根据实际需求或个人喜好自定义页签的展示顺序。这种直观的操作方式使用户能够轻松地调整和组织页面布局,确保最常用的页签或最重要的信息位于最便捷的位置。

在这里插入图片描述

个性化存储

通过组件库的全局配置,以上用户个性化配置数据可进行自定义存储,支持数据持久化。

1、前端缓存配置

根据项目需求选择前端缓存方式(例如:localStorage),对用户个性化数据进行前端缓存和配置持久化。这样可以避免仅配置后端接口存储时造成的多次查询等不必要的资源浪费。

2、 后端接口配置

与后端接口协作,妥善存储用户个性化数据,以确保用户跨场景使用。并保障了配置信息的可靠性和可恢复性。

/ 数据源的智能绑定 /

传统页签组件通常与数据源脱节,展示内容与页签的关联薄弱。而 Choerodon UI Tabs 通过与数据源 DataSet 的绑定,实现了校验提示及定位,确保用户在任何时候都能获取到最准确、最及时的信息。

在这里插入图片描述

触发页签下表单校验,

未通过校验,可限制点击跳转其他页签
在这里插入图片描述

多页签表单提交,

自动定位到校验失败的页签,并聚焦到对应表单组件

官网关联数据源示例:

  • 示例1
  • 示例2

/ 灵活的分组展示 /

传统页签组件往往无法有效组织大量信息,Choerodon UI Tabs 的分组功能,让不同类别的 Tabs 清晰展示,无论是在容器顶部还是内部,都能保持界面的整洁和有序。

在这里插入图片描述

/ 柔性布局与拖拽功能 /

传统页签组件在布局上往往缺乏灵活性,Choerodon UI Tabs 的柔性布局和拖拽功能,让标签可以根据用户的需求自由调整,提供操作自由度。

  • 当 Tabs 组件设置固定高度或使用flex=1时,内部标签头部固定,内容区域柔性并可滚动,适应不同屏幕尺寸。

在这里插入图片描述

  • 利用 renderTabBar 属性和 dnd-kit ,实现页签的直接可拖拽排序功能,增加用户操作的灵活度。

在这里插入图片描述

03 场景案例

企业系统重要会议、文件管理界面优化

案例背景

某企业对重点会议的文件管理有特别查看需求。有效的会议管理和文件组织是提高工作效率和保障信息流通的关键。然而,企业系统面临着以下挑战:

  • 会议信息分散,难以集中管理和实时更新。
  • 文件分类不明确,检索效率低下。
解决方案

Choerodon UI Tabs 组件提供了一套全面的解决方案

1、信息集中管理

通过 Tabs 组件,将重点会议、文件信息集中展示,实现信息的实时更新和同步。

2、重点会议与文件分组展示

利用 Tabs 的分组功能,对重点会议与重点文件进行清晰分类,并通过柔性布局优化浏览体验。

3、个性化用户体验

允许用户根据个人喜好调整 Tabs 组件属性,如页签顺序、默认进入页签等。

应用效果

实施 Choerodon UI Tabs 组件后,企业系统界面优化取得了以下显著效果。用户能够快速查看、安排和调整重点会议。直接查看重点文件,并能快速进入“由我发起”的文件页签,免去检索,界面直观,提高了工作效率。

在这里插入图片描述

联系我们

以上就是 Choerodon UI Tabs 组件的基本介绍,如果您有更好的想法和建议,欢迎积极反馈给我们。欢迎试用,我们诚挚的邀请您和我们一起共建 Choerodon UI,期待您的 Issue!

  • github 地址

  • 官网组件地址

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章:

重新定义页签!Choerodon UI Tabs让管理更高效

01 引言 Tabs 组件通过提供平级区域,将大块内容进行有效的收纳和展现,从而保持界面整洁。但在企业应用的快速发展中,这样传统的页签组件已无法满足我们对界面布局和个性化展示的追求。Choerodon UI Tabs 组件通过支持多级分组、个性化配置、…...

OnlyOffice出现JWT问题和文档下载失败问题解决

一、文档安全令牌未正确形成: 解决方案:禁用jwt,并且重启服务 文件位置:C:\Program Files\ONLYOFFICE\DocumentServer\config\local.json "token": {"enable": {"request": {"inbox":fa…...

Python面试常见问题及答案3

一、基础语法相关 问题:Python中如何实现多态? 答案:在Python中,多态是一种动态类型机制的体现。比如,通过定义一个具有相同方法名的类,不同的类可以根据自身的定义实现这个方法的不同行为。例如&#xff…...

【Java学习笔记】多线程基础

并行:同一时刻,多任务同时进行 多任务分别进行 一、线程相关概念 1.程序 是为完成特定任务、用某种语言编写的一组指令的集合。 简单的说:就是我们写的代码 2.进程 (1)进程指的就是运行中的程序,比如我们使用QQ,就…...

使用stm32的ADC和NTC热敏电阻R值是10k,B值是3950的测温程序

首先要明确NTC热敏电阻的阻值是随温度升高,电阻降低的一个特性,加上拉电阻10K,不过一下子没有找到10K的上拉电阻,就用了一个8.2K的上拉电阻到3.3V,测温电阻一端接地,中间接stm32的PA1使用ADC测电压来计算温…...

详细解读BSCI验厂

BSCI验厂是指BSCI(Business Social Compliance Initiative)倡议商界遵守社会责任组织对BSCI组织成员的全球供应商进行的社会责任审核。以下是对BSCI验厂的详细解读: 一、BSCI验厂的定义与背景 定义:BSCI验厂是企业社会责任验厂的…...

Visual Studio 2022 QT5.14.2 新建项目无法打开QT的ui文件,出现闪退情况

新建 Qt Widgets Application项目,如下图: 点击下一步: 项目创建成功如下: 提示异常如下图: ***.ui 无法打开文件。 提供三种解决办法,本文使用第二种方式解决,选择适合您的解决方法&#x…...

Unity3D制作MMORPG所需知识点详解

前言 在制作一款大型多人在线角色扮演游戏(MMORPG)时,Unity3D引擎提供了丰富的功能和工具,但开发者需要掌握一系列关键技术和知识点。本文将详细介绍使用Unity3D制作MMORPG所需的关键知识点和技术细节。 对惹,这里有…...

Coding Caprice - monotonic stack2

42. 接雨水 class Solution { public:int trap(vector<int>& height) {stack<int> sh;int out 0;for(int i0; i<height.size(); i){while(!sh.empty() && height[sh.top()]<height[i]){int bo height[sh.top()];sh.pop();if(sh.empty()){brea…...

Android Stduio 2024版本设置前进和后退按钮显示在主界面

Android Studio 2024&#xff08;Ladybug&#xff09;安装后发现前进和后退按钮不显示在主界面的工具栏&#xff0c;且以前在View中设置的办法无效&#xff1a; Android Studio 2024&#xff08;Ladybug&#xff09;的设置方式&#xff1a; File->Settings->Appearance&…...

NFT与NFT数据的区别

NFT与NFT数据的区别 NFT与NFT数据的区别 NFT(非同质化代币) NFT是一种基于区块链技术的数字资产。它具有独一无二的特性,就像现实生活中的艺术品原作,每一个NFT都有其独特的标识,无法被其他资产替代。例如,一幅数字画作以NFT的形式存在,它的所有权信息、创作背景、作者签…...

Docker介绍、安装、namespace、cgroup、镜像-Dya 01

0. 容器简介 从生活上来说&#xff0c;容器是一种工具&#xff0c;可以装东西的工具&#xff0c;如衣柜、背包、行李箱等等。 从IT技术方面来说&#xff0c;容器是一种全新的虚拟化技术&#xff0c;它提高了硬件资源利用率&#xff0c;结合k8s还可以让企业业务快速横向扩容、业…...

SQL 查询方式比较:子查询与自连接

在 SQL 中&#xff0c;子查询和自连接是两种常见的查询方式&#xff0c;它们的功能虽然可以相同&#xff0c;但实现的方式不同。本文通过具体示例&#xff0c;深入探讨这两种查询方式&#xff0c;并配合数据展示&#xff0c;帮助大家理解它们的使用场景和差异。 数据示例 假设…...

day15 python(3)——python基础(完结!!)

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、函数 1.1 函数传参中的拆包 1.2 匿名函数的定义 1.3 匿名函数练习 1.4 匿名函数应用——列表中的字典排序 2、面向对象 OOP 2.1 面向对象介绍 2.2 类和对象 2.3 类的构成和设计 2.4 面向对象代码…...

电机频繁烧毁的原因分析

电机作为一种关键的工业设备&#xff0c;广泛应用于各类机械和设备中。然而&#xff0c;电机频繁烧毁的问题却时常困扰着许多企业&#xff0c;导致生产效率降低&#xff0c;维修成本上升&#xff0c;甚至可能引发安全隐患。 一、电机烧毁的基本原理 电机的烧毁通常是指电机内…...

概率论得学习和整理30: 用EXCEL 描述泊松分布 poisson distribution

目录 1 泊松分布的基本内容 1.1 泊松分布的关键点 1.1.1 属于离散分布 1.1.2 泊松分布的特点&#xff1a;每个子区间内概率相等 &#xff0c; λ就是平均概率 1.2 核心参数 1.3 pmf公式 1.4 期望和方差 2 例1&#xff1a;用EXCEL计算泊松分布的概率 3 比较λ不同值时…...

计算机网络技术基础:3.计算机网络的拓扑结构

网络拓扑结构是指用传输媒体互连各种设备的物理布局&#xff0c;即用什么方式把网络中的计算机等设备连接起来。将工作站、服务站等网络设备抽象为点&#xff0c;称为“节点”&#xff1b;将通信线路抽象为线&#xff0c;称为“链路”。由节点和链路构成的抽象结构就是网络拓扑…...

docker login 出错 Error response from daemon

在自己的Linux服务器尝试登陆docker出错 输入完用户密码之后错误如下&#xff1a; 解决方案 1.打开daemo文件&#xff1a; vim/etc/docker/daemon.json 2.常用的国内Docker 镜像源地址 网易云 Docker 镜像&#xff1a;http://hub-mirror.c.163.com 百度云 Docker 镜像&#x…...

【测试】Pytest

建议关注、收藏&#xff01; 目录 功能pytest 自动化测试工具。 功能 单元测试&#xff1a;用于验证代码的最小功能单元&#xff08;如函数、方法&#xff09;的正确性。 简单的语法&#xff1a;不需要继承特定类或使用复杂的结构。断言语句简化。 自动发现测试&#xff1a;P…...

前端拖拽API你会用了么

大家好&#xff0c;今天跟大家分享一个小知识&#xff0c;前端页面的拖拽效果。这个效果可以说还是很常见的&#xff0c;比如说玩一些游戏的时候&#xff0c;将装备直接拖拽到一定区域就会丢掉或者装备上&#xff0c;再比如说一个列表&#xff0c;通过拖拽排序等。那么今天我们…...

NVIDIA推出全新紧凑型超算,加速生成式AI发展,价格大幅下降

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

第100+33步 ChatGPT学习:时间序列EMD-ARIMA-LSTM模型

基于Python 3.9版本演示 一、写在前面 上一节&#xff0c;我们学了经验模态分解&#xff08;Empirical Mode Decomposition&#xff0c;EMD&#xff09;。 如同结尾所说&#xff0c;“那么&#xff0c;做这些分解有什么作用呢&#xff1f;有大佬基于这些分解出来的序列分别作…...

Redis到底是单线程还是多线程?

Redis的线程模型是一个复杂的话题&#xff0c;它既包含了单线程的特性也引入了多线程的概念。理解这一点对于正确使用Redis和优化其性能至关重要。 1.单线程模型 在早期版本中&#xff0c;Redis被设计为单线程模型&#xff0c;这意味着所有客户端请求的处理&#xff08;包括网…...

Qt5与Qt6中的高DPI缩放属性解析

在Qt5中&#xff0c;高DPI缩放默认是禁用的。为了启用它&#xff0c;开发者需要设置Qt::AA_EnableHighDpiScaling应用程序属性。然而&#xff0c;在Qt6中&#xff0c;高DPI缩放默认是启用的&#xff0c;并且不能被禁用。这种变化使得开发者在处理高分辨率屏幕时更加方便&#x…...

[146 LRU缓存](https://leetcode.cn/problems/lru-cache/)

分析 维护一个双向链表保存缓存中的元素。 如果元素超过容量阈值&#xff0c;则删除最久未使用的元素。为了实现这个功能&#xff0c;将get(), put()方法获取的元素添加到链表首部。 为了在O(1)时间复杂度执行get()方法&#xff0c;再新建一个映射表&#xff0c;缓存key与链表…...

顺序表-递增有序表合并

两个递增有序表合并操作 题目&#xff1a; 将两个递增有序的顺序表 A 和 B 合并成一个新的递增有序顺序表 C。 思路&#xff1a; 使用三个索引 i, j, k 分别遍历顺序表 A, B 和合并后的顺序表 C。比较 A 和 B 当前索引指向的元素&#xff0c;将较小的元素放入 C 中&#xf…...

从开始实现扩散概率模型 PyTorch 实现

目录 一、说明 二、从头开始实施 三、线性噪声调度器 四、时间嵌入 五、下层DownBlock类块 六、中间midBlock类块 七、UpBlock上层类块 八、UNet 架构 九、训练 十、采样 十一、配置&#xff08;Default.yaml&#xff09; 十二、数据集 (MNIST) keyword&#xff1a; Diffusion…...

LabVIEW智能焊接系统

焊接作为制造业中的核心工艺&#xff0c;直接影响到产品的性能与可靠性。传统的焊接过程通常依赖操作工的经验控制参数&#xff0c;导致质量波动较大&#xff0c;效率低下且容易产生人为误差。随着工业自动化和智能制造的不断发展&#xff0c;传统焊接方法的局限性愈加明显。本…...

如何快速排查 Wi-Fi 的 TPUT 问题?

1. 如何排查 Wi-Fi TPUT 问题 掌握每个 Wi-Fi 协议下的 Wi-Fi TPUT 的计算方法 一文让你轻松理解WLAN物理层速率计算方式_wifi速率计算公式-CSDN博客配查 CPU 的资源占用率&#xff1a;interrupt、CPU loading Linux/Android 系统使用 mpstat 工具 具体工具的使用方法&#xff…...

C语言单链表、双链表专题及应用

1.链表的概念及结构 概念&#xff1a;链表是一种物理存储结构上非连续&#xff0c;非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 链表的结构跟火车车厢相似&#xff0c;淡季时车次的车厢会相应减少&#xff0c;旺季时车次的车厢会额外增…...

C++4--类

目录 1.类的引入 2.类的定义 3.类的访问限定符及封装 3.1访问的限定符 3.2封装 4.类的作用域 5.类的实体化 1.类的引入 C语言结构体中只能定义变量&#xff0c;在C中&#xff0c;结构体内不仅可以定义变量&#xff0c;也可以定义函数。比如&#xff1a;之间在数据结构中&…...

紫光展锐5G融云方案,开启云终端新时代

近年来&#xff0c;云终端凭借便捷、高效、高性价比的优势正逐步在各行各业渗透。研究机构IDC的数据显示&#xff0c;2024上半年&#xff0c;中国云终端市场总体出货量达到166.3万台&#xff0c;同比增长22.4%&#xff0c;销售额29亿元人民币&#xff0c;同比增长24.9%&#xf…...

雪泥鸿爪和屈指可数

paw这个单词&#xff0c;表示“爪或手”&#xff0c;是一个和hoof相对的单词&#xff1a; hoof n.(马等动物的)蹄paw n.爪子&#xff1b;(动物的)爪&#xff1b;(人的)手 v.挠&#xff0c;抓&#xff1b;动手动脚 所以&#xff0c;当你理解了 paw 和 hoof 是相对的概念时&…...

C++并发与多线程(高级函数async)

async 在 C 中&#xff0c;async 关键字用于实现异步编程&#xff0c;它允许你定义异步操作&#xff0c;这些操作可以在后台执行&#xff0c;而不会阻塞当前线程。这是 C11 引入的特性&#xff0c;与 std::async 函数和 std::future 类一起使用。与thread函数模板的区别在于as…...

LeetCode 力扣 热题 100道(二十)三数之和(C++)

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 如下代码…...

类和对象(4)

大家好&#xff0c;今天来给大家介绍一下this引用&#xff0c;在学习类和对象的时候大家一定有一点疑惑吧&#xff0c;类为什么能知道我们传入的是哪个对象&#xff0c;又是怎么实例化我们的成员的&#xff0c;那么我们便来了解一下。 四.this引用 4.1为什么要有this引用 在…...

php基础:正则表达式

1.正则表达式 正则表达式是用于描述字符排列和匹配模式的一种语法规则。它主要用于字符串的模式分割、匹配、查找及替换操作。到目前为止&#xff0c;我们前面所用过的精确&#xff08;文本&#xff09;匹配也是一种正则表达式。 在PHP中&#xff0c;正则表达式一般是由正规字…...

Vue3动态表单实现

实现方法&#xff1a;通过<component />标签动实现动态表单渲染 component标签&#xff1a; 在vue中 component 标签用于动态组件标签的渲染。它允许在同一个挂载点上条件渲染不同的组件&#xff0c;通过is属性可以渲染指定的属性 在上面的例子中&#xff0c;通过调用…...

【网络取证篇】取证实战之PHP服务器镜像网站重构及绕密分析

【网络取证篇】取证实战之PHP服务器镜像网站重构及绕密分析 在裸聊敲诈、虚假理财诈骗案件类型中&#xff0c;犯罪分子为了能实现更低成本、更快部署应用的目的&#xff0c;其服务器架构多为常见的初始化网站架构&#xff0c;也称为站库同体服务器&#xff01;也就是说网站应用…...

高数 | 用简单的话讲考研数学知识点(第一集:充分和必要)

目录 一、前言 二、充分和必要 三、基础符号 四、符号拓展 五、符号进阶 六、符号进阶拓展 七、本集总结 一、前言 up最近想去上学&#xff0c;就想考个研究生读一读&#xff0c;那就要复习高数&#xff0c;光复习挺没意思的&#xff0c;所以就想着边复习边写文章吧&…...

前端学习-操作元素内容(二十二)

目录 前言 目标 对象.innerText 属性 对象.innerHTML属性 案例 年会抽奖 需求 方法一 方法二 总结 前言 曾经沧海难为水&#xff0c;除却巫山不是云。 目标 能够修改元素的文本更换内容 DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象&#xff0c;…...

PostgreSql-学习06-libpq之同步命令处理

目录 一、环境 二、介绍 三、函数 1、PQsetdbLogin &#xff08;1&#xff09;作用 &#xff08;2&#xff09;声明 &#xff08;3&#xff09;参数介绍 &#xff08;4&#xff09;检测成功与否 2、PQfinish &#xff08;1&#xff09;作用 &#xff08;2&#xff0…...

Python `str.strip()` 的高级用法详解

Python str.strip 的高级用法详解 1. str.strip() 的基本用法2. str.strip() 的高级用法2.1 移除指定字符2.2 移除多个指定字符2.3 移除换行符和制表符2.4 结合正则表达式的高级处理 3. lstrip() 和 rstrip() 的用法3.1 lstrip()&#xff1a;移除左端字符3.2 rstrip()&#xff…...

Vue 3 中的 `update:modelValue` 事件详解

在 Vue 3 中&#xff0c;update:modelValue​ 事件通常与 v-model​ 指令一起使用&#xff0c;以实现自定义组件的双向数据绑定。以下是对该事件的详细分析&#xff1a; 事件定义 首先&#xff0c;我们需要在组件中定义 update:modelValue​ 事件。可以使用 defineEmits​ 函…...

AI 助力医学伦理知情同意书的完善:守护受试者权益

在医学研究中&#xff0c;知情同意书是保障受试者权益的核心文件&#xff0c;其质量直接关系到研究的伦理合规性。一份完善的知情同意书应清晰、准确且全面地向受试者传达研究的关键信息&#xff0c;确保他们在充分理解的基础上自愿做出参与决策。然而&#xff0c;在实际撰写过…...

【信息系统项目管理师-论文真题】2017上半年论文详解(包括解题思路和写作要点)

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 试题一:论信息系统项目的范围管理解题思路写作要点试题二:论项目采购管理解题思路写作要点试题一:论信息系统项目的范围管理 实施项目范围管理的目的是包括确保项目做且制作所需的全部工作,以顺利完成项目…...

rpc设计的再次思考20251215(以xdb为核心构建游戏框架)

1.服务提供者注册的方式 // 表明这是一个服务提供者&#xff0c;ServerType 和 ServerId从application.properties中读取 // 而且只有当当前服务是Game时&#xff0c;才生效。 或者 条件注解??? RpcProvider(typeServerType.Game) public class GameProvider{MsgReceiver…...

mysql 查看并设置 innodb_flush_log_at_trx_commit 参数

mysql 查看并设置 innodb_flush_log_at_trx_commit 参数 innodb_flush_log_at_trx_commit 是 MySQL 中的一个系统变量&#xff0c;用于控制 InnoDB 存储引擎的日志刷新行为。该变量有三个可选的值&#xff1a; 0&#xff1a;每隔一秒钟&#xff0c;日志缓冲被刷新到日志文件&a…...

spring使用rabbitmq当rabbitmq集群节点挂掉 spring rabbitmq怎么保证高可用,rabbitmq网络怎么重新连接

##spring rabbitmq代码示例 Controller代码 import com.alibaba.fastjson.JSONObject; import com.newland.mi.config.RabbitDMMQConfig; import org.springframework.amqp.core.Message; import org.springframework.amqp.core.MessageProperties; import org.springframewo…...

Java BigDecimal

1. BigDecimal 用于解决浮点型运算时&#xff0c;出现结果失真的问题。 2. BigDecimal创建的构造器、常用方法 构造器说明public BigDecimal(double val)---不推荐将double 类型转为BigDecimalpublic BigDecimal(String val)---推荐将String 类型转为BigDecimal 方法说明pub…...