Visão Geral

Layouts Raaghu

Layouts de aplicação pré-construídos com navegação, cabeçalhos e design responsivo.

Duas Maneiras de Usar os Layouts

Opção 1: Do Código-Fonte/Storybook

Clonar Repositório:

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

Uso:

// Importar do código-fonte local
import RdsCompAppShell from '../raaghu-react/src/rds-comp-app-shell';

function App() {
  return (
    <RdsCompAppShell
      title="Minha App"
      navigation={[
        { label: 'Painel', href: '/' },
        { label: 'Usuários', href: '/users' }
      ]}
      user={{ name: 'John Doe' }}
    >
      <SeuConteudo />
    </RdsCompAppShell>
  );
}

Opção 2: Pacote NPM (Recomendado)

Instalação:

## Instalar pacote principal
npm install @waiin/raaghu-react

## Instalar pacote de tema
npm install @waiin/raaghu-react-themes

Configurar Tema:

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

Uso:

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

function App() {
  return (
    <RdsCompAppShell
      title="Minha App"
      navigation={[
        { label: 'Painel', href: '/' },
        { label: 'Usuários', href: '/users' }
      ]}
      user={{ name: 'John Doe' }}
    >
      <SeuConteudo />
    </RdsCompAppShell>
  );
}

Opções de Layout

Layout do App Shell

Estrutura de aplicação completa para aplicativos de negócios:

Usando Pacote NPM:

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

<RdsCompAppShell
  title="Minha App"
  navigation={[
    { label: 'Painel', href: '/' },
    { label: 'Usuários', href: '/users' }
  ]}
  user={{ name: 'John Doe' }}
>
  <SeuConteudo />
</RdsCompAppShell>

Usando do Código-Fonte:

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

<RdsCompAppShell
  title="Minha App"
  navigation={[
    { label: 'Painel', href: '/' },
    { label: 'Usuários', href: '/users' }
  ]}
  user={{ name: 'John Doe' }}
>
  <SeuConteudo />
</RdsCompAppShell>

Recursos:

• Navegação lateral responsiva
• Cabeçalho com menu de usuário
• Menu hambúrguer para dispositivos móveis
• Troca de tema

Layout Personalizado

Para designs únicos:

Usando Pacote NPM:

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

<RdsCompLayout
  header={<MeuCabecalho />}
  sidebar={<MinhaBarraLateral />}
  footer={<MeuRodape />}
>
  <MeuConteudo />
</RdsCompLayout>

Usando do Código-Fonte:

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

<RdsCompLayout
  header={<MeuCabecalho />}
  sidebar={<MinhaBarraLateral />}
  footer={<MeuRodape />}
>
  <MeuConteudo />
</RdsCompLayout>