Skip to content

GitLab

Commit 2d1ecd87 authored by Eduardo Silva's avatar Eduardo Silva
Browse files

Merge branch '6-alteracoes-nas-tags-do-br-footer' into 'master' 

Resolve "Alterações nas tags do br footer"

Closes #6

See merge request !8
parents c73e9710 ff644bf5
Expand all Hide whitespace changes
Inline Side-by-side
dsgov/templates/dsgov/components/header.html deleted 100644 → 0
View file @ c73e9710
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<header class="br-header mb-4 {{ extra_classes }}" id="header" data-sticky="data-sticky">
<div class="container-lg">
<div class="header-top">
<div class="header-logo">
<img src="{{ logo_url }}" alt="logo"/>
<span class="br-divider vertical"></span>
<div class="header-sign" style="{{ header_sign_style }}">{{ title_extra }}</div>
</div>
<div class="header-actions">
<div class="header-links dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Acesso Rápido">
<i class="fas fa-ellipsis-v" aria-hidden="true" style="{{ links_style }}"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title" style="{{ links_style }}">Acesso Rápido</div>
</div>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 1</a>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 2</a>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 3</a>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 4</a>
<select class="bg-blue-warm-vivid-90 rounder-lg border-solid-none" name="languages" id="languages" style="{{ items_style }}" onchange="changeLanguage()">
<option value="pt-br" selected>PT</option>
<option value="en">EN</option>
<option value="es">ES</option>
</select>
</div>
</div>
<span class="br-divider vertical mx-half mx-sm-1"></span>
<div class="header-functions dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Funcionalidades do Sistema">
<i class="fas fa-th" aria-hidden="true" style="{{ links_style }}"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title" style="{{ title_style }}">Funcionalidades do Sistema</div>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 1">
<i class="fas fa-chart-bar" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 1</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 2">
<i class="fas fa-headset" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 2</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 3">
<i class="fas fa-comment" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 3</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 4">
<i class="fas fa-adjust" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 4</span>
</button>
</div>
</div>
</div>
<div class="header-search-trigger">
<button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search">
<i class="fas fa-search" aria-hidden="true" style="{{ items_style }}"></i>
</button>
</div>
<div class="header-login">
<div class="header-sign-in">
<button class="br-sign-in small" type="button" data-trigger="login">
<i class="fas fa-user" aria-hidden="true"></i>
<span class="d-sm-inline">{{ label_button_login }}</span>
</button>
</div>
<div class="header-avatar"></div>
</div>
</div>
</div>
<div class="header-bottom">
<div class="header-menu">
<div class="header-menu-trigger" id="header-navigation">
<button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation">
<i class="fas fa-bars" aria-hidden="true" style="color: #FFFFFF;"></i>
</button>
</div>
<div class="header-info">
<div class="header-title" style="{{ title_style }}">{{ title }}</div>
<div class="header-subtitle" style="{{ title_style }}">{{ subtitle }}</div>
</div>
</div>
<div class="header-search" id="main-searchbox">
<div class="br-input has-icon">
<label for="searchbox">Texto da pesquisa</label>
<input id="searchbox" type="text" placeholder="{{ search_placeholder }}"/>
<button class="br-button circle small" type="button" aria-label="Pesquisar">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
<button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search">
<i class="fas fa-times" aria-hidden="true" style="{{ links_style }}"></i>
</button>
</div>
</div>
</div>
</header>
{% endblock %}
dsgov/templates/dsgov/components/menu.html deleted 100644 → 0
View file @ c73e9710
This diff is collapsed.
dsgov/templatetags/br_footer_tags.py
View file @ 2d1ecd87
from django import template
from django.utils.html import format_html
from django.templatetags.static import static
from django.template.loader import render_to_string
from django.utils.safestring import mark_safe
from django.template.base import token_kwargs
......@@ -152,9 +150,23 @@ class ItemNode(template.Node):
# --- TAGS DE LOGO, REDES SOCIAIS E COPYRIGHT DO FOOTER ---
@register.simple_tag
def br_logo(src, alt=""):
"""Tag Simples e direta para o logo."""
return format_html('<div class="logo"><img src="{}" alt="{}"/></div>', src, alt)
def br_logo(src, alt="", extra_classes="", extra_styles=""):
"""
Renderiza o logo com ou sem wrapper <div class="logo">.
Se o usuário fornecer extra_classes ou extra_styles, assume que quer controle total
e remove o wrapper por padrão.
"""
img_html = format_html(
'<img src="{}" alt="{}" class="{}" style="{}"/>',
src, alt, extra_classes, extra_styles
)
# Se o usuário passou estilos ou classes, damos controle total (sem <div class="logo">)
if extra_classes or extra_styles:
return img_html
else:
return format_html('<div class="logo">{}</div>', img_html)
@register.tag(name='br_footer_social_section')
def do_footer_social_section(parser, token):
......
dsgov/templatetags/br_header_tags.py 0 → 100644
View file @ 2d1ecd87
from django import template
from django.utils.safestring import mark_safe
from django.utils.html import format_html
from django.template.base import Variable, VariableDoesNotExist
register = template.Library()
# Função auxiliar para resolver variáveis de contexto ou usar valores literais
def resolve_variable(value, context):
if value is None:
return ""
try:
# Tenta resolver como uma variável de contexto
return template.Variable(value).resolve(context)
except template.VariableDoesNotExist:
# Se falhar, usa o valor como uma string literal, removendo aspas
return str(value).strip('"\'')
# =========================
# BLOCO: ESTRUTURA PRINCIPAL DO HEADER
# =========================
# --- Tag: br_header ---
@register.tag(name='br_header')
def do_br_header(parser, token):
bits = token.split_contents()
extra_classes = None
if len(bits) > 1 and 'class=' in bits[1]:
extra_classes = bits[1].split('=', 1)[1]
nodelist = parser.parse(('end_br_header',))
parser.delete_first_token()
return BRHeaderNode(nodelist, extra_classes)
class BRHeaderNode(template.Node):
def __init__(self, nodelist, extra_classes=None):
self.nodelist = nodelist
self.extra_classes = extra_classes
def render(self, context):
extra_classes_str = f" {resolve_variable(self.extra_classes, context)}" if self.extra_classes else ""
# Agora apenas renderiza o conteúdo, sem se preocupar com a busca.
rendered_content = self.nodelist.render(context)
return format_html(
'<header class="br-header{}"><div class="container-lg">{}</div></header>',
extra_classes_str, mark_safe(rendered_content)
)
# --- Tags de Bloco Explícitas (sem fábrica) ---
# Tag: br_header_top
@register.tag(name='br_header_top')
def do_br_header_top(parser, token):
nodelist = parser.parse(('end_br_header_top',))
parser.delete_first_token()
return BRHeaderTopNode(nodelist)
class BRHeaderTopNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html('<div class="header-top">{}</div>', mark_safe(content))
# Tag: br_header_bottom
@register.tag(name='br_header_bottom')
def do_br_header_bottom(parser, token):
nodelist = parser.parse(('end_br_header_bottom',))
parser.delete_first_token()
return BRHeaderBottomNode(nodelist)
class BRHeaderBottomNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
# Renderiza o conteúdo interno primeiro (o br_header_menu)
content = self.nodelist.render(context)
# Pega o HTML da busca que foi colocado no contexto
search_html = context.get('br_header_search_html', '')
# Limpa a variável para não vazar
if 'br_header_search_html' in context:
del context['br_header_search_html']
return format_html(
'<div class="header-bottom">{}{}</div>',
mark_safe(content),
mark_safe(search_html)
)
# Tag: br_header_actions
@register.tag(name='br_header_actions')
def do_br_header_actions(parser, token):
nodelist = parser.parse(('end_br_header_actions',))
parser.delete_first_token()
return BRHeaderActionsNode(nodelist)
class BRHeaderActionsNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html('<div class="header-actions">{}</div>', mark_safe(content))
# Tag: br_header_login
@register.tag(name='br_header_login')
def do_br_header_login(parser, token):
nodelist = parser.parse(('end_br_header_login',))
parser.delete_first_token()
return BRHeaderLoginNode(nodelist)
class BRHeaderLoginNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html('<div class="header-login">{}</div>', mark_safe(content))
# Tag: br_list
@register.tag(name='br_list')
def do_br_list(parser, token):
nodelist = parser.parse(('end_br_list',))
parser.delete_first_token()
return BRListNode(nodelist)
class BRListNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html('<div class="br-list">{}</div>', mark_safe(content))
# =========================
# BLOCO: LOGO E TÍTULOS
# =========================
@register.simple_tag(takes_context=True)
def br_header_logo(context, src, alt, signature="", signature_style=""):
logo_html = format_html('<img src="{}" alt="{}" />', resolve_variable(src, context), resolve_variable(alt, context))
if signature:
resolved_signature = resolve_variable(signature, context)
style_attr = ''
if signature_style:
resolved_style = resolve_variable(signature_style, context)
style_attr = format_html(' style="{}"', resolved_style)
return format_html(
'<div class="header-logo">{}<span class="br-divider vertical"></span><div class="header-sign"{}>{}</div></div>',
logo_html, style_attr, resolved_signature
)
return format_html('<div class="header-logo">{}</div>', logo_html)
# --- Tags de Texto Explícitas ---
class TextNode(template.Node):
def __init__(self, nodelist, element, default_class, style):
self.nodelist = nodelist
self.element = element
self.default_class = default_class
self.style = style
def render(self, context):
content = self.nodelist.render(context)
style_attr = ''
if self.style:
resolved_style = resolve_variable(self.style, context)
style_attr = format_html(' style="{}"', resolved_style)
return format_html('<{0} class="{1}"{2}>{3}</{0}>', self.element, self.default_class, style_attr, mark_safe(content))
@register.tag(name='br_header_title')
def do_br_header_title(parser, token):
bits = token.split_contents()
style = None
if len(bits) > 1 and 'style=' in bits[1]:
style = bits[1].split('=', 1)[1]
nodelist = parser.parse(('end_br_header_title',))
parser.delete_first_token()
return TextNode(nodelist, 'div', 'header-title', style)
@register.tag(name='br_header_subtitle')
def do_br_header_subtitle(parser, token):
bits = token.split_contents()
style = None
if len(bits) > 1 and 'style=' in bits[1]:
style = bits[1].split('=', 1)[1]
nodelist = parser.parse(('end_br_header_subtitle',))
parser.delete_first_token()
return TextNode(nodelist, 'div', 'header-subtitle', style)
@register.tag(name='br_list_header')
def do_br_list_header(parser, token):
bits = token.split_contents()
style = None
if len(bits) > 1 and 'style=' in bits[1]:
style = bits[1].split('=', 1)[1]
nodelist = parser.parse(('end_br_list_header',))
parser.delete_first_token()
return BRListHeaderNode(nodelist, style)
class BRListHeaderNode(template.Node):
def __init__(self, nodelist, style):
self.nodelist = nodelist
self.style = style
def render(self, context):
content = self.nodelist.render(context)
style_attr = ''
if self.style:
resolved_style = resolve_variable(self.style, context)
style_attr = format_html(' style="{}"', resolved_style)
return format_html('<div class="header"><div class="title"{}>{}</div></div>', style_attr, mark_safe(content))
# =========================
# BLOCO: MENU E DROPDOWNS
# =========================
@register.tag(name='br_header_menu')
def do_br_header_menu(parser, token):
bits = token.split_contents()
icon_style = None
if len(bits) > 1 and 'icon_style=' in bits[1]:
icon_style = bits[1].split('=', 1)[1]
nodelist = parser.parse(('end_br_header_menu',))
parser.delete_first_token()
return BRHeaderMenuNode(nodelist, icon_style)
class BRHeaderMenuNode(template.Node):
def __init__(self, nodelist, icon_style):
self.nodelist = nodelist
self.icon_style = icon_style
def render(self, context):
content = self.nodelist.render(context)
style_attr = ''
if self.icon_style:
resolved_style = resolve_variable(self.icon_style, context)
style_attr = format_html(' style="{}"', resolved_style)
return format_html(
'''<div class="header-menu">
<div class="header-menu-trigger">
<button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation">
<i class="fas fa-bars" aria-hidden="true"{}></i>
</button>
</div>
<div class="header-info">{}</div>
</div>''',
style_attr,
mark_safe(content)
)
class DropdownNode(template.Node):
def __init__(self, nodelist, tag_class, icon_class, extra_classes, icon_style):
self.nodelist = nodelist
self.tag_class = tag_class
self.icon_class = icon_class
self.extra_classes = extra_classes
self.icon_style = icon_style
def render(self, context):
content = self.nodelist.render(context)
aria_label = "Abrir " + self.tag_class.replace('-', ' ').replace('header', '').strip().title()
extra_classes_str = f" {resolve_variable(self.extra_classes, context)}" if self.extra_classes else ""
icon_style_attr = ''
if self.icon_style:
resolved_style = resolve_variable(self.icon_style, context)
icon_style_attr = format_html(' style="{}"', resolved_style)
html = format_html(
'''<div class="{0} dropdown{1}">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="{2}">
<i class="fas {3}" aria-hidden="true"{4}></i>
</button>
{5}
</div>''',
self.tag_class, extra_classes_str, aria_label, self.icon_class, icon_style_attr, mark_safe(content)
)
if 'links' in self.tag_class:
html += mark_safe('<span class="br-divider vertical mx-half mx-sm-1"></span>')
return html
def create_dropdown_tag(name, tag_class, icon_class):
@register.tag(name=name)
def dropdown_tag_func(parser, token):
bits = token.split_contents()
icon_style = None
extra_classes = None
for bit in bits[1:]:
if bit.startswith('icon_style='):
icon_style = bit.split('=', 1)[1]
elif bit.startswith('class='):
extra_classes = bit.split('=', 1)[1]
nodelist = parser.parse((f'end_{name}',))
parser.delete_first_token()
return DropdownNode(nodelist, tag_class, icon_class, extra_classes, icon_style)
return dropdown_tag_func
create_dropdown_tag('br_header_links', 'header-links', 'fa-ellipsis-v')
create_dropdown_tag('br_header_functions', 'header-functions', 'fa-th')
# =========================
# BLOCO: ITENS DE LISTA
# =========================
@register.tag(name='br_header_link_item')
def do_br_header_link_item(parser, token):
bits = token.split_contents()
kwargs = {'href_str': None, 'extra_classes_expr': None, 'style_expr': None}
for bit in bits[1:]:
key, value = bit.split('=', 1)
if key == 'href':
kwargs['href_str'] = value
elif key == 'extra_classes':
kwargs['extra_classes_expr'] = parser.compile_filter(value)
elif key == 'style':
kwargs['style_expr'] = parser.compile_filter(value)
nodelist = parser.parse(('end_br_header_link_item',))
parser.delete_first_token()
return BRHeaderLinkItemNode(nodelist, **kwargs)
class BRHeaderLinkItemNode(template.Node):
def __init__(self, nodelist, href_str, extra_classes_expr, style_expr):
self.nodelist = nodelist
self.href_str = href_str
self.extra_classes_expr = extra_classes_expr
self.style_expr = style_expr
def render(self, context):
from django.template import Variable, VariableDoesNotExist
content = self.nodelist.render(context)
resolved_href = "#"
if self.href_str:
parts = self.href_str.split('|default:')
primary_expr_str = parts[0].strip()
secondary_expr_str = parts[1].strip() if len(parts) > 1 else None
try:
primary_value = Variable(primary_expr_str).resolve(context)
if primary_value:
resolved_href = primary_value
except VariableDoesNotExist:
pass
if resolved_href == "#" and secondary_expr_str:
try:
base_obj = Variable(secondary_expr_str.split('.')[0]).resolve(context)
if base_obj and hasattr(base_obj, 'url'):
url = getattr(base_obj, 'url')
if url:
resolved_href = url
except VariableDoesNotExist:
pass
except Exception:
pass
# Resolve classes e estilos
extra_classes = self.extra_classes_expr.resolve(context) if self.extra_classes_expr else ""
style = self.style_expr.resolve(context) if self.style_expr else ""
style_attr = format_html(' style="{}"', style) if style else ""
return format_html(
'<a class="br-item {}" href="{}"{}>{}</a>',
extra_classes,
resolved_href,
style_attr,
mark_safe(content)
)
@register.tag(name='br_function_item')
def do_br_function_item(parser, token):
bits = token.split_contents()
kwargs = {
'icon_class': None, 'label': None, 'aria_label': None,
'extra_classes': None, 'icon_style': None, 'label_style': None,
'href': None
}
for bit in bits[1:]:
if '=' in bit:
key, value = bit.split('=', 1)
if key in kwargs:
kwargs[key] = parser.compile_filter(value)
return BRFunctionItemNode(**kwargs)
class BRFunctionItemNode(template.Node):
def __init__(self, icon_class, label, aria_label, extra_classes, icon_style, label_style, href):
self.icon_class = icon_class
self.label = label
self.aria_label = aria_label
self.extra_classes = extra_classes
self.icon_style = icon_style
self.label_style = label_style
self.href = href
def render(self, context):
def resolve_filter(f):
return f.resolve(context) if f else ""
resolved_label = resolve_filter(self.label)
resolved_aria_label = resolve_filter(self.aria_label) or resolved_label
resolved_icon_class = resolve_filter(self.icon_class)
resolved_href = resolve_filter(self.href)
extra_classes_str = resolve_filter(self.extra_classes)
icon_style_attr = format_html(' style="{}"', resolve_filter(self.icon_style)) if self.icon_style else ""
label_style_attr = format_html(' style="{}"', resolve_filter(self.label_style)) if self.label_style else ""
inner_content = format_html(
'<i class="fas {}" aria-hidden="true"{}></i><span class="text"{}>{}</span>',
resolved_icon_class, icon_style_attr, label_style_attr, resolved_label
)
if resolved_href:
return format_html(
'''<div class="br-item {}">
<a class="br-button circle small" href="{}" aria-label="{}">
{}
</a>
</div>''',
extra_classes_str, resolved_href, resolved_aria_label, inner_content
)
else:
return format_html(
'''<div class="br-item {}">
<button class="br-button circle small" type="button" aria-label="{}">
{}
</button>
</div>''',
extra_classes_str, resolved_aria_label, inner_content
)
# =========================
# BLOCO: BUSCA E LOGIN
# =========================
@register.simple_tag(takes_context=True)
def br_header_search(context, placeholder="O que você procura?", icon_style=""):
icon_style_attr = ''
if icon_style:
resolved_style = resolve_variable(icon_style, context)
icon_style_attr = format_html(' style="{}"', resolved_style)
search_html = format_html(
'''<div class="header-search">
<div class="br-input has-icon">
<label for="searchbox-header">Texto da pesquisa</label>
<input id="searchbox-header" type="text" placeholder="{}"/>
<button class="br-button circle small" type="button" aria-label="Pesquisar">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
<button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search">
<i class="fas fa-times" aria-hidden="true"{}></i>
</button>
</div>''',
resolve_variable(placeholder, context),
icon_style_attr
)
# A lógica continua a mesma: popular o contexto.
context['br_header_search_html'] = search_html
return ''
@register.simple_tag(takes_context=True)
def br_header_search_trigger(context, icon_style=""):
icon_style_attr = ''
if icon_style:
resolved_style = resolve_variable(icon_style, context)
icon_style_attr = format_html(' style="{}"', resolved_style)
return mark_safe(
f'''<div class="header-search-trigger">
<button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search">
<i class="fas fa-search" aria-hidden="true"{icon_style_attr}></i>
</button>
</div>'''
)
@register.simple_tag
def br_header_signin_button():
return mark_safe(
'''<div class="header-sign-in">
<button class="br-sign-in small" type="button" data-trigger="login">
<i class="fas fa-user" aria-hidden="true"></i><span class="d-sm-inline">Entrar</span>
</button>
</div>'''
)
@register.simple_tag
def br_header_avatar():
return mark_safe('<div class="header-avatar"></div>')
dsgov/templatetags/br_menu_tags.py 0 → 100644
View file @ 2d1ecd87
This diff is collapsed.
pyproject.toml
View file @ 2d1ecd87
......@@ -9,7 +9,8 @@ dependencies = [
"django==5.2.3",
]
description = "Um App Django app para dispobilizar o Design System gov.br para projeto django."
readme = "README.rst"
readme = "README.md"
license = "MIT AND (Apache-2.0 OR BSD-2-Clause)"
requires-python = ">= 3.10"
authors = [
{name = "Lucas Gueiros", email = "lucas.dgueiros@ufrpe.br"},
......@@ -20,7 +21,6 @@ classifiers = [
"Framework :: Django",
"Framework :: Django :: 5.2.3",
"Intended Audience :: Developers",
"License :: OSI Approved :: MIT License",
"Operating System :: OS Independent",
"Programming Language :: Python",
"Programming Language :: Python :: 3",
......
tests/django_dsgov_test1/templates/examples_headers.html
View file @ 2d1ecd87
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load br_header_tags %}
{% load static %}
{% block title %}
......@@ -7,8 +7,122 @@
{% endblock %}
{% block content %}
<div class="container">
{% static '/dsgov/images/logo.png' as logo_path %}
{% br_header title="Universidade Federal Rural de Pernambuco" logo_url=logo_path links=lista extra_classes="bg-blue-warm-vivid-90" links_style="color: #FFFFFF;" title_extra="UFRPE" title_style="color: #FFFFFF;" items_style="color: #FFFFFF;" search_placeholder="O que você procura?" label_button_login="Entrar" header_sign_style="color: #FFFFFF; font-weight: bold;" %}
</div>
<div class="mb-4">
<h2>Exemplos de Headers do Design System do Governo Brasileiro</h2>
<h4 class="mt-2">Veja como usar os componentes de Header do Design System.</h4>
<ul class="mt-3 text-start" style="display: inline-block;">
<li>O Header é um componente importante para a navegação e identidade visual do site.</li>
<li>Ele é dividido em duas partes: Topo e Inferior.</li>
<li>O Topo contém o logo, ações, links de acesso rápido, funcionalidades do sistema, busca e login.</li>
<li>O Inferior contém o menu do Header, título e subtítulo, além da busca.</li>
<li>Você pode customizar o Header usando classes e estilos extras.</li>
<li>Veja os exemplos abaixo:</li>
</ul>
</div>
{# HEADER 1: Header padrão, fundo claro, sem customização de cor #}
<li class="mb-4">Esse primeiro header usa o tamanho padrão e o fundo branco, que são as configurações originais do componente.</li>
{% br_header %}
{# Bloco Superior: Logo, Ações, Links, Funções, Busca e Login #}
{% br_header_top %}
{% br_header_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="logo" signature="Assinatura" %}
{% br_header_actions %}
{% br_header_links %}
{% br_list %}
{% br_list_header %}Acesso Rápido{% end_br_list_header %}
{% br_header_link_item href="https://www.google.com/" %}Link de acesso 1{% end_br_header_link_item %}
{% br_header_link_item href="#" %}Link de acesso 2{% end_br_header_link_item %}
{% br_header_link_item href="#" %}Link de acesso 3{% end_br_header_link_item %}
{% br_header_link_item href="#" %}Link de acesso 4{% end_br_header_link_item %}
{% end_br_list %}
{% end_br_header_links %}
{% br_header_functions %}
{% br_list %}
{% br_list_header %}Funcionalidades do Sistema{% end_br_list_header %}
{% br_function_item href="https://www.google.com/" icon_class="fa-chart-bar" label="Funcionalidade 1" %}
{% br_function_item icon_class="fa-headset" label="Funcionalidade 2" %}
{% br_function_item icon_class="fa-comment" label="Funcionalidade 3" %}
{% br_function_item icon_class="fa-adjust" label="Funcionalidade 4" %}
{% end_br_list %}
{% end_br_header_functions %}
{% br_header_search_trigger %}
{% br_header_login %}
{% br_header_signin_button %}
{% br_header_avatar %}
{% end_br_header_login %}
{% end_br_header_actions %}
{% end_br_header_top %}
{# Bloco Inferior: Menu principal e Título #}
{% br_header_bottom %}
{% br_header_menu %}
{% br_header_title %}Título do Header{% end_br_header_title %}
{% br_header_subtitle %}Subtítulo do Header{% end_br_header_subtitle %}
{% end_br_header_menu %}
{# Mova a tag de busca para DENTRO do header_bottom #}
{% br_header_search placeholder="O que você procura?" %}
{% end_br_header_bottom %}
{% end_br_header %}
<br><br><br><br>
{# HEADER 2: Header customizado, fundo azul escuro, textos e ícones brancos, usando classes e estilos extras #}
<li>Esse segundo header é o header customizado, com fundo azul escuro e textos e ícones brancos. Ele usa classes e estilos extras para personalização.</p>
{% br_header class="bg-blue-warm-vivid-90" %}
{# Bloco Superior: Logo, Ações, Links, Funções, Busca e Login #}
{% br_header_top %}
{% br_header_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-negative.png" alt="logo" signature="Assinatura" signature_style="color: white;" %}
{% br_header_actions %}
{% br_header_links icon_style="color: white;" %}
{# ESTRUTURA CORRIGIDA: br_list agora envolve o header e os itens #}
{% br_list %}
{% br_list_header style="color: white;" %}Acesso Rápido{% end_br_list_header %}
{% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 1{% end_br_header_link_item %}
{% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 2{% end_br_header_link_item %}
{% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 3{% end_br_header_link_item %}
{% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 4{% end_br_header_link_item %}
{% end_br_list %}
{% end_br_header_links %}
{% br_header_functions icon_style="color: white;" %}
{# ESTRUTURA CORRIGIDA: br_list agora envolve o header e os itens #}
{% br_list %}
{% br_list_header style="color: white;" %}Funcionalidades do Sistema{% end_br_list_header %}
{% br_function_item icon_class="fa-chart-bar" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 1" label_style="color: white;" aria_label="Acessível" %}
{% br_function_item icon_class="fa-headset" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 2" label_style="color: white;" aria_label="Acessível" %}
{% br_function_item icon_class="fa-comment" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 3" label_style="color: white;" aria_label="Acessível" %}
{% br_function_item icon_class="fa-adjust" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 4" label_style="color: white;" aria_label="Acessível" %}
{% end_br_list %}
{% end_br_header_functions %}
{% br_header_search_trigger icon_style="color: white;" %}
{% br_header_login %}
{% br_header_signin_button %}
{% br_header_avatar %}
{% end_br_header_login %}
{% end_br_header_actions %}
{% end_br_header_top %}
{# Bloco Inferior: Agora contém o menu E a chamada da busca #}
{% br_header_bottom %}
{% br_header_menu icon_style="color: white;" %}
{% br_header_title style="color: white;" %}Título do Header{% end_br_header_title %}
{% br_header_subtitle style="color: white;" %}Subtítulo do Header{% end_br_header_subtitle %}
{% end_br_header_menu %}
{% br_header_search placeholder="O que você procura?" icon_style="color: white;" %}
{% end_br_header_bottom %}
{% end_br_header %}
<br><br><br><br>
{% endblock %}
tests/django_dsgov_test1/templates/index.html
View file @ 2d1ecd87
......@@ -8,6 +8,14 @@
{% block content %}
<div class="container">
<h2>Exemplos de Componentes do Design System do Governo Brasileiro</h2>
<h4 class="">Veja como usar os componentes do Design System do Governo Brasileiro com Django.</h4>
<ul class="text-start" style="display: inline-block;">
<li>O Design System do Governo Brasileiro oferece uma série de componentes.</li>
<li>Esses componentes são construídos para serem acessíveis e responsivos.</li>
<li>Agora você pode usar esses componentes em seus projetos Django para criar interfaces consistentes.</li>
<li>Veja os exemplos abaixo para entender como usar cada componente.</li>
</ul>
<div class="br-list" role="list">
<div class="header">
<div class="title">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment