yggjs_rlayout框架v0.1.2使用教程 01快速开始
简介
这是一套专门为科技感、未来感界面设计的 React 组件库。提供完整的科技风格界面解决方案，适合用于：
- 后台管理系统
- 监控面板
- 数据可视化平台
- 仪表板应用
设计特色
- 深色系配色：深蓝色背景配合青色荧光效果
- 高科技视觉：发光边框、毛玻璃质感、渐变背景
- 流畅动画：悬停效果、过渡动画、状态变化
- 完整生态：从布局到功能组件的全覆盖
基础使用
1. 最简单的使用方式
import { TechLayout } from 'yggjs_rlayout/tech';function App() {const menuItems = [{ key: 'dashboard', label: '仪表板', icon: 'dashboard' },{ key: 'users', label: '用户管理', icon: 'users' },];return (<TechLayoutbrand="我的应用"sidebarItems={menuItems}selectedSidebarKey="dashboard"><div>这里是你的页面内容</div></TechLayout>);
}
2. 完整的应用示例
import { TechLayout, TechButton, TechCard, TechPageHeader
} from 'yggjs_rlayout/tech';function Dashboard() {const menuItems = [{ key: 'dashboard', label: '仪表板', icon: 'dashboard' },{ key: 'users', label: '用户管理', icon: 'users' },{ key: 'settings', label: '设置', icon: 'settings' },];return (<TechLayoutbrand="管理后台"sidebarItems={menuItems}selectedSidebarKey="dashboard"onSidebarSelect={(key) => console.log('选中菜单:', key)}onSearch={(value) => console.log('搜索:', value)}><TechPageHeadertitle="仪表板"description="系统概览和关键指标"actions={<TechButton variant="primary" icon="plus">新建项目</TechButton>}/><div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}><TechCard title="用户统计"><p>在线用户: 1,234</p></TechCard><TechCard title="系统状态"><p>服务状态: 正常</p></TechCard></div></TechLayout>);
}
核心概念
主题系统
所有组件都会自动应用科技风主题，你也可以通过 TechThemeProvider 自定义主题：
import { TechThemeProvider } from 'yggjs_rlayout/tech';<TechThemeProvider theme={{colors: {accent: '#ff6b35' // 自定义强调色}
}}><App />
</TechThemeProvider>
布局结构
TechLayout: 整体页面布局TechHeader: 顶部导航栏TechSidebar: 侧边栏菜单TechPageHeader: 页面标题区域
基础组件
TechButton: 科技风按钮TechCard: 科技风卡片TechIcon: 图标组件
下一步
- TechLayout 布局组件 - 了解如何构建完整页面布局
- TechButton 按钮组件 - 学习按钮的各种用法
- TechCard 卡片组件 - 掌握内容展示组件
需要帮助？
如果在使用过程中遇到问题，可以：
- 查看具体组件的使用文档
- 参考示例代码
- 检查控制台错误信息