Bulma list of tags 深度解析用 tags 容器把多个标签组合成可换行的列表【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulmaBulma 的 tag标签元素虽然小巧却常用于给文本、组件附加语义信息。2017 年的博客文章 New feature: list of tags 引入了“标签列表”能力正如可以组合控件一样现在可以用tags容器把多个标签组合成一个可以自动换行的列表并附带is-delete删除标签这一“bonus”。读完本篇你将掌握tags容器的全部用法、修饰符组合并能从 sass/elements/tag.scss 源码与 Cypress 测试中理解其实现原理与自动验证方式。tag 元素本身一个 2em 高的信息载体在进入“列表”之前先回顾单个 tag 的定位。官方文档 Tags 将其描述为“小巧但多用途的元素”适合把信息附加到 block 或其他组件上也适合以数字形式展示、用于长列表span classtag Tag label /span从源码 sass/elements/tag.scss 可以看到.tag采用display: inline-flex、height: 2em、font-size: var(--bulma-size-small)12px、左右内边距0.75em与white-space: nowrap高度始终是字号的 2 倍因此三种尺寸对应 24px / 32px / 40px 的高度这一点被 Cypress 测试 tag.spec.js 逐像素断言normal 12px/24px、medium 16px/32px、large 20px/40px。颜色方面源码通过each $name, $pair in $tag-colorstag.scss#L112-L132为全部 10 个语义色black、dark、light、white、primary、link、info、success、warning、danger批量生成is-{color}修饰符并额外支持is-light浅色变体——它把背景光度和前景色分别切换为对应颜色的-light/-light-invert值span classtag is-successSuccess/span span classtag is-success is-lightLight success/span核心功能tags 容器与标签列表单个标签很少孤立出现这正是该博客文章引入tags容器的动机“像组合控件一样现在可以把多个标签组合成一个可跨多行的列表”。基本用法是把若干tag放进一个tags容器div classtags span classtagOne/span span classtagTwo/span span classtagThree/span /div如果列表很长容器会自动在多行之间换行同时保持所有标签间距均匀来自文档“List of tags”小节div classtags span classtagOne/span span classtagTwo/span !-- … Twenty 个标签自动折行且间距一致 -- span classtagTwenty/span /div源码解析flex-wrap gap 实现均匀换行这种“自动换行且间距均匀”的行为在 sass/elements/tag.scss#L19-L27 中实现.tags { extend %block; align-items: center; color: hsl(...); display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; }要点有三display: flexflex-wrap: wrap是“标签流式换行”的基础gap: 0.5rem用现代 CSS 的间隙属性保证行内与行间间距完全一致无需依赖 margin 折叠extend %block复用 utilities/extends.scss 中定义的 block 公共样式使tags容器继承与block元素一致的上下节奏margin-bottom 等Cypress 测试 tag.spec.js#L70-L79 中“容器display: flex”与“容器内.tag的下边距为 8px”的断言正是在验证这一容器级间距行为。容器修饰符统一尺寸、对齐方式are-medium / are-large一次改变所有标签的尺寸文档指出可以一次性改变容器中所有标签的大小。对应源码 tag.scss#L29-L44.are-medium { .tag:not(.is-normal):not(.is-large) { font-size: var(--bulma-size-normal); // 16px } } .are-large { .tag:not(.is-normal):not(.is-medium) { font-size: var(--bulma-size-medium); // 20px } }注意选择器里的:not()排除项容器级尺寸只作用于“没有显式指定尺寸”的标签因此可以在同一列表里混合保留个别标签的原尺寸div classtags are-medium span classtagMedium/span span classtag is-normalNormal/span span classtag is-largeLarge/span span classtagMedium/span /div测试 tag.spec.js#L81-L89 断言了are-medium下标签字号为 16px、are-large下为 20px。is-centered / is-right整行对齐.is-centered { gap: 0.25rem; justify-content: center; } .is-right { justify-content: flex-end; }见 tag.scss#L46-L53is-centered在居中的同时把gap收紧到0.25rem使成组的标签视觉上更像一个整体。测试对这两种对齐分别断言了justify-content为center与flex-endtag.spec.js#L91-L99。div classtags are-large is-centered span classtagCentered/span span classtagTags/span /divhas-addons把标签“拼接”成一个整体博客文章强调的组合技巧是has-addons修饰符——把标签彼此贴合去掉间隙与内侧圆角形成类似“分段控件”的外观div classtags has-addons span classtagPackage/span span classtag is-primaryBulma/span /div其实现见 tag.scss#L55-L69容器gap: 0消除所有间隙非首个标签清除左侧圆角border-start-start-radius/border-end-start-radius置 0非末尾标签清除右侧圆角从而只有首尾标签保留圆角视觉上拼接为一个整体。Cypress 测试直接检查了拼接后第二个标签的borderRadius为0pxtag.spec.js#L101-L105。实战模式多组 addons 标签 可删除的博客标签官方文档“Tag addons”小节给出了两个典型实战场景。场景一多组“键值”标签横排。如果想把多个tags has-addons容器组合在一起使用field元素加is-grouped和is-grouped-multiline修饰符div classfield is-grouped is-grouped-multiline div classcontrol div classtags has-addons span classtag is-darknpm/span span classtag is-info0.0.0/span /div /div div classcontrol div classtags has-addons span classtag is-darkbuild/span span classtag is-successpassing/span /div /div div classcontrol div classtags has-addons span classtag is-darkchat/span span classtag is-primaryon gitter/span /div /div /divis-grouped-multiline让这组“徽章”在窄屏下自动折行是项目状态页、构建信息展示页的常见布局。场景二带删除按钮的博客标签列表——这正是博客文章“bonus”提到的 delete tag 与 addons 的组合div classfield is-grouped is-grouped-multiline div classcontrol div classtags has-addons a classtag is-linkTechnology/a a classtag is-delete/a /div /div !-- 更多 control / tags has-addons / is-link is-delete 单元 -- /div这里的is-delete把一个空标签变成纯 CSS 绘制的“×”删除按钮。其实现位于 tag.scss#L165-L192.is-delete { margin-inline-start: var(--bulma-tag-delete-margin); // 1px padding: 0; position: relative; width: 2em; ::before, ::after { background-color: currentColor; content: ; display: block; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); } ::before { height: 1px; width: 50%; } // 横线 ::after { height: 50%; width: 1px; } // 竖线 }两条 1px 的伪元素旋转 45° 交叉成“×”颜色跟随currentColor因此在has-addons中与左侧is-link标签颜色统一margin-inline-start: 1px由--bulma-tag-delete-margin控制让它与文本标签之间保留一丝缝隙。除独立使用外标签内还可以直接内嵌一个delete按钮“Combinations”组合删除按钮的 margin 由 tag.scss#L106-L109 精确内缩使其贴合在标签内部span classtag is-success Bar button classdelete is-small/button /span交互态与其余修饰符hover/active 反馈a.tag、button.tag或带is-hoverable的标签会响应:hover/:active通过注册tag-background-l-delta变量微调背景光度tag.scss#L199-L219。这也是博客标签里删除按钮用a而非span的原因之一——悬停即有反馈。is-roundedborder-radius: var(--bulma-radius-rounded)测试断言其值为9999pxtag.spec.js#L21-L24。图标内嵌.tag .icon按首尾位置自动加负 margin使图标完全贴合标签边缘tag.scss#L147-L162。可定制变量从 docs/_data/variables/elements/tag.json 汇总tag 相关可定制点分两层层级变量默认值作用Sass 变量$tag-radiusvar(--bulma-radius)标签圆角is-rounded用radius-roundedSass 变量$tag-delete-margin1pxis-delete标签的前内边距间距Sass 变量$tag-colors$colors生成is-{color}修饰符的颜色集合CSS 自定义属性--bulma-tag-h/--bulma-tag-s/--bulma-tag-background-l继承 scheme 主题值背景色 HSL 三通道CSS 自定义属性--bulma-tag-color-l继承 text 光度前景色光度CSS 自定义属性--bulma-tag-background-l-delta0%背景光度偏移hover/active 时改写CSS 自定义属性--bulma-tag-hover-background-l-delta/--bulma-tag-active-background-l-delta全局 hover/active delta悬停/激活反馈强度.tag在 tag.scss#L73-L85 中通过cv.register-vars把上述值注册为 CSS 自定义属性因此在不编译 Sass 的前提下也可以按 CSS variables 定制方式 直接覆盖这些属性来微调标签配色颜色修饰符切换时重写的同样是tag-h/s与tag-background-l见 tag.scss#L112-L132。小结验证与延伸路径list of tags这一特性的完整证据链可以在仓库中逐层核对功能公告docs/_posts/2017-08-03-list-of-tags.md本文的原始出处用法与全部示例docs/documentation/elements/tag.htmlList of tags、Tag addons 小节实现源码sass/elements/tag.scss.tags容器 L19-L70、.tag元素 L72-L197、交互态 L199-L219自动化断言docs/cypress/e2e/elements/tag.spec.js 配合测试页面 docs/cyp/elements/tag.html覆盖尺寸、颜色、容器对齐与 addons 圆角。核心要点回顾tags容器用flex-wrap gap实现均匀换行are-medium/are-large级联改尺寸且可被单标签修饰符“豁免”is-centered/is-right控制整行对齐has-addons拼接标签并抹除内侧圆角is-delete提供纯 CSS 的删除按钮与前两者组合即得到博客标签这类常见 UI。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考