发现Next.js的新伙伴：Shadcn UI Sidebar - 打造优雅的响应式侧边栏

作者：System 时间：2024年08月07日分类：所有,javascript 字数：663

这篇文章距离上次修改已过272天，其中的内容可能已经有所变动。

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以保持代码的现代和简洁。

发现Next.js的新伙伴：Shadcn UI Sidebar - 打造优雅的响应式侧边栏

评论已关闭

推荐阅读