登录 注册

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

本贴最后更新于 379 天前，其中的信息可能已经时移俗易

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

（下面为 notion 的页签）
QQ 截图 20240310205747.png

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

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

  • 思源笔记

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

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

    24724 引用 • 101539 回帖
1 操作
viayuu 在 2024-03-10 21:17:13 更新了该帖
深圳 位置
1 关注
1 操作
6 回帖
3
2
422 94 4 275 5 1 39

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen • • 1 评论
    付费者 支持者 捐赠者

    赞同，页签很窄的时候我很容易点到叉号关闭页签

    @Vanessa

    自定义 CSS 应该是可以用的。这个显示器不一样宽度不好定。
    Vanessa •
  • Vanessa • via macOS
    订阅者 付费者 MOD

    我看文章中说还需要用上

    .layout-tab-bar .item__close {
	position: absolute;
	right: 0px;
}
​
    1 回复
  • viayuu •
    作者

    这个是修复"x"号位置错乱的问题的。"页签切换"的位置还是不对

    1 回复
  • Vanessa • • 1 via macOS
    订阅者 付费者 MOD

    再加一个试试

    .layout-tab-bar .item--readonly {
    width: auto;
}
​
  • 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 •
  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    我又搞了一个让页签叉号始终显示的 CSS 代码片段，体验更接近浏览器了：

    image.png

    /*始终显示页签叉号*/
.layout-tab-bar .item:hover .item__close svg, .layout-tab-bar .item .item__close svg {
    opacity: .68;
}
​
请输入回帖内容 ...
viayuu
深圳
回帖
14
 帖子
3
 积分
1001

近期热议

推荐标签 标签

  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 796 回帖
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 719 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 734 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 14 关注
  • Anytype
    3 引用 • 31 回帖 • 12 关注
  • gRpc
    11 引用 • 9 回帖 • 89 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    556 引用 • 674 回帖 • 1 关注
  • Hprose

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

    9 引用 • 17 回帖 • 616 关注
  • sts
    2 引用 • 2 回帖 • 225 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    267 引用 • 666 回帖
  • 数据库

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

    345 引用 • 739 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 招聘

    哪里都缺人，哪里都不缺人。

    189 引用 • 1057 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 638 关注
  • Excel
    31 引用 • 28 回帖 • 1 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 262 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 168 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    425 引用 • 1250 回帖 • 597 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 外包

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

    26 引用 • 233 回帖 • 1 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 593 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    157 引用 • 289 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 93 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 500 关注

最新标签