能否提供更多样的页签展示方式

在大部分的软件(如浏览器,wps,notion 等)中,每个页签的宽度是相同的,个人更习惯这种操作方式
(下图位 edge 浏览器的页签)
QQ 截图 20240310205417.png

(下面为 notion 的页签)
QQ 截图 20240310205747.png

而思源的页签宽度会根据标题的长度调整,有些标题短的文章页签很窄,不容易点到。
(下图是思源的页签)
QQ 截图 20240310205947.png

我按照论坛中之前的方法(页签的宽度能否自定义 (通过代码块、或修改配置文件) 手工调整宽度? - 链滴 (ld246.com))添加了 css 后,实现了固定宽度,但是"页签切换"的按钮发生了错乱。
能否添加一个选项,能够以相同的宽度展示页签,方便操作?

  • 思源笔记

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

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

    18816 引用 • 70420 回帖
1 操作
viayuu 在 2024-03-10 21:17:13 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 再加一个试试

    .layout-tab-bar .item--readonly {
        width: auto;
    }
    
  • 其他回帖
  • 赞同,页签很窄的时候我很容易点到叉号关闭页签

    @Vanessa

    自定义 CSS 应该是可以用的。这个显示器不一样宽度不好定。
    Vanessa
  • 我又搞了一个让页签叉号始终显示的 CSS 代码片段,体验更接近浏览器了:

    image.png

    /*始终显示页签叉号*/
    .layout-tab-bar .item:hover .item__close svg, .layout-tab-bar .item .item__close svg {
        opacity: .68;
    }
    
  • JeffreyChen 1 1 评论

    我刚刚写了一个 Savor 主题 专用的(其他主题需要稍微调整一下):

    image.png

    /*自定义页签最小宽度 CSS片段 (Savor主题自用)*/
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] {
        min-width: 105px; /*调整页签的最小宽度,只改这个值就可以了,其他代码不需要动*/
    }
    
     /*调整叉号位置*/
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] .item__text {
        padding-right: 28px; /*调整叉号与标题文本间的最小距离*/
        max-width: calc(100% - 61px); /*使叉号不与标题文本重叠*/
    }
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] .item__close {
        position: absolute; /*让叉号靠右*/
        right: 0px;
        padding-left: 6px; /*扩大叉号点击范围*/
    }
    

    另外再给一个添加背景色的 CSS 片段(颜色未必好看,可以自己改):

    /*给页签添加背景色*/
    .layout-tab-bar .item:not(.item--pin):not(.item--readonly)[data-type="tab-header"] {
        background-color: var(--b3-card-error-background);
    }
    
    1 操作
    JeffreyChen 在 2024-03-12 01:19:36 更新了该回帖
    感谢,解决了
    viayuu
  • 查看全部回帖

推荐标签 标签

  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 390 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 55 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    215 引用 • 462 回帖 • 1 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 495 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 462 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    132 引用 • 3650 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    116 引用 • 99 回帖 • 267 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 43 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    207 引用 • 2031 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 6 关注
  • Sym

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

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

    523 引用 • 4581 回帖 • 694 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    276 引用 • 685 回帖 • 1 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    169 引用 • 799 回帖 • 4 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 30 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    314 引用 • 1667 回帖 • 2 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 25 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 521 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 623 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 596 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖 • 1 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 244 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    77 引用 • 1741 回帖