From ac100de8d8e0fc85e34cde9aec6262259b12f96c Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Mon, 30 Dec 2024 21:53:48 +0100
Subject: [PATCH] style scoped locali
---
08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/App.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 117 insertions(+), 0 deletions(-)
diff --git a/08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/App.vue b/08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/App.vue
new file mode 100644
index 0000000..383aceb
--- /dev/null
+++ b/08 - component communication/cmp-communication-08-a-potential-problem-starting-setup/src/App.vue
@@ -0,0 +1,117 @@
+<template>
+ <div>
+ <active-element
+ :topic-title="activeTopic && activeTopic.title"
+ :text="activeTopic && activeTopic.fullText"
+ ></active-element>
+ <knowledge-base ></knowledge-base>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ topics: [
+ {
+ id: 'basics',
+ title: 'The Basics',
+ description: 'Core Vue basics you have to know',
+ fullText:
+ 'Vue is a great framework and it has a couple of key concepts: Data binding, events, components and reactivity - that should tell you something!',
+ },
+ {
+ id: 'components',
+ title: 'Components',
+ description:
+ 'Components are a core concept for building Vue UIs and apps',
+ fullText:
+ 'With components, you can split logic (and markup) into separate building blocks and then combine those building blocks (and re-use them) to build powerful user interfaces.',
+ },
+ ],
+ activeTopic: null,
+ };
+ },
+ provide(){
+ return {
+ topics: this.topics,
+ selectTopic: this.activateTopic,
+ }
+ },
+ methods: {
+ activateTopic(topicId) {
+ this.activeTopic = this.topics.find((topic) => topic.id === topicId);
+ },
+ },
+ mounted(){
+ setTimeout(() => {
+ this.topics.push({
+ id: 'events',
+ title: 'Events',
+ description: 'Vieni all\'evento',
+ fullText:
+ 'Gli eventi ti permettono di triggherare il codice on demand',
+ });
+ }, 3000);
+ }
+};
+</script>
+
+<style>
+* {
+ box-sizing: border-box;
+}
+html {
+ font-family: sans-serif;
+}
+body {
+ margin: 0;
+}
+section {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 2rem auto;
+ max-width: 40rem;
+ padding: 1rem;
+ border-radius: 12px;
+}
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+}
+
+li {
+ border-radius: 12px;
+ border: 1px solid #ccc;
+ padding: 1rem;
+ width: 15rem;
+ margin: 0 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+h2 {
+ margin: 0.75rem 0;
+ text-align: center;
+}
+
+button {
+ font: inherit;
+ border: 1px solid #c70053;
+ background-color: #c70053;
+ color: white;
+ padding: 0.75rem 2rem;
+ border-radius: 30px;
+ cursor: pointer;
+}
+
+button:hover,
+button:active {
+ background-color: #e24d8b;
+ border-color: #e24d8b;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0