Show / Hide按断点显隐

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

示例

拖动浏览器宽度。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 的布局。

宽屏：挂载的是完整侧栏

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

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`below`	`'sm' \| 'md' \| 'lg' \| 'xl'`	—	视口小于该断点时隐藏。
`above`	`'sm' \| 'md' \| 'lg' \| 'xl'`	—	视口不小于该断点时隐藏。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。