Skip to content

components.md

Latest commit

 

History

History
283 lines (221 loc) · 6.38 KB

components.md

File metadata and controls

283 lines (221 loc) · 6.38 KB
Raw

Componentes GovBR

Guia rápido de uso dos componentes do Django GovBR Theme.

Configuração Inicial

1. Context Processors

# settings.py
TEMPLATES = [{
    'OPTIONS': {
        'context_processors': [
            # ... outros
            'django_govbr_theme.context_processors.govbr_context',
            'django_govbr_theme.context_processors.govbr_menu',
        ],
    },
}]

2. Configurações do Portal

# settings.py

# Informações básicas
GOVBR_PORTAL_NAME = "Meu Portal"
GOVBR_LOGO_URL = "/static/img/logo.png"  # Opcional
GOVBR_SHOW_SEARCH = True

# Layout (opcional)
# GOVBR_LAYOUT_FLUID = False  # False = largura fixa (padrão) | True = largura fluida

# Autenticação
LOGIN_URL = '/login/'
LOGOUT_URL = '/logout/'
GOVBR_PROFILE_URL = '/perfil/'  # Opcional
GOVBR_SETTINGS_URL = '/configuracoes/'  # Opcional

# Menu lateral
GOVBR_MENU_ITEMS = [
    {'label': 'Início', 'url': '/', 'icon': 'fas fa-home'},
    {
        'label': 'Usuários',
        'url': '/usuarios/',
        'icon': 'fas fa-users',
        'children': [
            {'label': 'Listar', 'url': '/usuarios/'},
            {'label': 'Novo', 'url': '/usuarios/novo/'},
        ]
    },
]

# Footer (colunas configuráveis)
GOVBR_FOOTER_LINKS = [
    {
        'title': 'Sobre',
        'links': [
            {'label': 'Institucional', 'url': '/sobre/'},
            {'label': 'Contato', 'url': '/contato/'},
        ]
    },
    {
        'title': 'Ajuda',
        'links': [
            {'label': 'FAQ', 'url': '/faq/'},
            {'label': 'Suporte', 'url': '/suporte/'},
        ]
    },
]

# Redes sociais
GOVBR_SOCIAL_LINKS = {
    'facebook': 'https://facebook.com/meuportal',
    'twitter': 'https://twitter.com/meuportal',
    'instagram': 'https://instagram.com/meuportal',
    'linkedin': 'https://linkedin.com/company/meuportal',
    'youtube': 'https://youtube.com/meuportal',
    'whatsapp': 'https://wa.me/5500000000000',
    'rss': '/rss/',
}

# Footer do menu lateral
GOVBR_MENU_FOOTER_LOGOS = ['/static/img/logo1.png']  # Opcional
GOVBR_MENU_FOOTER_LINKS = [
    {'label': 'Link externo', 'url': 'https://exemplo.gov.br'},
]
GOVBR_MENU_FOOTER_INFO = 'Todo o conteúdo sob licença <strong>Creative Commons</strong>'

Template Base

Simplesmente estenda govbr/base.html:

{% extends "govbr/base.html" %}

{% block title %}Minha Página{% endblock %}

{% block content %}
    <h1>Conteúdo aqui</h1>
{% endblock %}

Breadcrumb

Na view:

def minha_view(request):
    breadcrumb_items = [
        {'label': 'Página inicial', 'url': '/', 'is_home': True},
        {'label': 'Usuários', 'url': '/usuarios/'},
        {'label': 'Detalhes', 'is_active': True},  # Página atual
    ]
    return render(request, 'template.html', {'breadcrumb_items': breadcrumb_items})

Resultado visual:

[🏠] → Usuários → Detalhes

Nota: Se não passar breadcrumb_items, o breadcrumb não aparece (ex: home).

Mensagens Django

Mensagens são exibidas automaticamente:

from django.contrib import messages

messages.success(request, "Operação realizada com sucesso!")
messages.error(request, "Erro ao processar.")
messages.warning(request, "Atenção!")
messages.info(request, "Informação importante.")

Componentes Individuais

Se precisar usar componentes isoladamente:

{% load govbr_tags %}

{# Header #}
{% govbr_header %}
{% govbr_header title="Portal Custom" show_search=False %}

{# Menu #}
{% govbr_menu %}

{# Avatar/Login #}
{% govbr_avatar %}

{# Breadcrumb #}
{% govbr_breadcrumb items=breadcrumb_items %}

{# Footer #}
{% govbr_footer %}
{% govbr_footer show_social=False %}

Blocos do Template Base

{% extends "govbr/base.html" %}

{% block title %}Título da Página{% endblock %}

{% block header_subtitle %}Subtítulo opcional{% endblock %}

{% block breadcrumb %}
    {# Customizar breadcrumb #}
{% endblock %}

{% block content %}
    {# Seu conteúdo principal #}
{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="...">
{% endblock %}

{% block extra_js %}
    <script src="..."></script>
{% endblock %}

Componentes GovBR DS

Use os componentes do GovBR DS normalmente:

{# Card #}
<div class="br-card">
    <div class="card-header">Título</div>
    <div class="card-content">Conteúdo</div>
</div>

{# Botão #}
<button class="br-button primary">Enviar</button>
<button class="br-button secondary">Cancelar</button>

{# Input #}
<div class="br-input">
    <label for="nome">Nome</label>
    <input id="nome" type="text" placeholder="Digite seu nome">
</div>

{# Avatar #}
<div class="br-avatar">
    <span class="content bg-blue-warm-vivid-70 text-pure-0">JD</span>
</div>

Exemplo Completo

views.py:

from django.shortcuts import render

def lista_usuarios(request):
    breadcrumb_items = [
        {'label': 'Página inicial', 'url': '/', 'is_home': True},
        {'label': 'Usuários', 'is_active': True},
    ]

    usuarios = User.objects.all()

    return render(request, 'usuarios/lista.html', {
        'breadcrumb_items': breadcrumb_items,
        'usuarios': usuarios,
    })

templates/usuarios/lista.html:

{% extends "govbr/base.html" %}

{% block title %}Lista de Usuários{% endblock %}

{% block content %}
    <div class="br-card">
        <div class="card-header">
            <h2>Usuários</h2>
        </div>
        <div class="card-content">
            <table class="br-table">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Email</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for usuario in usuarios %}
                    <tr>
                        <td>{{ usuario.get_full_name }}</td>
                        <td>{{ usuario.email }}</td>
                        <td>
                            <a href="{% url 'usuario_detail' usuario.id %}" class="br-button small">
                                Ver
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

Referências