Skip to content

usage.md

Latest commit

 

History

History
127 lines (101 loc) · 2.9 KB

usage.md

File metadata and controls

127 lines (101 loc) · 2.9 KB
Raw

Uso

Guia de uso do Django GovBR Theme.

Novo! Veja o Guia de Componentes para usar os componentes modulares do GovBR DS.

Template Base

Exemplo Básico

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

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

{% block header_title %}
    Meu Portal
{% endblock %}

{% block content %}
    <h1>Bem-vindo!</h1>
    <p>Conteúdo da página...</p>
{% endblock %}

Blocos Disponíveis

Bloco Descrição
title Título da página (aba do navegador)
header_title Título no cabeçalho
header_actions Ações no cabeçalho
navigation Menu de navegação
content Conteúdo principal
footer_content Conteúdo do rodapé
extra_css CSS adicional
extra_js JavaScript adicional

Componentes GovBR

Botões

<button class="br-button primary" type="button">Primário</button>
<button class="br-button secondary" type="button">Secundário</button>
<button class="br-button circle" type="button">
    <i class="fas fa-search"></i>
</button>

Cards

<div class="br-card">
    <div class="card-header">Título</div>
    <div class="card-content">
        <p>Conteúdo...</p>
    </div>
    <div class="card-footer">
        <button class="br-button secondary">Ação</button>
    </div>
</div>

Navegação

{% block navigation %}
<nav class="br-menu">
    <div class="menu-container">
        <div class="menu-panel">
            <div class="menu-header">
                <div class="menu-title">Menu</div>
            </div>
            <nav class="menu-body">
                <a class="menu-item" href="/">
                    <span class="icon"><i class="fas fa-home"></i></span>
                    <span class="content">Início</span>
                </a>
                <a class="menu-item" href="/usuarios/">
                    <span class="icon"><i class="fas fa-users"></i></span>
                    <span class="content">Usuários</span>
                </a>
            </nav>
        </div>
    </div>
</nav>
{% endblock %}

Mensagens Django

O sistema de mensagens está pré-configurado:

from django.contrib import messages

def minha_view(request):
    messages.success(request, 'Sucesso!')
    messages.error(request, 'Erro!')
    messages.warning(request, 'Atenção!')
    messages.info(request, 'Informação.')
    return render(request, 'template.html')

Assets Manuais

Se não usar o template base:

{% load static %}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <link rel="stylesheet" href="{% static 'govbr/core/core.min.css' %}">
</head>
<body>
    <!-- Conteúdo -->
    <script src="{% static 'govbr/core/core.min.js' %}"></script>
</body>
</html>

Referências