SwipeMenu React

English

一个简单的React侧滑菜单组件，支持移动端侧滑菜单和PC端hover弹出菜单。 在线体验

安装

1npm install swipe-menu-react
2# 或
3yarn add swipe-menu-react
4# 或
5pnpm add swipe-menu-react

⚠在tailwind.config.ts中 (v3)

1import type { Config } from "tailwindcss";
2export default {
3  content: [
4    ...
5    "./node_modules/swipe-menu-react/dist/**/*.{js,ts,jsx,tsx}", // ⚠添加这一行
6  ],
7  ...
8} satisfies Config;

⚠在index.css中 (v4)

1@import "tailwindcss";
2@source '../node_modules/swipe-menu-react/dist/**/*.{js,ts,jsx,tsx}'; // ⚠添加这一行

特性

• 触屏设备上通过滑动显示菜单
• PC设备上通过鼠标悬停显示菜单
• 可自定义样式
• 内置Tailwind CSS，无需额外配置

示例用法

1import { SwipeMenu } from 'swipe-menu-react';
2import { Icon } from "@iconify/react";
3
4function App() {
5  return (
6    <SwipeMenu
7      className="w-md gap-1 p-1"
8      asideClassName="flex items-center gap-1"
9      maxWidth="6rem"
10      aside={
11        <>
12          <button className="text-blue-500 text-2xl">
13            <Icon icon="lucide:edit" />
14          </button>
15          <button className="text-red-500 text-2xl">
16            <Icon icon="lucide:trash-2" />
17          </button>
18        </>
19      }>
20      <button className="truncate w-full h-full text-start">
21        A Simple Description to test the swipe menu
22      </button>
23    </SwipeMenu>
24  );
25}

API

SwipeMenu 组件

属性	类型	默认值	说明
children	React.ReactNode	-	主要内容
aside	React.ReactNode	-	滑动显示的侧边内容
maxWidth	string	'18rem'	侧边内容最大宽度
className	string	-	组件根元素的额外类名
mainClassName	string	-	主内容区域的额外类名
asideClassName	string	-	侧边内容区域的额外类名

许可证

MIT