🧩 Exercícios Práticos: Scoped CSS, Tailwind e Transições Nativas

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 11.1 — Estilos Escopados com

Contexto: Estilos Escopados com

Requisitos de Execução:

  1. Criar componente com <style scoped> garantindo isolamento através de atributos data-v-xxx.

Resultado Esperado

Estilos CSS restritos ao escopo local do componente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_1_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Scoped CSS, Tailwind e Transições Nativas
🔑 Gabarito de Código & Solução Comentada 
<!-- ScopedCard.vue -->
<template>
  <div class="card-estilizado">
    <h2>Título Escopado</h2>
  </div>
</template>

<style scoped>
.card-estilizado {
  background-color: #f8fafc;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
</style>

🔍 Nível 2: Prática

Problema 11.2 — Transições Nativas com

Contexto: Transições Nativas com no contexto de Scoped CSS, Tailwind e Transições Nativas.

Requisitos de Execução:

  1. Animar entrada e saída de alerta usando <Transition name='fade'> e classes CSS de transição.

Resultado Esperado

Animação de fade-in e fade-out suave na exibição do alerta.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_2_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Scoped CSS, Tailwind e Transições Nativas
🔑 Gabarito de Código & Solução Comentada 
<!-- FadeTransition.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const visivel = ref(true);
</script>

<template>
  <div>
    <button @click="visivel = !visivel">Toggle</button>
    <Transition name="fade">
      <div v-if="visivel" class="box">Conteúdo Animado</div>
    </Transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

⚡ Nível 3: Integração

Problema 11.3 — Transição de Listas com

Contexto: Transição de Listas com no contexto de Scoped CSS, Tailwind e Transições Nativas.

Requisitos de Execução:

  1. Animar adição e remoção de itens em lista com <TransitionGroup tag='ul' name='list'>.

Resultado Esperado

Itens adicionados e removidos com animação fluida na lista.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_3_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Scoped CSS, Tailwind e Transições Nativas
🔑 Gabarito de Código & Solução Comentada 
<!-- TransitionList.vue -->
<template>
  <TransitionGroup tag="ul" name="list">
    <li v-for="item in items" :key="item.id">{{ item.nome }}</li>
  </TransitionGroup>
</template>

🏆 Nível 4: Desafio Corporativo

Problema 11.4 — Tema Dinâmico (Dark Mode) com Tailwind CSS e VueUse

Contexto: Tema Dinâmico (Dark Mode) com Tailwind CSS e VueUse no contexto de Scoped CSS, Tailwind e Transições Nativas.

Requisitos de Execução:

  1. Integrar useDark() do VueUse para alternância dinâmica de classe dark no elemento <html>.

Resultado Esperado

Modo escuro comutado com persistência automática de preferência do usuário.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_4_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Scoped CSS, Tailwind e Transições Nativas
🔑 Gabarito de Código & Solução Comentada 
<!-- DarkModeToggle.vue -->
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<template>
  <button @click="toggleDark()">Alternar Modo Escuro</button>
</template>
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos