- Dynamic Pages (MyPage)

- Uploading files to the Server FTP.

src/components/CTitleBanner/CTitleBanner.scss

@@ -0,0 +1,3 @@
+.myshad {
+  text-shadow: .125rem .125rem .125rem darkgray;
+}

src/components/CTitleBanner/CTitleBanner.ts

@@ -26,6 +26,23 @@ import { Screen } from 'quasar'
 export default class CTitleBanner extends Vue {
   @Prop({ required: true}) public title: string
   @Prop({ required: false, default: 'bg-primary' }) public bgcolor: string
-  @Prop({ required: false, default: 'primary' }) public color: string
+  @Prop({ required: false, default: 'text-white' }) public clcolor: string
+  @Prop({ required: false, default: '' }) public mystyle: string
+  @Prop({ required: false, default: '' }) public myclass: string
+  @Prop({ required: false, default: '' }) public myclasstext: string
+  @Prop({ required: false, default: '' }) public icon: string
+  @Prop({ required: false, default: true }) public visible: boolean
 
+  public myvisible: boolean = true
+
+  public mounted() {
+    this.myvisible = this.visible
+  }
+
+  get iconopen() {
+    if (!this.myvisible)
+      return 'fas fa-chevron-down q-icon q-expansion-item__toggle-icon q-focusable '
+    else
+      return 'fas fa-chevron-down q-icon q-expansion-item__toggle-icon q-focusable rotate-180'
+  }
 }

src/components/CTitleBanner/CTitleBanner.vue

@@ -1,11 +1,27 @@
 <template>
     <div>
         <q-banner
-                class="q-my-md"
-                rounded dense :class="bgcolor+` text-white`"
-                :color="color+` q-title`" style="text-align: center;">
-            <span class="mybanner">{{title}}</span>
+                inline-actions
+                rounded dense
+                :class="bgcolor+` q-my-md `+clcolor+ ` ` + myclass"
+                style="text-align: center; "
+                @click="myvisible = !myvisible"
+        >
+            <template v-slot:avatar>
+                <q-icon :name="icon" color="white" />
+            </template>
+            <template v-slot:action>
+                <q-icon :name="iconopen" color="white" />
+            </template>
+            <span :class="`mybanner `+ myclasstext" :style="mystyle">{{title}}</span>
         </q-banner>
+
+        <q-slide-transition>
+            <div v-show="myvisible">
+                <slot></slot>
+            </div>
+        </q-slide-transition>
+
     </div>
 </template>