概览

Raaghu 布局

预构建的应用程序布局，带有导航、标题和响应式设计。

使用布局的两种方式

选项 1：从源码/Storybook

克隆仓库：

git clone https://github.com/Wai-Technologies/raaghu-react.git
cd raaghu-react
npm install

使用方法：

// 从本地源导入
import RdsCompAppShell from '../raaghu-react/src/rds-comp-app-shell';

function App() {
  return (
    <RdsCompAppShell
      title="My App"
      navigation={[
        { label: 'Dashboard', href: '/' },
        { label: 'Users', href: '/users' }
      ]}
      user={{ name: 'John Doe' }}
    >
      <YourContent />
    </RdsCompAppShell>
  );
}

选项 2：NPM 包（推荐）

安装：

## 安装主包
npm install @waiin/raaghu-react

## 安装主题包
npm install @waiin/raaghu-react-themes

设置主题：

import '@waiin/raaghu-react-themes/build/styles/default.css';

使用方法：

import { RdsCompAppShell } from '@waiin/raaghu-react';

function App() {
  return (
    <RdsCompAppShell
      title="My App"
      navigation={[
        { label: 'Dashboard', href: '/' },
        { label: 'Users', href: '/users' }
      ]}
      user={{ name: 'John Doe' }}
    >
      <YourContent />
    </RdsCompAppShell>
  );
}

布局选项

App Shell 布局

适用于业务应用的完整应用结构：

使用 NPM 包：

import { RdsCompAppShell } from '@waiin/raaghu-react';

<RdsCompAppShell
  title="My App"
  navigation={[
    { label: 'Dashboard', href: '/' },
    { label: 'Users', href: '/users' }
  ]}
  user={{ name: 'John Doe' }}
>
  <YourContent />
</RdsCompAppShell>

从 Source 使用：

import RdsCompAppShell from '../raaghu-react/src/rds-comp-app-shell';

<RdsCompAppShell
  title="My App"
  navigation={[
    { label: 'Dashboard', href: '/' },
    { label: 'Users', href: '/users' }
  ]}
  user={{ name: 'John Doe' }}
>
  <YourContent />
</RdsCompAppShell>

功能：

• 响应式侧边栏导航
• 带用户菜单的标题栏
• 移动端汉堡菜单
• 主题切换

自定义布局

适用于独特设计：

使用 NPM 包：

import { RdsCompLayout } from '@waiin/raaghu-react';

<RdsCompLayout
  header={<MyHeader />}
  sidebar={<MySidebar />}
  footer={<MyFooter />}
>
  <MyContent />
</RdsCompLayout>

从 Source 使用：

import RdsCompLayout from '../raaghu-react/src/rds-comp-layout';

<RdsCompLayout
  header={<MyHeader />}
  sidebar={<MySidebar />}
  footer={<MyFooter />}
>
  <MyContent />
</RdsCompLayout>