当思源中打开文档的时候,如果频繁切换目标文档,有时光靠标签文字看起来不够直观,不够快速,这个多彩 tab,可以在打开文档时,自动给 tab 生成一个随机背景颜色,方便快速识别不同的标签。
代码:
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;'
];
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于