登录 注册

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

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

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

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

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

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

  • 思源笔记

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

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

    26694 引用 • 111170 回帖
1 操作
viayuu 在 2024-03-10 21:17:13 更新了该帖
深圳 位置
1 关注
1 收藏
1 操作
6 回帖
3
2
544 101 8 329 8 1 93

相关帖子

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

近期热议

推荐标签 标签

  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 40 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 89 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 4 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    172 引用 • 1546 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 4 关注
  • 笔记

    好记性不如烂笔头。

    312 引用 • 794 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 371 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 833 关注
  • Gzip

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

    9 引用 • 12 回帖 • 182 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 182 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 110 关注
  • GraphQL

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

    4 引用 • 3 回帖 • 5 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 117 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • gRpc
    11 引用 • 9 回帖 • 103 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 114 关注
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 1 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 186 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 651 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 643 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 33 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 412 关注
  • Anytype
    3 引用 • 31 回帖 • 31 关注

最新标签