Responsive 响应式

用于根据屏幕尺寸显示/隐藏内容的组件。

导入

import { Show, Hide } from 'asterui'

断点

使用与 Tailwind CSS 相同的断点:

断点	最小宽度
`xs`	0px
`sm`	640px
`md`	768px
`lg`	1024px
`xl`	1280px
`2xl`	1536px

示例

在断点之上显示

仅在中等屏幕及以上显示内容。

import { Show, Button } from 'asterui'

function App() {
  return (
      <Show above="md">
        <Button color="primary">Visible on md and larger</Button>
      </Show>
    )
}

export default App

在断点之下隐藏

在小屏幕上隐藏内容。

This is hidden on small screens

import { Hide, Alert } from 'asterui'

function App() {
  return (
      <Hide below="md">
        <Alert type="info">This is hidden on small screens</Alert>
      </Hide>
    )
}

export default App

在特定断点显示

仅在特定断点显示内容。

Tablet or small desktop (md/lg)

import { Show, Alert } from 'asterui'

function App() {
  return (
      <Show at="xs">
        <Alert type="info">Mobile view (xs)</Alert>
      </Show>
      <Show at="sm">
        <Alert type="warning">Small screen (sm)</Alert>
      </Show>
      <Show at={['md', 'lg']}>
        <Alert type="success">Tablet or small desktop (md/lg)</Alert>
      </Show>
      <Show at={['xl', '2xl']}>
        <Alert type="info">Large desktop (xl/2xl)</Alert>
      </Show>
    )
}

export default App

在断点之间显示

在一定范围的断点内显示内容。

Responsive Content

Visible on sm, md, and lg screens only

import { Show, Card } from 'asterui'

function App() {
  return (
      <Show between={['sm', 'lg']}>
        <Card title="Responsive Content" className="bg-base-200">
          Visible on sm, md, and lg screens only
        </Card>
      </Show>
    )
}

export default App

响应式布局

为移动和桌面构建不同的布局。

Logo

import { Show, Hide, Flex, Button } from 'asterui'

function App() {
  return (
      <Flex justify="between" align="center" className="p-4 bg-base-200 rounded-lg">
        <div className="font-bold">Logo</div>
        <Show above="md">
          <Flex gap="md">
            <Button variant="ghost" size="sm">
              Home
            </Button>
            <Button variant="ghost" size="sm">
              About
            </Button>
            <Button variant="ghost" size="sm">
              Contact
            </Button>
          </Flex>
        </Show>
        <Hide above="md">
          <Button variant="ghost" size="sm">
            Menu
          </Button>
        </Hide>
      </Flex>
    )
}

export default App

API

`Show` / `Hide`

属性	描述	类型	默认值
`children`	要显示/隐藏的内容	`React.ReactNode`	-
`above`	在此断点及以上显示/隐藏	`Breakpoint`	-
`below`	在此断点以下显示/隐藏	`Breakpoint`	-
`at`	恰好在此断点显示/隐藏(或断点数组)	`Breakpoint \| Breakpoint[]`	-
`between`	在两个断点之间显示/隐藏(包括)	`[Breakpoint, Breakpoint]`	-
`data-testid`	用于测试的测试 ID	`string`	-

注意

使用 JavaScript 检测断点,而不是 CSS 媒体查询
一次只应使用一个条件属性(above、below、at 或 between)
服务器端渲染默认为 1024px 宽度(lg 断点)

另请参阅: useBreakpoint hook 以编程方式访问断点信息。