"vscode:/vscode.git/clone" did not exist on "30ba98c2a9f23e7b37cd908841b23744cd16b626"
Commit ed95c744 authored by Eduardo Silva's avatar Eduardo Silva
Browse files

implementacao dos principais componentes do dsgov em django

parent c5a6b8c0
......@@ -55,7 +55,7 @@ ROOT_URLCONF = 'django_dsgov_test1.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'DIRS': ['templates/'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
......@@ -104,9 +104,9 @@ AUTH_PASSWORD_VALIDATORS = [
# Internationalization
# https://docs.djangoproject.com/en/5.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'pt-br'
TIME_ZONE = 'UTC'
TIME_ZONE = 'America/Recife'
USE_I18N = True
......@@ -118,6 +118,12 @@ USE_TZ = True
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / '',
]
STATIC_ROOT = BASE_DIR / 'staticfiles'
# Default primary key field type
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
......
......@@ -16,7 +16,65 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path("", TemplateView.as_view(template_name = 'index.html')),
path("buttons/", TemplateView.as_view(template_name = 'examples_buttons.html'), name="buttons"),
path("inputs/", TemplateView.as_view(template_name = 'examples_inputs.html'), name="inputs"),
path("headers/", TemplateView.as_view(template_name = 'examples_headers.html', extra_context = {"lista":[
{'label': 'Link de acesso 1'},
{'label': 'Link de acesso 2'},
{'label': 'Link de acesso 3'},
{'label': 'Link de acesso 4'}
]}), name="headers"),
path("footer/", TemplateView.as_view(template_name = 'examples_footer.html', extra_context={"list": [
{'title': 'Categoria 1', 'items': [
{'content': 'Est ex deserunt'},
{'content': 'Qui esse'},
{'content': 'Nulla occaecat eiusmod'}
]},
{'title': 'Categoria 2', 'items': [
{'content': 'Deserunt'},
{'content': 'Ad deserunt nostrud'},
{'content': 'Ex qui laborum consectetur aute commodo'},
{'content': 'Ad deserunt nostrud'}
]},
{'title': 'Categoria 3', 'items': [
{'content': 'Duis incididunt consectetur'},
{'content': 'Qui esse'},
{'content': 'Ex qui laborum consectetur aute commodo'},
{'content': 'Duis incididunt consectetur'}
]},
{'title': 'Categoria 4', 'items': [
{'content': 'Est ex deserunt'},
{'content': 'Qui esse'},
{'content': 'Nulla occaecat eiusmod'}
]},
{'title': 'Categoria 5', 'items': [
{'content': 'Deserunt'},
{'content': 'Nulla occaecat eiusmod'},
{'content': 'Ad deserunt nostrud'},
{'content': 'Qui esse'},
]},
{'title': 'Categoria 6', 'items': [
{'content': 'Ad deserunt nostrud'},
{'content': 'Ex qui laborum consectetur aute commodo'},
]},
]}), name="footer"),
path("carousel/", TemplateView.as_view(template_name = 'examples_carousel.html', extra_context = {"imagens":[
{'legenda': 'Bem vindo a UFRPE', 'image': 'https://s2.glbimg.com/KU72T67vVh5Pdgv5Ls2TT4dv09k=/0x0:1920x1080/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2019/S/d/t7a9OdQ1AUyswqkYCJSg/urfpe-recife.jpg'},
{'legenda': 'Testando Imagem', 'image': 'https://s2-g1.glbimg.com/8AWiNTCt0_3fRLaCj7nFeisLb2U=/0x0:1280x960/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2022/D/6/cBnRd8QmuP1kXgcpdu9A/codai-sao-lourenco.jpeg'},
{'legenda': 'Imagem terceira', 'image': 'https://tallos-chat.s3.tallos.com.br/medias/faq/61367692a91f24b1f9c3c5bc-image-22-09-2021-15-50-35-como-acessar-o-ava-ufrpe-613fb3b83d09ec001c55b3fc-71.webp'},
{'legenda': 'Imagem quarta', 'image': 'https://tallos-chat.s3.tallos.com.br/medias/faq/61367692a91f24b1f9c3c5bc-image-13-06-2022-10-53-16-como-realizar-primeiro-acesso-auto-cadastro-no-sigaa-aluno-613fb3b83d09ec001c55b3fc-35-7c4.webp'},
{'legenda': 'Imagem quinta', 'image': 'https://www.pebsp.com/wp-content/uploads/2024/07/Graduacao-EAD-UFRPE-Universidade-Federal.jpg'},
]}), name="carousel"),
path("menu/", TemplateView.as_view(template_name = 'examples_menu.html'), name="menu"),
path("list/", TemplateView.as_view(template_name = 'examples_list.html', extra_context = {"lista":[
{'icon': 'fas fa-heartbeat', 'content': 'Texto principal 1', 'meta': 'Meta 1'},
{'icon': 'fas fa-star', 'content': 'Texto principal 2', 'meta': 'Meta 2'}
]}), name="list"),
path("breadcrumb/", TemplateView.as_view(template_name = 'examples_breadcrumb.html'), name="breadcrumb"),
path("tag/", TemplateView.as_view(template_name = 'examples_tag.html'), name="tag"),
]
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<nav class="br-breadcrumb" aria-label="Breadcrumbs">
<ol class="crumb-list" role="list">
<li class="crumb home">
<a class="br-button circle" href="javascript:void(0)">
<span class="sr-only">Página inicial</span>
<i class="fas fa-home"></i>
</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i>
<a href="javascript:void(0)">Página Ancestral 01</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i>
<a href="javascript:void(0)">Página Ancestral 02</a>
</li>
<li class="crumb"><i class="icon fas fa-chevron-right"></i>
<a href="javascript:void(0)">Página Ancestral 03</a>
</li>
<li class="crumb" data-active="active"><i class="icon fas fa-chevron-right"></i>
<span tabindex="0" aria-current="page">Página atual</span>
</li>
</ol>
</nav>
{% endblock %}
\ No newline at end of file
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="br-carousel" data-circular="true" aria-label="Carrossel de Exemplo" aria-roledescription="carousel">
<div class="carousel-button">
<button class="br-button carousel-btn-prev terciary circle" type="button" aria-label="Anterior"><i class="fas fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
<div class="carousel-stage">
{% for imagem in imagens %}
<div class="carousel-page" active="active" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content">
<img class="ml-4" src="{{ imagem.image }}" alt="Imagem"/>
<div class="h3 carousel-title">{{ imagem.legenda }}</div>
</div>
</div>
{% endfor %}
</div>
<div class="carousel-button">
<button class="br-button carousel-btn-next terciary circle" type="button" aria-label="Próximo"><i class="fas fa-chevron-right" aria-hidden="true"></i>
</button>
</div>
<div class="carousel-step">
<nav class="br-step" data-initial="1" data-type="simple" role="none">
<div class="step-progress" role="listbox" aria-orientation="horizontal" aria-label="Lista de Opções">
<button class="step-progress-btn" role="option" aria-posinset="1" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 1</span></button>
<button class="step-progress-btn" role="option" aria-posinset="2" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 2</span></button>
<button class="step-progress-btn" role="option" aria-posinset="3" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 3</span></button>
<button class="step-progress-btn" role="option" aria-posinset="4" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 4</span></button>
<button class="step-progress-btn" role="option" aria-posinset="5" aria-setsize="5" type="button"><span class="step-info">Exemplo de Rótulo 5</span></button>
</div>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<footer class="br-footer">
<div class="container-lg">
<div class="logo">
<img src="{{ logo_url }}" alt="Imagem"/>
</div>
<div class="br-list horizontal" data-toggle="data-toggle" data-sub="data-sub">
{% for list_html in rendered_lists %}
{{ list_html|safe }}
{% endfor %}
</div>
<div class="d-none d-sm-block">
<div class="row align-items-end justify-content-between py-5">
<div class="col">
<div class="social-network">
<div class="social-network-title">Redes Sociais</div>
<div class="d-flex">
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Facebook">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Twitter">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Linkedin">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Whatsapp">
<i class="fab fa-whatsapp" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col assigns text-right">
<img class="ml-4" src="{{ acesso_a_info_image }}" alt="Imagem"/>
<img class="ml-4" src="{{ emec_image }}" alt="Imagem"/>
</div>
</div>
</div>
</div>
<span class="br-divider my-3"></span>
<div class="container-lg">
<div class="info">
<div class="text-down-01 text-medium pb-3"><strong>{{ copyright }}</strong></div>
</div>
</div>
</footer>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<header class="br-header {{ extra_classes }}">
<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"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title">Acesso Rápido</div>
</div>
{% for link in links %}
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">{{ link.label }}</a>
{% endfor %}
</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"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title">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">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">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">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">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"></i>
</button>
</div>
{% if show_login %}
<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>
{% endif %}
</div>
</div>
<div class="header-bottom">
<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" 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">
<div class="br-input has-icon">
<label for="searchbox-7548">Texto da pesquisa</label>
<input id="searchbox-7548" 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"></i>
</button>
</div>
</div>
</div>
</header>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<div class="br-list" role="list">
<div class="header">
<div class="title">{{ title }}</div>
</div>
<span class="br-divider"></span>
{% for item in items %}
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto">
<i class="{{ item.icon }}" aria-hidden="true"></i>
</div>
<div class="col">{{ item.content }}</div>
<div class="col-auto">{{ item.meta }}</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">{{ title }}</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
{% for item in items %}
{% if not forloop.last %}
<div class="content">{{ item.content }}</div></a><a class="br-item" href="javascript:void(0)">
{% else %}
<div class="content">Nulla occaecat eiusmod</div></a><span class="br-divider d-md-none"></span>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<div class="row">
<div class="br-menu push" id="main-navigation">
<div class="menu-container">
<div class="menu-panel">
<div class="menu-header" data-visible="false">
<div class="menu-title"><img src="data:image/png;base64,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" alt="Imagem ilustrativa"/><span>Identificação do site ou Sistema</span></div>
<div class="menu-close">
<button class="br-button circle" type="button" aria-label="Fechar o menu" data-dismiss="menu"><i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
<nav class="menu-body" role="tree">
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div>
<div class="menu-folder"><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Camada 1</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-heart" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-address-book" aria-hidden="true"></i></span><span class="content">Camada 2</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-book" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-tree" aria-hidden="true"></i></span><span class="content">Camada 3</span></a>
<ul>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
<li><a class="menu-item" href="javascript: void(0)" role="treeitem"><span class="content">Camada 4</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-moon" aria-hidden="true"></i></span><span class="content">Camada 3</span></a></li>
</ul>
</li>
<li><a class="menu-item" href="javascript: void(0)"><span class="icon"><i class="fas fa-archive" aria-hidden="true"></i></span><span class="content">Camada 2</span></a></li>
</ul>
</div><a class="menu-item divider" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Item de Camada 1</span></a><a class="menu-item divider" href="javascript: void(0)" role="treeitem"><span class="icon"><i class="fas fa-bell" aria-hidden="true"></i></span><span class="content">Item de Camada 1</span></a>
</nav>
<div class="menu-footer" data-visible="false">
<div class="menu-logos"><img src="data:image/png;base64,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" alt="Imagem ilustrativa"/><img src="data:image/png;base64,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" alt="Imagem ilustrativa"/></div>
<div class="menu-links"><a href="javascript: void(0)"><span class="mr-1">Link externo 1</span><i class="fas fa-external-link-square-alt" aria-hidden="true"></i></a><a href="javascript: void(0)"><span class="mr-1">Link externo 2</span><i class="fas fa-external-link-square-alt" aria-hidden="true"></i></a></div>
<div class="social-network">
<div class="social-network-title">Redes Sociais</div>
<div class="d-flex"><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Twitter"><i class="fab fa-twitter" aria-hidden="true"></i></a><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Linkedin"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Whatsapp"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></div>
</div>
<div class="menu-info">
<div class="text-center text-down-01">Todo o conteúdo deste site está publicado sob a licença <strong>Creative Commons Atribuição-SemDerivações 3.0</strong></div>
</div>
</div>
</div>
<div class="menu-scrim" data-dismiss="menu" tabindex="0"></div>
</div>
</div>
<div class="col">
<div class="d-flex align-items-center mt-3">
<div>
<button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation"><i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="ml-3">Acionar menu</div>
</div>
</div>
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<div class="d-flex align-items-center">
<span class="br-tag {{ extra_classes }} {{ density }}" aria-describedby="{{ aria_describedby }}">
<span id="{{ aria_describedby }}">{{ label }}</span>
</span>
</div>
{% endblock %}
\ No newline at end of file
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Breadcrumb
{% endblock %}
{% block content %}
<div class="container">
{% br_breadcrumb %}
</div>
{% endblock %}
\ No newline at end of file
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Botões
{% endblock %}
{% block content %}
<div class="container">
<div class="p-3 bg-blue-warm-vivid-90 mb-5">
{% br_button text="Primário" button_type="button" style="primary" extra_classes="block dark-mode mb-3" %}
{% br_button text="Secundário" button_type="button" style="secondary" extra_classes="block dark-mode mb-3" %}
{% br_button text="Terciário" button_type="button" extra_classes="block dark-mode" %}
</div>
<div class="Buttons">
{% br_button text="Primário" button_type="button" style="primary" extra_classes="mr-3" %}
{% br_button text="Secundário" button_type="button" style="secondary" extra_classes="mr-3" %}
{% br_button text="Terciário" button_type="button" extra_classes="mr-3" %}
</div>
<div class="p-3">
{% br_button text="Baixa densidade" button_type="button" style="secondary" extra_classes="large mr-3" %}
{% br_button text="Padrão" button_type="button" style="secondary" extra_classes="mr-3" %}
{% br_button text="Alta densidade" button_type="button" style="secondary" extra_classes="small" %}
</div>
<div class="p-3">
{% br_button button_type="button" style="secondary" extra_classes="circle large mr-3" icon_class="fas fa-city" %}
{% br_button button_type="button" style="secondary" extra_classes="circle mr-3" icon_class="fas fa-city" %}
{% br_button button_type="button" style="secondary" extra_classes="circle small" icon_class="fas fa-city" %}
</div>
<div class="p-3">
{% br_button button_type="button" style="primary" extra_classes="circle mr-3" icon_class="fas fa-city" %}
{% br_button button_type="button" style="secondary" extra_classes="circle mr-3" icon_class="fas fa-city" %}
{% br_button button_type="button" style="" extra_classes="circle" icon_class="fas fa-city" %}
</div>
<div class="p-3 bg-blue-warm-vivid-90">
{% br_button button_type="button" style="primary" extra_classes="dark-mode circle mr-3" icon_class="fas fa-city" %}
{% br_button button_type="button" style="secondary" extra_classes="dark-mode circle mr-3" icon_class="fas fa-city" %}
{% br_button button_type="button" style="" extra_classes="dark-mode circle" icon_class="fas fa-city" %}
</div>
<div class="p-3">
{% br_button text="Primário" button_type="button" style="primary" extra_classes="block mb-3" %}
{% br_button text="Secundário" button_type="button" style="secondary" extra_classes="block mb-3" %}
{% br_button text="Terciário" button_type="button" extra_classes="block mb-3" %}
</div>
<div class="p-3">
{% br_button text="Desativado" button_type="button" style="primary" extra_classes="disabled mr-3"%}
{% br_button text="Ativado" button_type="button" style="primary" extra_classes="active mr-3" %}
{% br_button text="Carregando" button_type="button" style="primary" extra_classes="loading" %}
</div>
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Carousel
{% endblock %}
{% block content %}
<div class="container">
{% br_carousel imagens=imagens %}
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Footer
{% endblock %}
{% block content %}
<div class="container">
{% br_footer lists=list copyright="© 2024 UFRPE | Todos os direitos reservados" logo_url="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" emec_image="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" acesso_a_info_image="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" %}
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Headers
{% 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>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Inputs
{% endblock %}
{% block content %}
<div class="container">
<!-- Input padrão -->
<div class="col-sm-8 col-lg-5">
<div class="input-default">
{% br_input input_type="text" placeholder="Placeholder" label="Label/Rótulo" input_id="input-default" extra_classes="" help_text="Texto auxiliar. Função de previnir erros." %}
</div>
</div>
<!-- Input com densidades -->
<div class="col-sm-4 col-lg-3 mb-3">
{% br_input input_type="text" placeholder="Placeholder" label="Densidade padrão" input_id="input-medium" extra_classes="" %}
</div>
<div class="col-sm-4 col-lg-3 mb-3">
{% br_input input_type="text" placeholder="Placeholder" label="Alta densidade" input_id="input-small" density="small" extra_classes="" %}
</div>
<div class="col-sm-4 col-lg-3 mb-3">
{% br_input input_type="text" placeholder="Placeholder" label="Baixa densidade" input_id="input-large" density="large" extra_classes="" %}
</div>
<!-- Input com ícones -->
<div class="col-sm-6 col-lg-4 mb-3">
{% br_input input_type="text" placeholder="Placeholder" label="Login" input_id="input-medium" extra_classes="" icon_class="fas fa-user-tie" %}
</div>
<div class="col-sm-6 col-lg-4 mb-3">
{% br_input input_type="text" placeholder="Placeholder" label="Alta densidade" input_id="input-small" density="small" extra_classes="" icon_class="fas fa-user" %}
</div>
<div class="col-sm-6 col-lg-4 mb-3">
{% br_input input_type="text" placeholder="Placeholder" label="Baixa densidade" input_id="input-large" density="large" extra_classes="" icon_class="fas fa-users" %}
</div>
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Lista
{% endblock %}
{% block content %}
<div class="container">
{% br_list title="Minha Lista" items=lista %}
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Menu
{% endblock %}
{% block content %}
<div class="container">
{% br_menu %}
</div>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Tag
{% endblock %}
{% block content %}
<div class="container mt-5">
<div class="d-flex align-items-center">
{% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-car" tag_text="Carro 1" tag_id="interaction01" %}
{% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-bicycle" tag_text="Bicicleta 1" tag_id="interaction02" %}
{% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-motorcycle" tag_text="Moto 1" tag_id="interaction03" %}
</div>
<div class="d-flex align-items-center mt-3">
{% br_tag icon_class="fas fa-car" tag_text="Texto e ícone" tag_id="tag02" extra_classes="bg-mint-cool-vivid-70 mr-3" %}
{% br_tag tag_text="Texto" tag_id="tag02" extra_classes="bg-violet-warm-vivid-70 mr-3" %}
</div>
<div class="d-flex align-items-center mt-3">
{% br_tag tag_text="Alta" tag_id="densidade01" extra_classes="bg-orange-vivid-50 mr-3" density="small" %}
{% br_tag tag_text="Padrão" tag_id="densidade02" extra_classes="bg-green-warm-vivid-50 mr-3" density="medium" %}
{% br_tag tag_text="Baixa" tag_id="densidade03" extra_classes="bg-indigo-warm-vivid-50 mr-3" density="large" %}
</div>
</div>
{% endblock %}
\ No newline at end of file
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