Bulma Tabs 选项卡怎么实现 is-toggle、is-boxed 与 is-fullwidth 三种样式变体？

Bulma Tabs 选项卡怎么实现 is-toggle、is-boxed 与 is-fullwidth 三种样式变体【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma如果你已经在一页 HTML 中引入了 Bulma 的 CSS想把选项卡从默认的底部单条边框样式改成带边框的 boxed 样式、类似单选按钮的 toggle 样式或者让选项卡撑满整行宽度只需要在同一个.tabs容器上追加对应的修饰类即可。官方组件文档 Tabs 对这三类变体各给了独立示例样式实现位于 sass/components/tabs.scss。本文按基础结构 → 逐个变体 → 组合使用 → 验证结果的顺序走一遍。三种变体共用的基础 HTML 结构无论用哪种样式tabs 组件都要求同一套结构官方文档原文列出的四项一个tabs容器div classtabs一个ul元素一组li列表项每个链接对应一个a锚点元素当前激活的选项卡通过在li上加is-active类来标记。最小可运行示例来自 Tabs 文档div classtabs ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div这是默认样式只有一个底部边框激活项li.is-active a的文字色和底部边框色都会变成var(--bulma-link-text)。三个变体都是在classtabs后面追加修饰类结构本身不变。is-boxed带边框的经典选项卡在容器上加is-boxed得到官方所说的 a more classic style with bordersdiv classtabs is-boxed ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div对照 tabs.scss 中.tabs.is-boxed的规则可以核对它实际改变了什么每个a变为border: 1px solid transparent顶部两角圆角取var(--bulma-radius)悬停时背景变为var(--bulma-background)底部边框色变为var(--bulma-border)激活项li.is-active a背景为var(--bulma-scheme-main)边框色为var(--bulma-border)底部边框被置为transparent源码中带!important视觉上与下方内容接在一起。文档示例中还演示了在a里放icon is-small图标加文字的写法boxed 变体与图标完全兼容。is-toggle类似单选按钮的互斥选项卡官方对is-toggle的描述是用于mutually exclusive的选项卡like radio buttons where clicking one deselects all other ones。写法div classtabs is-toggle ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div按 tabs.scss 中.tabs.is-toggle规则样式上的变化包括每个a有完整的1px solid边框颜色var(--bulma-border)悬停时变var(--bulma-border-hover)且margin-bottom: 0ul的底部边框被移除border-bottom: none即不再保留默认样式那条底线相邻li用负值margin-inline-start: -1px抵消重叠的边框使多个标签连成一条第一个和最后一个li的a分别带左右圆角var(--bulma-radius)激活项背景为var(--bulma-link)边框色同var(--bulma-link)文字色为var(--bulma-link-invert)并有z-index: 1保证边框压住邻居。需要注意is-toggle改变的是视觉样式。哪个选项卡处于激活状态由标记中的is-active类决定点击切换激活项的行为需要由你自己的逻辑例如移动is-active类实现Bulma 的 CSS 不负责这部分。如果还想让首尾标签变成半圆胶囊形在is-toggle基础上再加is-toggle-roundeddiv classtabs is-toggle is-toggle-rounded ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div源码中is-toggle-rounded会把首个和末个标签的圆角改为var(--bulma-radius-rounded)并各加1.25em的内边距。is-fullwidth选项卡撑满整行宽度要让选项卡占满可用宽度加is-fullwidthdiv classtabs is-fullwidth ul li aspan classiconi classfas fa-angle-left aria-hiddentrue/i/spanspanLeft/span/a /li li aspan classiconi classfas fa-angle-up aria-hiddentrue/i/spanspanUp/span/a /li li aspanRight/spanspan classiconi classfas fa-angle-right aria-hiddentrue/i/span/a /li /ul /div这个变体在 tabs.scss 中对应的规则非常简短li { flex-grow: 1; flex-shrink: 0; }。也就是说每个列表项等分伸展、不收缩从而把整行填满。示例中的 Font Awesome 图标类名fas fa-angle-left等来自文档示例如果你不引入 Font Awesome把它们换成纯文字即可不影响is-fullwidth的生效。三种变体可以组合文档在 Combining 一节明确说明修饰类可以叠加并给出了几个现成组合示例!-- 居中 boxed -- div classtabs is-centered is-boxed ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div !-- toggle fullwidth -- div classtabs is-toggle is-fullwidth ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div !-- toggle fullwidth 尺寸修饰可选 -- div classtabs is-toggle is-fullwidth is-large ul li classis-activeaPictures/a/li liaMusic/a/li liaVideos/a/li liaDocuments/a/li /ul /div尺寸修饰is-small/is-medium/is-large与上述变体互不冲突作用是把容器font-size分别设为var(--bulma-size-small)、var(--bulma-size-medium)、var(--bulma-size-large)。如何验证变体已正确生效肉眼核对三个变体的差异点在页面上是直观的——is-boxed出现方形带边框的标签is-toggle底部那条默认边框消失、标签连成一条且激活项有彩色背景is-fullwidth下每个标签等宽撑满整行。在浏览器 DevTools 中查计算样式依据 tabs.scss 的源码规则选中.tabs.is-fullwidth liflex-grow应为1、flex-shrink应为0选中.tabs.is-toggle ulborder-bottom应为none选中.tabs.is-boxed li.is-active abackground-color应为var(--bulma-scheme-main)的计算值。仓库自带的自动化核对仓库里有一份 tabs 的演示夹具 docs/cyp/components/tabs.html其中按#tabs-boxed、#tabs-toggle、#tabs-fullwidth、#tabs-toggle-fullwidth等 id 挂了各变体的实例对应的 Cypress 用例 docs/cypress/e2e/components/tabs.spec.js 会访问http://127.0.0.1:4000/cyp/components/tabs/并断言计算样式。其中与 boxed 变体相关的断言是非激活项border-radius为4px 4px 0px 0px、边框色为 transparent激活项背景为scheme-main边框为border border transparent。这些期望值的颜色来自 docs/cypress.config.js 里定义的环境变量如border: rgb(219, 219, 219)、transparent: rgba(0, 0, 0, 0)。注意该用例只覆盖了默认、对齐与 boxed 三种情况的样式断言is-toggle和is-fullwidth没有对应的自动断言这两者以上述源码规则和 DevTools 检查为准。边界与限制三个修饰类都只作用于.tabs容器上的样式选项卡内部的 DOM 结构tabs容器、ul、li、a缺一不可缺少ul或li时变体不会按预期呈现。激活态的切换、点击选中等行为不在 Bulma CSS 范围内is-active需要自己在标记或脚本中维护。文档示例中的fas fa-*图标依赖 Font Awesome不用图标框架时删掉icon部分即可不影响三个变体本身。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考