Mecanismos de trabalho com várias estruturas e considerações
O Shuffle permite a conversão automática do mesmo componente entre diferentes estruturas CSS por meio de uma arquitetura subjacente inteligente, cuja implementação técnica inclui:
Mecanismos principais
- Sistema de mapeamento de componentes: cada componente da interface do usuário tem uma versão da implementação do código que corresponde a uma estrutura diferente
- mecanismo de conversão de nome de classeConversão automática, por exemplo, de "bg-blue-500" do Tailwind para "bg-primary" do Bootstrap.
- Editor com reconhecimento de quadrosPropriedades: O painel Propriedades exibe opções de estilo com base no quadro atual.
Recomendações de uso
É necessário ter cuidado ao trocar de quadros:
- Opções de inicializaçãoSeleção explícita da estrutura básica é necessária para novos projetos (pode ser alterada em um estágio posterior, mas pode envolver ajustes).
- Tratamento de classes personalizadas: nomes de classe não padrão adicionados manualmente não são convertidos automaticamente
- Compatibilidade de componentesAlguns componentes específicos da estrutura (por exemplo, botões flutuantes do Material-UI) podem se comportar de forma diferente em outras estruturas.
- Diferenças de respostaO sistema de ponto de interrupção de cada estrutura (por exemplo, col-md-* do Bootstrap vs. md:* do Tailwind) precisa ser recalibrado
Recomenda-se verificar o efeito de exibição em diferentes dispositivos por meio da função de visualização ao vivo na parte superior, prestando atenção especial às diferenças de interação dos elementos do formulário e dos componentes de navegação em diferentes quadros.
Essa resposta foi extraída do artigoShuffle: editor de arrastar e soltar para criar rapidamente modelos da Web, com suporte para a extensão CursorO
Não pode ser reproduzido sem permissão:Ferramentas de produtividade de IA " Como o Shuffle implementa o suporte a vários quadros? Do que preciso estar ciente ao alternar quadros?
Português do Brasil 
简体中文 
English 
日本語 
Deutsch