登录 注册

页签的宽度能否自定义 (通过代码块、或修改配置文件) 手工调整宽度？

本贴最后更新于 715 天前，其中的信息可能已经沧海桑田

如题所述？

image.png

  • 思源笔记

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

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

    22212 引用 • 88753 回帖 • 6 关注
1 引用
能否提供更多样的页签展示方式 • viayuu
上海 位置
1 关注
1 引用
4 回帖
2
488 59 98 248 7 8 67

相关帖子

4 回帖
页签的宽度能否自定义 (通过代码块、或修改配置文件) 手工调整宽度？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • soltus •
    订阅者 捐赠者

    有什么好的想法欢迎告诉我，关联： 支持通过主题设置面板配置页签宽度模式 · Issue #550 · Hi-Windom/winsay (github.com)

    1 回复
  • dd798922110 • • 1
    付费者 支持者 作者

    下午找了部门里的前端小伙伴帮忙确认了一下。

    下面 css 添加代码块即可。

    页签的配置，可以重新宽度和最大宽度等

    .layout-tab-bar .item {

    max-width: 700px;

    width:500px;

    }
    此时可能会导致页签中的关闭 x 位置错乱，用下面控制一下

    .layout-tab-bar .item__close {

    position: absolute;

    right: 0px;

    }

  • dd798922110 •
    付费者 支持者 作者

    我就是想宽度固定然后宽一些就行了。下午问了部门的前端小伙伴，通过 css 配置代码块已经解决了。谢谢大佬

  • JeffreyChen •
    付费者 支持者 捐赠者

    我刚刚写了一个 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:20:08 更新了该回帖
dd798922110
上海
回帖
194
 帖子
12
 积分
7354

近期热议

推荐标签 标签

  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 数据库

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

    339 引用 • 708 回帖 • 2 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 658 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 1 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 339 关注
  • 机器学习

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

    83 引用 • 37 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 678 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 336 关注
  • jsoup

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

    6 引用 • 1 回帖 • 481 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 3 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • Vue.js

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

    266 引用 • 665 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 2 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 584 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • BND

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

    107 引用 • 1281 回帖 • 25 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖
  • gRpc
    11 引用 • 9 回帖 • 68 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1705 回帖
  • 创业

    你比 99% 的人都优秀么？

    84 引用 • 1399 回帖
  • 思源笔记

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

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

    22212 引用 • 88752 回帖 • 5 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 7 关注
  • uTools

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

    6 引用 • 14 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 3 关注
  • 招聘

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

    190 引用 • 1057 回帖 • 2 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 761 关注

最新标签