PHP code example of forever-prata / govbr-components-livewire

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

forever-prata / govbr-components-livewire example snippets

use Illuminate\Support\Pluralizer;

public function boot(): void
{
    Pluralizer::useLanguage('portuguese');
}

<livewire:botao 
    type="primary" 
    size="large" 
    label="Enviar" 
/>

<livewire:botao 
    href="https://gov.br" 
    type="secondary" 
    size="large" 
    label="Ir para o Gov.BR" 
/>

<livewire:botao 
    action="salvarUsuario" 
    type="danger" 
    label="Salvar" 
/>

<livewire:checkbox 
    name="termos"
    label="Aceito os termos"
    id="termos_aceite"
    checked="true"
/>

<livewire:input 
    type="email"
    name="email"
    label="E-mail"
    placeholder="[email protected]"
    wireModel="email"
/>

<livewire:radio 
    name="opcao"
    label="Opção 1"
    value="1"
    checked="true"
/>

<livewire:radio 
    name="opcao"
    label="Opção 2"
    value="2"
/>

<livewire:select 
    name="categoria"
    label="Categoria"
    :options="['1' => 'Opção 1', '2' => 'Opção 2']"
    placeholder="Selecione uma opção"
    id="select_simple"
/>

<livewire:table 
    :collection="$users"
    title="Lista de Usuários"
    :search="true"
    :selectable="true"
    :columns="['id', 'name', 'email']"
    extraClass="striped"
/>

<livewire:textarea 
    name="descricao"
    label="Descrição"
    placeholder="Digite a descrição..."
    rows="4"
/>

<livewire:upload />

<livewire:upload 
    :multiple="true" 
    label="Anexar múltiplos arquivos" 
/>

{{-- Card com array --}}
<livewire:card
    :data="$configData"
    title="Configurações"
/>

{{-- Card com objeto e avatar --}}
<livewire:card
    :data="$userData"
    title="Perfil de Usuário"
    :withAvatar="true"
    :actionButtons="$userActions"
/>

{{-- Card com modelo Eloquent --}}
<livewire:card
    :data="$produtoData"
    title="Detalhes do Produto"
    :withImage="true"
    :routeBase="'produtos'"
    imageStyle="max-height: 200px; object-fit: cover;"
/>

@php
    $configData = [
        'ID da Aplicação' => 'APP_12345',
        'Modo de Manutenção' => false,
        'Nível de Log' => 'debug',
        'URL do Banco' => 'mysql://user:pass@host:3306/db',
        'Última Verificação' => new DateTime('2025-09-29 10:00:00'),
    ];

    $userData = new stdClass();
    $userData->id = 101;
    $userData->name = 'Maria da Silva';
    $userData->position = 'Desenvolvedora Chefe';
    $userData->email = '[email protected]';
    $userData->avatar = 'https://i.pravatar.cc/150?img=25';
    $userActions = [
        'Ver Perfil' => [
            'route' => 'produtos.show',
            'params' => 1
        ],
        'Enviar Mensagem' => 'https://google.com'
    ];
@endphp

<div class="container my-5">
    <h1 class="mb-4">Exemplos de Componentes</h1>

    {{-- Cards --}}
    <div class="row">
        <div class="col-md-4">
            <livewire:card
                :data="$configData"
                title="Configurações"
            />
        </div>
        <div class="col-md-4">
            <livewire:card
                :data="$userData"
                title="Perfil de Usuário"
                :withAvatar="true"
                :actionButtons="$userActions"
            />
        </div>
    </div>

    {{-- Formulários --}}
    <div style="max-width: 500px;">
        <livewire:botao type="primary" size="large" label="Enviar" />
        <livewire:botao href="https://gov.br" type="secondary" size="large" label="Ir para o Gov.BR" />
        
        <livewire:input name="nome" label="Nome Completo" placeholder="Digite seu nome" />
        <livewire:input type="email" name="email" label="Email" placeholder="[email protected]" wireModel="email" />
        <livewire:textarea name="mensagem" label="Mensagem" placeholder="Deixe sua mensagem..." />
        
        <livewire:checkbox name="termos" label="Aceito os termos" checked="true" />
        
        <livewire:radio name="opcao" label="Opção 1" value="opcao1" id="opcao1" />
        <livewire:radio name="opcao" label="Opção 2" value="opcao2" id="opcao2" checked="true" />
        
        <livewire:upload :multiple="true" label="Anexar múltiplos arquivos" />
    </div>

    {{-- Tabela --}}
    <livewire:table
        :collection="App\Models\Produto::all()"
        title="Produtos"
        :search="true"
        :selectable="true"
        extraClass="striped"
    />
</div>

@php
    $dados = [
        ['nome' => 'Produto A', 'preco' => 10],
        ['nome' => 'Produto B', 'preco' => 20],
    ];
    $collection = collect($dados);
@endphp

<livewire:table
    :collection="$collection"
    title="Produtos"
    :columns="[
        'nome' => 'Nome do Produto',
        'preco' => 'Preço (R$)',
    ]"
    actionsTitle="Ações"
/>

bash
php artisan vendor:publish --provider="GovbrComponentsLivewire\GovbrComponentsLivewireServiceProvider" --force

ini
DESIGN_SYSTEM=govbr

bash
php artisan make:scaffold create_posts_table --belongs-to=user --has-many=comments