@aspect/lynx-mui

Material UI for Lynx - 一比一实现 MUI 组件库的 Lynx 版本

📖 简介

@aspect/lynx-mui 是 Material UI (MUI) 的 Lynx 原生实现版本。它提供了与 MUI 相同的 API 和组件，但专为 Lynx 原生应用优化。

✨ 特性

• 🎨 一比一实现 - 完整复制 MUI 的 API 和设计
• 📱 Lynx 原生 - 使用 Lynx 原生组件，高性能渲染
• 🎯 类型安全 - 完整的 TypeScript 类型定义
• 🌈 主题系统 - 支持自定义主题和深色模式
• 📦 按需加载 - 支持 Tree Shaking

📦 安装

npm install @aspect/lynx-mui
# 或
yarn add @aspect/lynx-mui
# 或
pnpm add @aspect/lynx-mui

🚀 快速开始

import { Button, Typography, Box } from '@aspect/lynx-mui'

function App() {
  return (
    <Box p={2}>
      <Typography variant="h4">Hello Lynx MUI!</Typography>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </Box>
  )
}

📚 组件列表

基础组件 (Foundations)

• [x] Theme
• [x] Box
• [ ] Typography
• [ ] Paper
• [ ] Container
• [ ] Stack
• [ ] Grid

输入组件 (Inputs)

• [ ] Button
• [ ] IconButton
• [ ] TextField
• [ ] Checkbox
• [ ] Radio
• [ ] Switch
• [ ] Slider
• [ ] Select

数据展示 (Data Display)

• [ ] Avatar
• [ ] Badge
• [ ] Chip
• [ ] Divider
• [ ] List
• [ ] Table
• [ ] Tooltip

反馈组件 (Feedback)

• [ ] Alert
• [ ] CircularProgress
• [ ] LinearProgress
• [ ] Skeleton
• [ ] Snackbar
• [ ] Dialog

表面组件 (Surfaces)

• [ ] Card
• [ ] Accordion
• [ ] AppBar
• [ ] Toolbar
• [ ] Paper

导航组件 (Navigation)

• [ ] Drawer
• [ ] Menu
• [ ] Tabs
• [ ] BottomNavigation
• [ ] Breadcrumbs

弹出层 (Overlays)

• [ ] Modal
• [ ] Popover
• [ ] Popper

🎨 主题定制

import { createTheme, ThemeProvider } from '@aspect/lynx-mui'

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
})

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用 */}
    </ThemeProvider>
  )
}

📁 项目结构

lynx-mui/
├── src/
│   ├── components/      # 所有组件
│   │   ├── Box/
│   │   ├── Button/
│   │   ├── Typography/
│   │   └── ...
│   ├── theme/           # 主题系统
│   ├── hooks/           # 自定义 Hooks
│   ├── utils/           # 工具函数
│   ├── types/           # 类型定义
│   └── index.ts         # 主入口
├── mui-source/          # MUI 源码参考
├── IMPLEMENTATION_PLAN.md
├── package.json
└── README.md

🔄 与 MUI 的差异

| 特性 | MUI | Lynx MUI | |------|-----|----------| | 渲染引擎 | DOM | Lynx Native | | 样式系统 | CSS-in-JS | CSS | | 动画 | Framer Motion | CSS Animation | | 事件 | onClick | bindtap |

🤝 贡献

欢迎贡献代码！请查看 IMPLEMENTATION_PLAN.md 了解待实现的组件。

📄 许可证

MIT License © 2024 AetherLink Team

🙏 致谢

• Material UI - 原版 MUI 组件库
• Lynx - Lynx 跨平台框架