🗺️ Guia de Uso: Dropdown GIS

Design System SIDASP (Fork Gales)Versão: 2.0.0 Data: 09/01/2026

---

📑 Índice

• Visão Geral
• Estrutura
• Checkbox Customizado
• Dark Mode
• Dependências

---

🎯 Visão Geral

O Dropdown GIS é um componente estilizado especificamente para o controle de camadas em mapas (OpenLayers) dentro de um Drawer. Ele organiza camadas em categorias e oferece checkboxes customizados para alternar a visibilidade.

Nota: Este componente reutiliza o Drawer existente para o container principal.

---

🏗️ Estrutura

Categoria de Camadas

Agrupa camadas relacionadas.

<div class="gis-layer-category">
    <div class="gis-layer-category__title">Base Maps</div>
    <div class="gis-layer-category__items">
        <!-- Itens de camada aqui -->
    </div>
</div>

Item de Camada

Representa uma camada individual com título, descrição e toggle.

<div class="gis-layer-item">
    <div class="gis-layer-item__content">
        <h4 class="gis-layer-item__title">Satélite</h4>
        <p class="gis-layer-item__description">Imagens de satélite de alta resolução</p>
    </div>
    <div class="gis-layer-item__checkbox">
        <input type="checkbox" checked>
        <div class="gis-layer-item__checkbox-visual"></div>
    </div>
</div>

---

☑️ Checkbox Customizado

O componente utiliza um checkbox visualmente customizado para melhor integração com o design system e suporte a estados (checked, hover, focus).

<div class="gis-layer-item__checkbox">
    <input type="checkbox">
    <div class="gis-layer-item__checkbox-visual"></div>
</div>

---

🌓 Dark Mode

Suporte completo a modo escuro, ajustando cores de texto, bordas e fundos para integração perfeita com interfaces de mapa noturnas.

---

📦 Dependências

• drawer.css
• drawer.js

Este arquivo CSS deve ser carregado após o CSS do Drawer.

---

Mantido por: Equipe Ipeweb