跳到主要内容

Show / Hide 显隐Show · Hide

纯 CSS 的按断点显隐。内容始终在 DOM 里，只是在不该出现的宽度上 display: none，所以服务端渲染的首屏就是对的，不会闪。两个组件是同一件事的两种说法，哪个读起来顺用哪个。

示例

above 与 below

拖动浏览器宽度。above 含断点本身（min-width），below 不含。

Show above="lg"：≥ 1024 才显示
Show above="md"：≥ 768 才显示
Show below="md"：< 768 才显示
Show above="sm" below="lg"：520–1023 之间
Hide below="sm"：< 520 时隐藏

同一位置换一套内容

包裹层是 display: contents，不产生额外的盒子，里面的按钮直接参与外层 Inline 的布局。

什么时候改用 useBreakpoint

宽屏：挂载的是完整侧栏

API

Show 属性

属性类型默认值说明
asElementType'div'渲染成哪个元素。
above'sm' | 'md' | 'lg' | 'xl'—视口不小于该断点时才显示。
below'sm' | 'md' | 'lg' | 'xl'—视口小于该断点时才显示。和 above 同时给就是一个区间。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

Hide 属性

属性类型默认值说明
asElementType'div'渲染成哪个元素。
below'sm' | 'md' | 'lg' | 'xl'—视口小于该断点时隐藏。
above'sm' | 'md' | 'lg' | 'xl'—视口不小于该断点时隐藏。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。
  • 被隐藏的内容对读屏和键盘也是隐藏的（display: none），不用另外处理。
  • 隐藏的组件仍然挂载着，副作用（请求、定时器）照常运行；两套内容里有相同 id 的元素时会重复。遇到这些情况改用 useBreakpoint。
  • 看的是视口宽度，不是容器宽度。