[js] 多彩 Tab

当思源中打开文档的时候,如果频繁切换目标文档,有时光靠标签文字看起来不够直观,不够快速,这个多彩 tab,可以在打开文档时,自动给 tab 生成一个随机背景颜色,方便快速识别不同的标签。

mtab.png

代码:

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%A4%9A%E5%BD%A9Tab.js

使用说明:

可以通过参数 tabStyles 修改或添加不同的 tab 样式,默认是思源自带的背景色 1-12,你也可以根据需要自定义。

为了适应明暗主题,如果你自定义的颜色,建议最好用 css 代码片段先设置不同主题下的颜色方案。

当然,你也可以直接写在 tableStyles 参数里,比如,[data-theme-mode="light"] &{background-color:lightblue;}[data-theme-mode="dark"] &{background-color:darkred;} 这个样式在亮色主题下用 lightblue,在暗色主题下用 darkred,但必须 useInlineStyle 参数设置为 no 的时候才支持这样写。

当 useInlineStyle 参数设置为 no 的时候,也支持对子元素控制样式,比如,background-color:var(--b3-font-background1);.item__text{color:white},这个支持对 tab 标题文字的颜色修改。

注意,再次强调,支持直接写主题样式和子元素样式,必须在 0.0.2 版本以后才行,且必须参数 useInlineStyle='no'。

以下是我用的样式,给背景设置了半透明和加了圆角

// 添加tab样式,可根据自己需要添加或修改样式
const tabStyles = [
    'background-color:color-mix(in srgb, var(--b3-font-background1) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background2) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background3) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background4) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background5) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background6) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background7) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background8) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background9) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background10) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background11) 50%, transparent);border-radius: 5px;',
    'background-color:color-mix(in srgb, var(--b3-font-background12) 50%, transparent);border-radius: 5px;'
];
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25518 引用 • 105543 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    171 引用 • 1158 回帖
1 操作
wilsons 在 2025-04-21 19:46:13 更新了该帖

相关帖子

7 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • suxiang999

    一键三连

  • 用上了 👍

  • 感谢,喜欢

  • image.png

    能不能多彩 tab 的时候,把 tab 里面的文字颜色设置为白色。要不然黑色看不清。

    1 回复
  • wilsons

    tabStyles 参数里不是可以随意设置样式吗?哪个颜色有问题,后面加上 color:white 就行。

    另外,也可以按照我下面的样式那样,把背景设为半透明,颜色就不会那么深了。

    1 回复
  • 不知道是否哪里影响了。我在上次回帖的时候就尝试添加了。

    image.png

    但是结果:image.png

    我发现文字在里面的 span 里。不知道这个情况怎么处理。 我使用的 QYL 主题。

    1 回复
  • wilsons

    方法 1 (推荐

    代码已实现支持对子元素样式的控制。

    比如:可在样式后添加 .item__text{color:white;} 来实现。

    更新代码到 0.0.2 版即可,useInlineStyle 参数可设定使用内联样式还是使用外部样式。

    方法 2

    增加 css 片段专门控制这些颜色

    比如,针对你这个颜色添加

    .layout-tab-bar .item[style*="--b3-font-background10"] .item__text{
        color: white;
    }
    

    方法 3 (不推荐)

    简单粗暴

    比如,我这里 item__text 用的是--b3-theme-on-surace

    image.png

    那直接在 tabStyles 参数里添加--b3-theme-on-surface: white

    image.png

    但这样也会影响到 tab 关闭按钮的颜色,所以推荐方法 1

    2 操作
    wilsons 在 2025-04-21 19:25:46 更新了该回帖
    wilsons 在 2025-04-21 19:19:46 更新了该回帖
请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons

推荐标签 标签

  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • AWS
    11 引用 • 28 回帖 • 7 关注
  • OpenCV
    15 引用 • 36 回帖 • 6 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 749 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 7 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    96 引用 • 901 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    290 引用 • 4494 回帖 • 654 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    499 引用 • 1395 回帖 • 246 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 706 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 256 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 550 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    182 引用 • 408 回帖 • 489 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 391 关注
  • V2Ray
    1 引用 • 15 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 4 关注
  • OneNote
    1 引用 • 3 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 336 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 248 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    412 引用 • 3588 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 183 关注
  • 996
    13 引用 • 200 回帖 • 8 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 316 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 13 关注