{{ page_title }}

{{ page_description }}

{{ total_categories }}
Categorias
{{ total_components }}
Componentes
{{ components_ok }}
Renderizados OK
{{ components_error }}
Com Erros
{% if error_message %}

Erro ao Carregar Componentes

{{ error_message }}

{% endif %} {% if debug_mode and debug_log %}
{% endif %} {% if categories_with_components %}
{% for category_name, category in categories_with_components.items %}

{{ category.display_name }}

{{ category.description }}

{{ category.rendered_components|length }} componente{{ category.rendered_components|length|pluralize }} {% with error_count=0 %} {% for component in category.rendered_components %} {% if component.has_error %} {% if forloop.first %} Com problemas {% endif %} {% endif %} {% endfor %} {% endwith %}
{% for component in category.rendered_components %}
{{ component.display_name }}
{% if component.has_error %} Erro {% else %} OK {% endif %} {{ component.class_name }}
{{ component.rendered_html|safe }}
{% if debug_mode and component.data_used %}
Ver dados utilizados ({{ component.data_used|length }} campos)
{% for key, value in component.data_used.items %}
{{ key }}:
{{ value|truncatechars:200 }}
{% endfor %}
{% endif %} {% if component.error_message %}
Ver detalhes do erro
{{ component.error_message }}
{% endif %}
{% empty %}

Nenhum componente renderizado

Esta categoria não possui componentes que puderam ser renderizados.

{% endfor %}
{% endfor %}
{% else %}

Nenhum componente encontrado

Verifique se os LAYOUT_STREAMBLOCKS estão configurados corretamente.

{% endif %}

Sobre este Showcase

Este showcase apresenta visualmente todos os componentes do Design System ENAP. Cada componente é renderizado com dados realistas para demonstrar sua aparência e funcionalidade.

Use os filtros acima para navegar pelas categorias ou buscar componentes específicos. Componentes que não puderam ser renderizados são marcados com placeholders informativos.