当前位置：首页 > news >正文

yggjs_rlayout框架v0.1.2使用教程 01快速开始

news 2025/8/25 9:48:45

简介

这是一套专门为科技感、未来感界面设计的 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>