slot -> prop

ui/src/App.vue

@@ -1,11 +1,10 @@
 <template>
   <v-app>
     <v-main>
-      <TitleBar>
+      <TitleBar :title="title_html" />
-        <div v-html="title_html" />
-      </TitleBar>
       <HelloWorld />
     </v-main>
+    <TickerBar :content="ticker_html" />
   </v-app>
 </template>
 
@@ -13,15 +12,18 @@
 import { Component, Vue } from "vue-property-decorator";
 import HelloWorld from "./components/HelloWorld.vue";
 import TitleBar from "./components/TitleBar.vue";
+import TickerBar from "./components/TickerBar.vue";
 
 @Component({
   components: {
     HelloWorld,
     TitleBar,
+    TickerBar,
   },
 })
 export default class App extends Vue {
   private title_html = "<h1>changeme</h1>";
+  private ticker_html = "<p>changeme</p>";
 }
 </script>
 

ui/src/components/TickerBar.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-footer color="primary" dark>
+    <span
+      class="text-h6"
+      :style="{ 'animation-duration': marqueeDuration }"
+      ref="slotWrapper"
+    >
+      <div v-html="content" />
+    </span>
+  </v-footer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class TickerBar extends Vue {
+  @Prop()
+  public content!: string;
+
+  get marqueeDuration(): string {
+    // 10 seconds + another second per 7 chars
+    let dv = this.content ? Math.round(this.content.length / 7) : 0;
+    return 10 + dv + "s";
+  }
+}
+</script>
+
+<style lang="scss">
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
+
+.v-footer {
+  white-space: nowrap;
+  overflow: hidden;
+
+  > span {
+    display: inline-block;
+    padding-left: 100%;
+    text-indent: 0;
+    animation: marquee 30s linear infinite;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+}
+</style>
+
+<style>
+.v-footer p {
+  margin: 0;
+}
+</style>

ui/src/components/TitleBar.vue

@@ -5,9 +5,10 @@
         <THWLogo :above="logo_above" :below="logo_below" />
       </div>
 
-      <div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5">
+      <div
-        <slot> <h1>TITLE</h1> </slot>
+        class="d-flex justify-center text-center mx-auto text-h6 text-md-h5"
-      </div>
+        v-html="title"
+      />
 
       <div class="d-none d-sm-flex justify-end text-right text-no-wrap">
         <div class="flex-column">
@@ -46,6 +47,11 @@ export default class TitleBar extends Vue {
     default: "OV Musterstadt",
   })
   public logo_below!: string;
+
+  @Prop({
+    default: "TITLE",
+  })
+  public title!: string;
 }
 </script>