GIS Feature Bar
Versao: 1.0.0 Data: 13/03/2026
Visao Geral
O componente GIS Feature Bar e uma barra flutuante posicionada na parte inferior do mapa que aparece ao clicar em uma feature geografica. Exibe informacoes resumidas da feature selecionada e disponibiliza botoes de acao rapida como visualizar detalhes, editar ou navegar ate o registro.
Estrutura HTML
html
<div class="gis-feature-bar">
<div class="gis-feature-bar__data">
<div class="gis-feature-bar__section">
<span class="gis-feature-bar__label">Propriedade</span>
<span class="gis-feature-bar__value">Fazenda Boa Vista</span>
</div>
<div class="gis-feature-bar__section">
<span class="gis-feature-bar__label">Municipio</span>
<span class="gis-feature-bar__value">Goiania - GO</span>
</div>
</div>
<div class="gis-feature-bar__actions">
<button class="btn btn--sm" title="Ver detalhes">
<i class="material-icons">visibility</i>
</button>
<button class="btn btn--sm" title="Editar">
<i class="material-icons">edit</i>
</button>
</div>
</div>Estado Visivel
A barra inicia oculta e recebe a classe .visible ao selecionar uma feature:
html
<div class="gis-feature-bar visible">
<!-- conteudo -->
</div>Funcionalidades
- Exibicao contextual -- aparece automaticamente ao clicar em uma feature no mapa e desaparece ao desmarcar
- Informacoes resumidas -- exibe dados da feature em secoes rotuladas (label/value)
- Acoes rapidas -- botoes para operacoes comuns como visualizar, editar ou navegar ao registro
- Animacao slide-up -- a barra desliza de baixo para cima ao aparecer, com transicao suave via CSS
Classes CSS
| Classe | Descricao |
|---|---|
.gis-feature-bar | Container principal, position: absolute na base do mapa, fundo escuro #141926 |
.gis-feature-bar.visible | Estado visivel com animacao slide-up |
.gis-feature-bar__data | Secao de dados da feature |
.gis-feature-bar__section | Grupo individual label/value |
.gis-feature-bar__label | Rotulo do dado |
.gis-feature-bar__value | Valor do dado |
.gis-feature-bar__actions | Container dos botoes de acao |
Dark Mode
O componente utiliza fundo escuro (#141926) por padrao, pois e desenhado para sobrepor o mapa. Nao necessita de ajustes adicionais para dark mode, ja que seu esquema de cores e intrinsecamente escuro com texto claro.
Mantido por: Equipe Ipeweb