Skip to content

Componentes de Layout e Estrutura - Documentação

Introdução

O pacote w2o-blade-components oferece uma coleção completa de componentes de layout e estrutura que facilitam a construção de interfaces consistentes e responsivas. Estes componentes seguem padrões de design modernos e são totalmente integrados com Livewire e Alpine.js.

Componentes de Conteúdo

1. ContentHeader

Componente base para o cabeçalho de conteúdo das páginas.

Slots disponíveis:

  • titulo: Título da página
  • abas: Abas de navegação (opcional)
  • botoes: Botões de ação

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<x-w2o::content-header>
    <x-slot:titulo>
        <x-w2o::titulo>Título da Página</x-w2o::titulo>
        <x-w2o::breadcrumb :items="$breadcrumbs" />
    </x-slot:titulo>

    <x-slot:botoes>
        <x-w2o::botao>Adicionar</x-w2o::botao>
    </x-slot:botoes>
</x-w2o::content-header>

2. ContentHeader ComTopo

Variação do ContentHeader com uma linha adicional no topo.

Slots disponíveis:

  • topo: Conteúdo do topo (largura total)
  • esquerda: Conteúdo à esquerda
  • meio: Conteúdo centralizado
  • direita: Conteúdo à direita

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<x-w2o-content-header::com-topo>
    <x-slot:topo>
        <x-w2o::titulo>Título Principal</x-w2o::titulo>
    </x-slot:topo>

    <x-slot:esquerda>
        <x-w2o::breadcrumb :items="$breadcrumbs" />
    </x-slot:esquerda>

    <x-slot:meio>
        <x-w2o::abas>
            <!-- itens de abas -->
        </x-w2o::abas>
    </x-slot:meio>

    <x-slot:direita>
        <x-w2o::botao>Ação</x-w2o::botao>
    </x-slot:direita>
</x-w2o-content-header::com-topo>

3. ContentHeader SemTopo

Variação do ContentHeader sem linha de topo.

Slots disponíveis:

  • esquerda: Conteúdo à esquerda
  • meio: Conteúdo centralizado
  • direita: Conteúdo à direita

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<x-w2o-content-header::sem-topo>
    <x-slot:esquerda>
        <x-w2o::titulo>Título</x-w2o::titulo>
    </x-slot:esquerda>

    <x-slot:meio>
        <!-- Conteúdo central -->
    </x-slot:meio>

    <x-slot:direita>
        <x-w2o::botao>Ação</x-w2o::botao>
    </x-slot:direita>
</x-w2o-content-header::sem-topo>

4. ContentHeader ComRodape

Variação do ContentHeader com uma linha adicional no rodapé.

Slots disponíveis:

  • esquerda: Conteúdo à esquerda (opcional)
  • meio: Conteúdo centralizado (opcional)
  • direita: Conteúdo à direita (opcional)
  • baixo: Conteúdo do rodapé (largura total)

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<x-w2o-content-header::com-rodape>
    <x-slot:esquerda>
        <x-w2o::titulo>Título</x-w2o::titulo>
    </x-slot:esquerda>

    <x-slot:direita>
        <x-w2o::botao>Ação</x-w2o::botao>
    </x-slot:direita>

    <x-slot:baixo>
        <div class="alert alert-info">
            Informações adicionais aqui
        </div>
    </x-slot:baixo>
</x-w2o-content-header::com-rodape>

5. Painel

Componente para criar painéis de conteúdo com título e ações opcionais.

Propriedades:

  • titulo (string|ComponentSlot): Título do painel

Slots disponíveis:

  • titulo: Título do painel (alternativa ao atributo)
  • acoes: Botões de ação no cabeçalho
  • slot (padrão): Conteúdo do painel

Uso básico: 

1
2
3
4
5
6
<x-w2o::painel titulo="Dados Cadastrais">
    <!-- Conteúdo do painel -->
    <div class="grid gap-3 md:grid-cols-3">
        <!-- Campos do formulário -->
    </div>
</x-w2o::painel>

Uso com slots: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<x-w2o::painel>
    <x-slot:titulo>
        <x-w2o::titulo>Título Customizado</x-w2o::titulo>
    </x-slot:titulo>

    <x-slot:acoes>
        <x-w2o::botao size="sm">Ação 1</x-w2o::botao>
        <x-w2o::botao size="sm">Ação 2</x-w2o::botao>
    </x-slot:acoes>

    <!-- Conteúdo principal -->
    <div>Conteúdo do painel</div>
</x-w2o::painel>

Painel sem cabeçalho: 

1
2
3
4
<x-w2o::painel>
    <!-- Conteúdo sem título -->
    @livewire('meu-componente')
</x-w2o::painel>

6. Modal

Componente para criar janelas modais.

Propriedades: - id (string): ID único da modal (obrigatório)

Slots disponíveis: - header: Cabeçalho da modal - slot (padrão): Conteúdo principal - footer: Rodapé com ações

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<x-w2o::modal id="modal-criar-usuario">
    <x-slot:header>
        Criar Novo Usuário
    </x-slot:header>

    <form wire:submit.prevent="save" id="form-usuario">
        <!-- Campos do formulário -->
        <div class="grid gap-6">
            <x-w2o::painel titulo="Dados do Usuário">
                <!-- Inputs -->
            </x-w2o::painel>
        </div>
    </form>

    <x-slot:footer>
        <button type="button" 
            class="ti-btn ti-btn-secondary"
            data-hs-overlay="#modal-criar-usuario">
            Fechar
        </button>

        <x-w2o::botao type="submit" form="form-usuario">
            Salvar
        </x-w2o::botao>
    </x-slot:footer>
</x-w2o::modal>

Abertura da modal:

  • Via Javascript:
    • HSOverlay.open(document.getElementById('id-da-modal'))
  • Via botão:
    • <button data-hs-overlay="#id-da-modal">Abrir Modal</button>

Componentes de Navegação

1. Breadcrumb

Componente para navegação hierárquica (migalhas de pão).

Propriedades: - items (array): Array de itens do breadcrumb

Uso: 

1
<x-w2o::breadcrumb :items="$breadcrumbs" />

Exemplo de array: 

1
2
3
4
5
6
<?php
$breadcrumbs = [
    ['label' => 'Home', 'url' => route('home')],
    ['label' => 'Usuários', 'url' => route('users.index')],
    ['label' => 'Criar', 'url' => null], // último item sem URL
];

3. Abas

Componente para criar navegação por abas.

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<x-w2o::abas>
    <x-w2o::abas.item href="{{ route('cadastro') }}" :active="true">
        Cadastro
    </x-w2o::abas.item>
    <x-w2o::abas.item href="{{ route('categorias') }}" :active="false">
        Categorias
    </x-w2o::abas.item>
    <x-w2o::abas.item href="{{ route('perguntas') }}" :active="false">
        Perguntas
    </x-w2o::abas.item>
</x-w2o::abas>

4. Abas Item

Componente para renderizar cada aba individual.

Propriedades: - href (string): URL de destino - active (bool): Indica se a aba está ativa

Uso: 

1
2
3
4
5
6
<x-w2o::abas.item 
    href="{{ route('route.name') }}" 
    :active="$abaAtiva === 'identificador'"
>
    Título da Aba
</x-w2o::abas.item>

Componentes de Organização

1. Dropdown

Componente para criar menus dropdown.

Slots disponíveis:

  • botao: Botão que abre o dropdown

Uso: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<x-w2o::dropdown>
    <x-slot:botao>
        <button class="ti-btn">
            Opções <i class="ti ti-chevron-down"></i>
        </button>
    </x-slot:botao>

    <x-w2o::dropdown-item href="{{ route('editar') }}">
        Editar
    </x-w2o::dropdown-item>

    <x-w2o::dropdown-item href="{{ route('excluir') }}">
        Excluir
    </x-w2o::dropdown-item>
</x-w2o::dropdown>

2. DropdownItem

Componente para itens individuais do dropdown.

Uso: 

1
2
3
4
<x-w2o::dropdown-item href="{{ route('route.name') }}">
    <i class="ti ti-edit"></i>
    Texto do Item
</x-w2o::dropdown-item>