é removido, destruir () redefine seus estilos. ✅ O resultado: uma caixa redimensível que atualiza instantaneamente à medida que o controle deslizante se move. Ações avançadas (exemplos extras) 🚀 Até agora você já viu como as ações podem adicionar comportamento reutilizável aos elementos DOM. Let, trazem de volta alguns presentes extras do antigo rascunho – ações que são um pouco mais avançadas, mas super úteis em aplicativos reais. 1. Teclas de acelerador de entrada debounced ⏳ Aceptação antes de disparar trabalhos caros (como solicitações da API). // src/lib/ações/debounce.js função exportação debounce (nó, atraso = 300) {let timeout; manipulador de função (e) {clearTimeout (timeout); timeout = setTimeout (() => {node.dispatchEvent (new Customevent (‘Debounced’, {detalhe: e.target.value}));}, atraso); } node.addeventListener (‘input’, manipulador); return {Destroy () {Node.RemoveEventListener (‘Input’, Handler); }}; } Digite o modo de saída do modo de tela completa Uso do modo de tela completa ✅ Super Handy para caixas de pesquisa – você não deseja martelar seu back -end em cada pressionamento de teclas. O Debouncing ajuda a otimizar a experiência do usuário, reduzindo chamadas de API desnecessárias, especialmente ao lidar com insumos de pesquisa, validação ao vivo ou qualquer componente que reage à digitação do usuário. 2. Arraste e solte (básico) 🖱️ Torne os elementos arrastáveis ​​com quase nenhum código. // src/lib/ações/draggable.js função de exportação draggable (node) {node.draggable = true; função manipuladaRagstart (e) {e.datatransfer.setData (‘text/plana’, node.id); node.classList.add (‘arrastando’); } function HandledRagend () {node.classList.remove (‘arrastando’); } node.adDeventListener (‘dragstart’, manuseragstart); node.addeventListener (‘dragend’, manipulador); return {Destroy () {Node.RemoveEventListener (‘Dragstart’, HandledRagstart); node.removeEventListener (‘dragend’, manipulador); }}; } Digite o uso do modo de tela cheia de tela cheia {draggable} de ‘$ lib/ações/draggable.js’; id = “Card1” Use: Draggable class = “Card”> Arraste -me! .Card {preenchimento: 1Rem; Antecedentes: Coral; Largura: 120px; Radio de fronteira: 8px; Cursor: pegue; } .Dragging {Opacity: 0.5; } Digite o modo de saída de tela cheia de tela cheia ✅ Perfeito para a criação de placas Kanban, listas classificáveis ​​ou qualquer interface do usuário de arrasto-n-Drop. Mini recapitulação 📝 Até agora, você aprendeu: Ações Anexe o comportamento reutilizável DOM com o uso: Diretiva. Eles podem: limpar (destruir) reagir às alterações de parâmetros (atualização) até mesmo envia os eventos personalizados de volta aos seus componentes. Juntos, construímos: foco automático (lógica simples de montagem) Clickoutside (limpeza em destruição) Redize (parâmetros e atualizações) Debounce (Eventos personalizados) Draggable (real DOM APIs) Notas extras para iniciantes 🔹 Debounce: Quando chamamos o Node.DispatchEvent (novo Customevent (…), em Basicamente, dizendo: “Pensando isso é normais de um dos normais.” 🔹 Draggable: node.Draggable = true; está apenas permitindo o suporte de arrasto embutido do navegador. Ainda não estamos movendo elementos-apenas marcando-os como arrastáveis ​​e estilizando-os enquanto eles estão sendo arrastados. É por isso que esta versão é “básica”. Você pode estendê -lo mais tarde com zonas de queda ou reordenar a lógica. ✨ E essas são ações! Pequenas funções que dão a seus elementos superpotências reutilizáveis. Próximo: Vamos explorar as crianças, a arma secreta de Siete para a composição flexível dos componentes. Por que crianças? 👶 Os adereços permitem que os pais enviem dados para crianças. As crianças deixam os pais enviarem conteúdo para crianças. Eles são a espinha dorsal das bibliotecas de interface do usuário reutilizáveis ​​- pense em botões, cartões, layouts, modais. Enquanto as ações manipulam o comportamento dos elementos DOM (como adicionar ouvintes de eventos de clique ou redimensionar um elemento), as crianças permitem que os pais injetem conteúdo nos componentes. Juntos, ações e crianças tornam seus componentes mais dinâmicos e reutilizáveis. As crianças são como recortes no seu componente, onde os pais podem injetar seu próprio conteúdo. Crianças padrão 📦 Às vezes, você não quer que seu componente fique bem – você quer que seja um contêiner para outras coisas. É para isso que serve o suporte das crianças. É como dizer: “Ei, pai, você me diz o que entra e eu vou lidar com o invólucro”. Exemplo: exportação de componentes do cartão Let Children; class = “Card”> {@render filhos?. ()} .card {borda: 1px Solid #DDD; Radio de fronteira: 6px; preenchimento: 1Rem; } Digite o modo de saída do modo de tela completa usando o cartão de importação do cartão de ‘$ lib/componentes/card.svelte’; Olá, isso está dentro do cartão! Digite Modo de tela cheia de saída Modo de tela cheia ✨ Boom! Tudo o que você escreve entre … é passado para o suporte das crianças e renderizado para dentro. Pense nisso como uma caixa de bento 🍱: O cartão fornece o contêiner, você fornece o enchimento delicioso. Crianças nomeadas 🧁 E se o seu componente tiver várias áreas – como cabeçalho, corpo e rodapé – em vez de apenas um? Você pode aceitar crianças nomeadas, que são apenas adereços que são funções que retornam conteúdo. Exemplo: exportação de componente de layout Let cabeçalho; exportar let rodapé; exportar deixar crianças; // Área padrão {@render cabeçalho?. ()} {@render filhos?. ()} {@render Footer?. ()} Digite o modo de saída do modo de tela cheia usando o layout de importação de layout de ‘$ lib/componentes/layout.svelte’; cabeçalho = {() =>

Meu site

} rodapé = {() => © 2025Small>}> O conteúdo principal vai aqui. Digite o modo de saída do modo de tela cheia ✅ Cada peça é descartada exatamente onde você deseja. Pense nisso como uma bandeja de muffin: Cada “copo” tem seu próprio recheio. Crianças de fallback 📝 Às vezes, os pais não passam nada. Seu componente deve ser uma concha vazia? Não! Você pode fornecer conteúdo padrão. Exemplo: Exportação do componente do botão Let Children = () => “Clique em mim”; {@Render Children ()} Digite o modo de saída de tela cheia de tela cheia usando o botão Importar botão de ‘$ lib/componentes/button.svelte’; /> Salvar, digite o modo de saída de tela cheia de tela cheia ✅ Se o pai passar pelos filhos, esses terão prioridade. Caso contrário, o componente educadamente volta ao seu padrão. É como deixar uma nota pegajosa amigável: “Esqueci de me passar algo? Não se preocupe, eu peguei para vocês os filhos como funções de renderização (criança → pai) 🔄 Aqui está a parte muito legal: as crianças não precisam ser apenas conteúdo estático – elas podem ser funções que recebem dados do componente filho. Isso significa: a criança decide quando renderizar algo (como percorrer uma lista). O pai decide como deve parecer. Exemplo: Lista de exportação de componentes Let Itens = []; exportar deixar crianças; {#ECH itens como item} {@render filhos ({item})} {/cada} Digite o modo de saída da tela cheia de tela cheia usando a lista de importação da lista de ‘$ lib/components/list.svelte’; itens = {[‘Ada’, ‘Grace’, ‘Linus’]}> {({item}) => {item.ToupPercase ()}} Digite o modo de saída da tela cheia ✅ O componente da lista controla quando renderizar cada um .✅ O pai controla como é cada item – neste caso, nomes em upper. É como a criança dizendo: “Aqui estão os dados” e os pais respondendo: “Legal, eu vou vestir -o”. 🎨 Gotchas e práticas recomendadas ⚠️ Sempre forneça crianças de fallback para que seu componente não quebre se nada for passado. Ao fazer um loop com {#each}, sempre use teclas (por exemplo, {#ECH itens como item (item.id)}) para evitar bugs estranhos de reciclagem. As crianças como funções são poderosas, mas mantêm isso simples-apenas passe os dados que os pais realmente precisam. Cobrimos muito terreno aqui: Ações: de um foco automático de uma linha a comportamentos avançados com limpeza, parâmetros e eventos personalizados. Crianças: do conteúdo padrão, às seções nomeadas, a renderizar funções que permitem que os pais personalizem a lógica de renderização. Esses padrões tornam seus componentes mais inteligentes e reutilizáveis. Em seguida, amarraremos as coisas com ganchos e acessibilidade do ciclo de vida – garantindo que seus componentes se comportem corretamente ao longo do tempo e sejam utilizáveis ​​por todos.

Fonte