Bulma delete 关闭按钮元素怎么用 is-small、is-medium、is-large 调整尺寸【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma如果你在 Bulma 的 tag、notification 或 message 里放了一个关闭按钮但默认的圆形叉号按钮和周围内容的大小不匹配——要么太大显得突兀要么太小不容易点到——就需要用到delete元素的尺寸修饰符。delete是一个独立元素通常是一个空button靠 Bulma 的 CSS 把它渲染成一个带叉的圆本身不依赖任何图标字体。通过追加is-small、is-medium、is-large三个类名可以在四种尺寸之间切换。先认识 delete 元素的基本写法Bulma 文档中给出的最小用法就是一个不带内容的 buttonbutton classdelete/button官方说明delete 元素是一个可以在不同上下文中使用的独立元素单独出现时就是一个带叉的圆。源码里它由 sass/elements/delete.scss 引入具体样式定义在 sass/utilities/mixins.scss 的deletemixin 中默认尺寸由 CSS 变量--bulma-delete-dimensions控制width、height以及min/max-width、min/max-height全部取自这个变量。用 is-small、is-medium、is-large 切换四种尺寸在delete类后面追加修饰符即可四种尺寸并排放置的官方示例见 delete 元素文档button classdelete is-small/button button classdelete/button button classdelete is-medium/button button classdelete is-large/button不加修饰符时是默认尺寸加上修饰符后按以下规则覆盖尺寸变量来源sass/utilities/mixins.scss 第 115–126 行对应编译产物在 css/bulma.css 的.delete.is-small等选择器类名--bulma-delete-dimensions的值说明无修饰符1.25rem默认尺寸is-small1rem小尺寸is-medium1.5rem中尺寸is-large2rem大尺寸因为用的是rem单位实际像素值会跟随根字号变化。修饰符只是改变--bulma-delete-dimensions这一个变量所以按钮保持正圆内部叉号由::before横向 2px 高、50% 宽和::after纵向 50% 高、2px 宽两条伪元素按百分比绘制会自动跟着尺寸缩放。把对应尺寸的 delete 放进 tag、notification、messagedelete最常见的用途是作为这三个组件的关闭按钮Bulma 文档给出的组合示例可以直接照抄div classblock span classtag is-success Hello World button classdelete is-small/button /span /div div classnotification is-danger button classdelete/button 正文内容…… /div article classmessage is-info div classmessage-header Info button classdelete/button /div div classmessage-body 正文内容…… /div /article这里 tag 内部用了is-smalltag 本身较小配小按钮而 notification 和 message-header 用的是默认尺寸。Bulma 自身对这三类组合也有配套样式例如.tag .delete带有margin-inline-start: 0.25rem和margin-inline-end: -0.375rem见 css/bulma.css 第 5145–5148 行让按钮贴住 tag 边缘这部分不需要你额外处理。选择哪个尺寸修饰符取决于所在容器的大小四个值对照上表即可。如何验证尺寸是否生效仓库自带的 e2e 测试用浏览器计算样式来断言 delete 的宽高可以直接当作验证标准见 docs/cypress/e2e/elements/other.spec.js 第 21–103 行。测试页面 docs/cyp/elements/other.html 里的元素写法与上表一致span iddelete classdelete/span span iddelete-small classdelete is-small/span span iddelete-medium classdelete is-medium/span span iddelete-large classdelete is-large/span测试断言的宽高组合在测试环境下根字号为 16px 时换算的结果默认.deletewidth、height、max/min-width、max/min-height均为 20px1.25remis-small16px1remis-medium24px1.5remis-large32px2rem你可以在自己的页面上用同样方式核对打开浏览器开发者工具选中delete按钮确认width和height的 computed 值是否等于1.25rem/1rem/1.5rem/2rem对应的像素数。如果你的页面根字号不是 16px像素值会同比变化但 rem 值不会变。限制与注意尺寸只有上表四档没有更细粒度的控制需要其他大小时应通过覆盖--bulma-delete-dimensions变量来实现而不是改写 mixin。delete不要求内容是空 button 以外的任何东西官方示例全部使用空button按钮内的叉完全由伪元素绘制。hover/focus 状态下背景透明度会变为 0.4、active 时回到 0.5见 sass/utilities/mixins.scss 第 106–113 行这是默认交互反馈尺寸修饰符不影响这部分行为。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考