发现Next.js的新伙伴：Shadcn UI Sidebar - 打造优雅的响应式侧边栏
warning:
这篇文章距离上次修改已过206天，其中的内容可能已经有所变动。
import React from 'react';
import { Sidebar } from 'shadcn-ui-sidebar';
const SidebarExample = () => {
return (
<Sidebar
breakpoint="lg"
onChange={(isOpen) => {
console.log(`Sidebar is ${isOpen ? 'open' : 'closed'}`);
}}
>
{({ openSidebar, closeSidebar }) => (
<>
<button onClick={openSidebar}>打开侧边栏</button>
<button onClick={closeSidebar}>关闭侧边栏</button>
</>
)}
</Sidebar>
);
};
export default SidebarExample;这个例子展示了如何使用shadcn-ui-sidebar创建一个简单的侧边栏，并通过两个按钮控制它的打开和关闭。当侧边栏状态改变时，它会在控制台打印出相应的信息。这个例子简洁明了，并且使用了函数式组件和hooks以保持代码的现代和简洁。
评论已关闭