Pular para o conteúdo
Componentes

Aplicações e produtividade · Exclusivo THM

Esteira

Quadro de colunas com cartões que você arrasta entre etapas, com limite por coluna, prazos e prioridades.

Em resumo

Esteira é um componente exclusivo do THM Componentes que coloca um quadro de tarefas estilo Trello dentro do seu sistema: os cartões se arrastam entre colunas com animação suave, cada coluna pode ter limite WIP com alerta, e os cartões mostram etiquetas, responsável, prazo e prioridade. Funciona com mouse, toque longo e teclado, com anúncios para leitores de tela.

Esteira: Quadro de colunas com cartões que você arrasta entre etapas, com limite por coluna, prazos e prioridades.
Captura da demonstração no catálogo

Como ele é

Colunas lado a lado, cada uma com uma bolinha colorida, o título, a contagem de cartões e o limite, no formato 3/4. Os cartões são brancos, com etiquetas coloridas no alto, o título e uma linha com prazo, barrinhas de prioridade e as iniciais do responsável; prazos vencidos ganham um alerta. Ao pegar um cartão, ele sai levemente inclinado e com sombra, e os outros deslizam para abrir o espaço onde ele vai cair. Uma coluna que passa do limite ganha um aviso. No pé de cada coluna, um campo cria cartões na hora.

Você pode estar procurando isto se pediu algo assim

  • um quadro tipo Trello para arrastar tarefas entre colunas
  • colunas a fazer, fazendo e feito com cartões que eu movo
  • quadro de chamados para o atendimento com prioridade e prazo
  • limitar quantos cartões cabem em cada etapa do processo
  • kanban que funcione no celular arrastando com o dedo
  • gestão de sprint dentro do meu sistema com etiquetas e responsáveis
  • mover cartões pelo teclado para o quadro ficar acessível

Também chamado de

  • quadro kanban
  • kanban board
  • quadro de tarefas
  • task board
  • drag and drop board
  • arrastar e soltar
  • limite WIP

Quando usar

  • Gestão de sprints e de demandas de produto dentro do seu sistema
  • Esteiras de atendimento e triagem de chamados com prioridade e prazo
  • Fluxos de aprovação em ERPs e sistemas de governo, com uma coluna por etapa
  • Funis de vendas ou de recrutamento em que cada cartão avança por fases

Quando evitar

  • Projetos que dependem de datas e de dependências entre tarefas, que pedem um gráfico de Gantt
  • Colunas com centenas de cartões, já que todos ficam na página ao mesmo tempo

Como pedir para a sua IA

Pedido de exemplo
Crie um quadro kanban para a triagem de chamados do meu sistema: arrastar e soltar animado entre colunas, toque longo no celular, limite WIP com alerta, cartões com etiqueta, responsável, prazo e prioridade, criação rápida de cartão e arrasto completo pelo teclado com anúncios para leitor de tela.

Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.

Perguntas sobre Esteira

Esteira funciona no celular?

Funciona. No celular, Esteira só começa a arrastar depois de um toque longo de 280 milissegundos, com uma vibração curta onde o aparelho permite, para não atrapalhar a rolagem. Em telas estreitas as colunas viram um carrossel com encaixe, e o quadro rola sozinho perto das bordas enquanto você arrasta.

Como funciona o limite WIP em Esteira?

Cada coluna de Esteira pode ter um wipLimit. Por padrão, passar do limite só alerta: a contagem fica em destaque, aparece um aviso e o evento wip-exceeded é disparado. Com strictWip ligado, Esteira recusa soltar o cartão numa coluna que já está no limite.

Dá para mover cartões de Esteira pelo teclado?

Dá. Em Esteira, Espaço pega o cartão em foco, as setas o movem entre posições e colunas, Espaço ou Enter soltam e Esc cancela. Cada passo é anunciado para leitores de tela, inclusive o aviso quando o destino vai passar do limite WIP.

Aplicações e produtividade

Componentes relacionados

Deixe a sua IA com repertório de estúdio

268 componentes Vue e Nuxt, 115 exclusivos, prompt pronto em todos. Pagamento único, acesso vitalício e 7 dias de garantia.