ResponsiveDrawer 响应式抽屉

使用 DaisyUI 的抽屉的响应式侧边栏布局。用于在移动设备上切换但在大屏幕上始终可见的导航侧边栏。

导入

import { ResponsiveDrawer } from 'asterui'

示例

基础响应式抽屉

在移动设备上切换的响应式侧边栏。

</>

Open Sidebar

Main content area

• Dashboard
• Settings
• Profile

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        sidebar={
          <Menu>
            <Menu.Item>Dashboard</Menu.Item>
            <Menu.Item>Settings</Menu.Item>
            <Menu.Item>Profile</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Open Sidebar
          </Button>
          <p className="mt-4">Main content area</p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

在桌面上始终打开

侧边栏在移动设备上切换,但在 lg 屏幕及以上始终可见。

</>

Menu

Resize the window to see the responsive behavior. On large screens, the sidebar is always visible.

• Navigation
• Dashboard
• Analytics
• Settings

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        responsive="lg"
        sidebar={
          <Menu>
            <Menu.Title>Navigation</Menu.Title>
            <Menu.Item>Dashboard</Menu.Item>
            <Menu.Item>Analytics</Menu.Item>
            <Menu.Item>Settings</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button className="lg:hidden" onClick={() => setOpen(true)}>
            Menu
          </Button>
          <p className="mt-4">
            Resize the window to see the responsive behavior.
            On large screens, the sidebar is always visible.
          </p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

自定义宽度

具有自定义宽度的侧边栏。

</>

Open Wide Sidebar

• Wide Sidebar
• Item with more space
• Another item

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        width={400}
        sidebar={
          <Menu>
            <Menu.Title>Wide Sidebar</Menu.Title>
            <Menu.Item>Item with more space</Menu.Item>
            <Menu.Item>Another item</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Open Wide Sidebar
          </Button>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

右侧侧边栏

位于右侧的侧边栏。

</>

Open Right Sidebar

Main content area

• Info Panel
• Quick Actions
• Help

import { ResponsiveDrawer, Button, Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        end
        sidebar={
          <Menu>
            <Menu.Item>Info Panel</Menu.Item>
            <Menu.Item>Quick Actions</Menu.Item>
            <Menu.Item>Help</Menu.Item>
          </Menu>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Open Right Sidebar
          </Button>
          <p className="mt-4">Main content area</p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

自定义侧边栏内容

具有自定义样式内容的侧边栏。

</>

Toggle Sidebar

Application content

JD

John Doe

Admin

• Dashboard
• Users
• Reports
• Settings

import { ResponsiveDrawer, Button, Avatar } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  
  return (
      <ResponsiveDrawer
        open={open}
        onOpenChange={setOpen}
        sidebarClassName="bg-base-300"
        sidebar={
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <Avatar>JD</Avatar>
              <div>
                <div className="font-semibold">John Doe</div>
                <div className="text-sm opacity-70">Admin</div>
              </div>
            </div>
            <ul className="menu">
              <li><a>Dashboard</a></li>
              <li><a>Users</a></li>
              <li><a>Reports</a></li>
              <li><a>Settings</a></li>
            </ul>
          </div>
        }
      >
        <div className="p-4">
          <Button onClick={() => setOpen(true)}>
            Toggle Sidebar
          </Button>
          <p className="mt-4">Application content</p>
        </div>
      </ResponsiveDrawer>
    )
}

export default App

API

ResponsiveDrawer

属性	描述	类型	默认值
children	主内容区域	React.ReactNode	-
sidebar	侧边栏内容	React.ReactNode	-
open	受控打开状态	boolean	false
onOpenChange	打开状态更改时的回调	(open: boolean) => void	-
end	将侧边栏定位在右侧	boolean	false
width	侧边栏的宽度	number | string	320
responsive	侧边栏变为始终可见的断点	'sm' | 'md' | 'lg' | 'xl' | '2xl'	-
sidebarClassName	侧边栏容器的额外类	string	-
contentClassName	内容区域的额外类	string	-
overlayClassName	覆盖层的额外类	string	-
id	抽屉的唯一 ID(如果未提供则自动生成)	string	-
className	抽屉包装器的额外 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

使用注意事项

• ResponsiveDrawer 包装了 DaisyUI 的 drawer 组件
• 使用 open 和 onOpenChange 进行受控状态
• 使用 responsive 属性使侧边栏在某个断点之上始终可见
• 使用 width 自定义侧边栏宽度(默认: 320px)
• 使用 end 属性将侧边栏定位在右侧
• 对于在内容上滑动的面板抽屉(如表单或详细视图),请改用 Drawer 组件

对比

功能	ResponsiveDrawer	Drawer	Layout.Sider
用例	响应式导航侧边栏	表单、详情的覆盖面板	永久可折叠侧边栏
渲染	页面布局的一部分	传送到 document.body	Layout 结构的一部分
覆盖层	是(移动设备)	是(始终)	否
响应式	是(在断点自动打开)	否	是(自动折叠)
位置	左或右	全部 4 个方向	左或右
页眉/页脚	无内置	是(title、footer 属性)	无内置