deixa eu mostrar um negócio para vocês que eu vi essa semana Olha que bacana esse Swap aqui ó Meet Swap é Framework agnostic Tool ou seja tanto faz o que você tiver usando de Framework ele vai converter qualquer layout num drag to Swap ou seja ó vamos lá ó que ele faz olha que bacaninha então ele pega o layout eu não sei cara eu não sei parece que é muito mágico né mas ele pega o layout e ele arrasta e modifica tudo com algumas linhas de código né E aí tá dizendo que vai funcionar no
react View svelt Solid angular quid e que que isso aqui eu não consigo saber que isso aqui pra instalar Então a gente vai instalar ele a gente vai ou pegar ele do CDN deixa eu até pegar do CDN Porque daí a gente usa o front editor Swap Tô interessado Tô interessado em vezo daqui hum minha internetz minha hoje tá aqui tá já Faz hora que eu vi esse probleminha nela não tá conectando rápido as coisas front editor Dev Swap Mas tá bom vocês estão chegando tá chegando bem para vocês né a Live né Então tá
bom isso que importa então usando ele abaixo a gente vai mostrar um simples layout para usar ele aqui tá o layout com a classe container deixa eu ver ó é para especificar um slot data Swap slot Então vamos ler aqui ó data Swap slot então cada um dele full bar base Bas Bas bar full e o item o item e o item o item faz o qu vamos ver para marcar um elemento como o item você vai adicionar o item beleza por padrão itens são drages de qualquer ponto você pode especificar um handle data Swap
handle tem algum lugar aqui não só aqui tem um handle ou seja content B gos here tá pegar isso aqui vamos vamos ir colocando ali pra gente entender o que ele faz PR já dar ideias pra gente né de de aplicativos de coisas bom Aqui não tem nenhum conteúdo Mas vamos colocar aqui ó your content B Goes here conteúdo B deixa eu ver se ele não vai fazer isso daqui pra gente não precisar ficar fazendo né Talvez ele vai fazer um pouquinho mais aqui ó para usar tem o dynamic Spring on enable pegar ISS aqui
ó ah mas ele tá num Import Zinho da vida não precisa só isso daqu vamos ver então ao invés de eu colocarlo aqui eu vou colocar direto aqui no Script container Swap dynamic enable true you can disable and enable Any Time You Want Ah pode habilitar e desabilitar sempre que quiser conteúdo C já que ele não tá trazendo lá vamos colocar assim conteúdo a é obviamente tá faltando coisas vamos ver tá faltando coisas que mais que mais que mais que mais que mais hum One learn eu acho eu acho que o jeito que tá aqui
não tá bom isso aqui não tá pegando não só isso aquii não tá pegando a não ser que esse bom a gente fez o Create né a gente fez não fez Create tá aqui ó container aqui aqui molou vamos ver errinhos containers not defined ah What container What Pera aí pera perí vamos atualizar aqui Swap hum Create Swap hum pera pera per pera per per Create Swap deixa eu ver se tem a ver com a leitura do script script Vamos colocar o script mais PR cá mas acho que não Create not defined Cara eu acho
que esse essa maneira dele aqui não tá funcionando não por algum motivo estranho não e tá aqui o cara tá bom a outra a outra opção seria a gente instalar tudinho né e eu não quero pra gente poder ver mas enfim a gente já viu a gente já viu já tá bom já vimos já tá bom Swap Create Swap ah P cara o Zelos falou uma coisa boa ali velho eu com preguiça não fiz com dois PS né com dois PS vamos ver aqui not defined Swap com um p só Swap com um pezinho tá
ala Nossa o cara é um um Deus um Deus um Deus ô eu sou muito bom né codando né obrigado eu sou muito bom é óbvio né porque a gente tá importando ele assim talvez ele tá exportando de uma forma que já que ele mostrou aqui o Import já que ele mostrou aqui esse importe aqui do Swap a conclusão é que ele poderia ter feito aqui né Ah tá aqui nossa tava ali tava ali o tempo inteiro Então é isso ó a gente consegue mexer no no Bichinho a gente consegue mexer no Bichinho e o
b ah o b é o seguinte ó que ele falou tem um handle Zinho né vamos vamos supor que seja esse carinha aqui o handle ó esse seria o handle do b ó o handle funciona assim então handle traduzindo um volante se você vai dirigir um carro você precisa fazer um handle do carro você precisa dirigir o carro Você precisa de alguma coisa para dirigir ele é mais ou menos isso então aqui esse é o carinha handle que vai mexer no conteúdo do B Se eu tentar direto no conteúdo do B não dá porém nos
outros que não foi definido handle eu posso ir direto no conteúdo Ok só para ficar claro Quais são as opções que o que ele dá pra gente Então temos o slot temos o item slot item slot item beleza daí a gente consegue ficar mexendo os carinhas assim cara legal tem uma animação dinâmica Spring or non vamos ver o que que é o Spring de animação Spring que ele faz ele faz nada né ah que ele Spring é não entendi a diferença dos dois or non vamos ver non aqui ele fica mais seco aqui ele fica
mais seco aqui eu senti hum dynamic Spring não senti muita diferença não bom demais Spring o arrasta é mais suave é mais suave Ah tá o Spring ele ficou mais Smooth beleza mais suave disse o Quinas e o Felipe boa cara eu gostei vocês gostaram achou legal salve dá para fazer duas colunas simples assim ou a zeda não dá cara aqui ó o que ele mostra aqui inclusive é de colunas Se bem que aquele tá num Grid né que ele tá num Grid mas dá pô só meter um flexada flexão flexão vamos fazer PR ver
como que fica esse é o contêiner vamos ver se a zeda no contêiner duas colunas então V imaginar isso daqui ó coluna A e coluna B né e aqui a gente vem no contêiner Opa container display Flex ele já ele começou meio estranho mas aí ó funciona bem pô funciona bem Dá para colocar um gapz inho aqui coloca ali um gapz inho a entradinha dele que é engraçada ele fez uma entrada estranha mas funciona legal ó colunas muito legal né dá para fazer um trelo puxando os cards dá Cadê o c é eu tirei para
poder fazer a coluna só para ficar mais mas dá para fazer aí seriam três colunas né com c ali bom então esse aqui foi o Swap testem aí contem para mim depois como que vocês estão usando vai ser interessante bacana bacana bacana
