Yeti Sidebar 布局组件完全指南：固定宽度侧栏与弹性内容的无断点自适应排版

Yeti Sidebar 布局组件完全指南固定宽度侧栏与弹性内容的无断点自适应排版【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti导读本文深入解析 Yeti一个 CSS-first、原生、零构建的布局与样式框架中的sidebar布局组件它如何把具有自然宽度的子元素导航列表、图片、表单摘要与占据剩余空间的弹性内容并排摆放又如何在容器宽度不足时自动堆叠。读完本文你将掌握data-side、data-width、data-gap、data-align四个属性的全部取值与默认值理解无媒体查询断点的 flexbox 数学原理并能直接复制可运行的 HTML 示例到自己的页面中。说明本组件属于 Yeti 的布局layouts体系。docs/sidebar.md是由bin/gen-docs.js从 src/layouts/sidebar/manifest.json 生成的文档本文同时结合 sidebar.css 源码与其测试用例展开读者可对照研读。快速上手最小示例在页面引入src/yeti.css或按需引入 src/layouts/sidebar/sidebar.css后写一个带sidebar类的容器放入恰好两个子元素即可div classsidebar>layer yeti.layouts { .sidebar { display: flex; flex-wrap: wrap; align-items: var(--_yeti-align); gap: var(--_yeti-gap); } .sidebar:not([data-gap]) { --_yeti-gap: var(--yeti-space-md); } .sidebar:not([data-width]) { --_yeti-width: var(--yeti-width-sm); } .sidebar:not([data-align]) { --_yeti-align: stretch; } .sidebar * { margin: 0; } /* 侧栏子元素默认是第一个data-sideend 时是最后一个 */ .sidebar:not([data-sideend]) :first-child, .sidebar[data-sideend] :last-child { flex-basis: var(--_yeti-width); flex-grow: 1; } /* 内容子元素占满其余空间且拒绝缩到容器一半以下 */ .sidebar:not([data-sideend]) :last-child, .sidebar[data-sideend] :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; } }这段代码里藏着全部机制一个可换行的 flex 行容器是display: flex; flex-wrap: wrap两个子元素共享一条主轴宽度不够时第二个子元素会自然换到新的一行。侧栏子元素的宽度以data-width对应的 token 作为flex-basisflex-grow: 1让它微微参与增长测试用例中注释为 flex-grow: 1 against the contents 999 leaves the sidebar a fraction of a pixel over its basis即侧栏宽度基本等于其 basis。内容子元素的贪婪增长flex-basis: 0; flex-grow: 999使它吃掉侧栏之后的所有剩余空间关键在min-inline-size: 50%——内容子元素拒绝被压缩到容器一半以下。切换点由数字决定当侧栏 basis 内容最小 50% gap超过容器宽度时flex 布局让内容子元素换行两元素各自占满整行flex-grow生效、basis 变为 0堆叠时占满宽度。没有断点切换发生在任何宽度下该发生的位置——无论容器是 500px 还是 2000px规则始终一致。关键细节属性如何映射为 CSS 变量data-*属性并不直接被组件读取而是通过 src/layouts/attributes.css 中共享的属性词表attribute vocabulary映射为私有 CSS 变量[data-widthxs|sm|md|lg|xl|2xl]→--_yeti-width: var(--yeti-width-*)[data-gapnone|xs|...|3xl]→--_yeti-gap: var(--yeti-space-*)[data-alignstart|center|end|stretch|baseline]→--_yeti-align: flex-start|center|flex-end|stretch|baseline。组件只在属性缺席时用.sidebar:not([data-*])规则提供自己的默认值。这样设计的好处是嵌套布局不会继承父级的属性值——子布局没有设置属性时拿到的是它自己的默认值而非父级的私有变量。这在复杂页面例如侧栏内再嵌一个stack中能避免意外的样式泄漏。为什么叫 Sidebar与 Foundation 6 的对比命名直白——sidebar 说的就是那个固定宽度的子元素本身。文档中提到Foundation 6 实现同样的效果需要.grid-x网格列 medium-8/medium-4这样的栅格类!-- Foundation 6 的思路把切换点固定在视口断点上 -- div classgrid-x div classcell medium-4侧栏/div div classcell medium-8内容/div /div这种方案的局限在于切换被硬编码到视口断点如medium而不是跟随内容实际尺寸。侧栏实际只有 300px 宽时在 800px 视口里明明可以并排栅格却可能因为视口没到某个断点而提前堆叠。Yeti 的sidebar组件把决策权交还给布局引擎由容器宽度与内容最小宽度实时决定视口只间接参与通过容器宽度内容才是真正的判据。把内容放在源码前面data-sideend排版上有时需要内容优先——例如移动端 SEO、屏幕阅读器或 Tab 顺序中主内容应该先出现。此时把内容写在源码的第一个位置用data-sideend让最后一个子元素成为侧栏div classsidebar>!-- 右侧侧栏、内容优先、加宽间距、垂直居中 -- div classsidebar>:root { --yeti-width-sm: 20rem; }内部 token可能在次要版本间变动组件还使用以下私有内部token它们以--_yeti-前缀命名标识为 internalpublic: false可能在次要版本间变动不建议在业务代码中直接依赖--_yeti-gap间隙来自data-gap--_yeti-width侧栏宽度来自data-width--_yeti-align交叉轴对齐来自data-align。无障碍Accessibility本组件纯视觉不承载语义角色它只负责排列两个子元素不引入隐式语义、不劫持键盘操作、不需要 ARIA 属性manifest 中a11y.requiredAttributes为空数组。内容优先级由你决定当主内容更重要时SEO、阅读顺序、键盘 Tab 顺序把内容写在源码第一位并用data-sideend让侧栏显示在后面。这正是组件对无障碍的核心支持方式。若侧栏内是导航记得给nav加上aria-label如示例中的aria-labelSection帮助辅助技术区分多个导航区域。测试 test/browser/layouts/sidebar.spec.js 中通过 axe 对 fixture 页面执行了无障碍扫描断言无违规项expect(await axe(page)).toEqual([])从侧面印证了该组件的无障碍默认表现。对应 fixture 见 test/browser/fixtures/layouts/sidebar.html。浏览器支持根据 manifest 中support字段组件要求如下无防护used without guardsflexbox gap——即现代浏览器对 flex 容器gap属性的支持Chrome 84、Firefox 63、Safari 14.1 等主流版本均满足supports防护之后无guarded: []组件不需要任何能力检测降级。换句话说这个组件依赖现代 flexbox gap不提供旧的 margin 模拟降级路径适合定位为面向现代浏览器的原生 CSS 方案。JavaScript不需要manifest.json中js: null文档明确该组件纯 CSS无任何 JavaScript。这意味着零运行时开销、零事件绑定任何框架React、Vue、Svelte 或纯 HTML中均可直接使用切换逻辑完全交给浏览器布局引擎。这正契合 Yeti CSS-first、原生、零构建的框架定位。测试验证行为有据可依test/browser/layouts/sidebar.spec.js 用 Playwright 对组件行为做了回归验证可作为理解其语义的补充证据1000px 宽度下并排侧栏顶部与内容对齐侧栏宽度接近--yeti-width-sm误差小于 2px因为flex-grow: 1会分到一丁点剩余空间侧栏右缘与内容左缘的间距接近--yeti-space-md400px 宽度下堆叠内容位于侧栏下方两者宽度都接近 400px占满容器data-sideend最后一个子元素成为侧栏且显示在右侧宽度接近--yeti-width-xs子元素无外边距、axe 无障碍扫描无违规。这些用例与 test/browser/fixtures/layouts/sidebar.html fixture 一一对应读者可以在本地运行npm test或 Playwright 相关命令复现验证。总结Yeti 的sidebar布局组件用一段简洁的 flexbox 规则实现了固定宽度侧栏 弹性内容 自动堆叠的完整能力无媒体查询、无断点、无 JavaScript切换时机完全由内容尺寸决定data-side解决了内容优先的无障碍诉求data-width/data-gap/data-align提供了宽度、间距与对齐的细粒度控制公共 token 允许在不改动组件源码的前提下覆盖默认值。对于导航正文、表单摘要这类最常见的两栏页面结构它是一行 HTML 即可落地的可靠方案。更多布局组件的横向对比可继续阅读 docs/guides/layouts.md 与 docs/guides/components.md。【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考