ImageCarousel props

ui/src/App.vue

@@ -8,7 +8,12 @@
       />
       <Dashboard>
         <template slot="message">
-          <ImageCarousel :speed="image_speed" :image_urls="image_urls" />
+          <ImageCarousel
+            :speed="image_speed"
+            :height="image_height"
+            :contain="image_contain"
+            :urls="image_urls"
+          />
           <div v-html="message_html" />
         </template>
         <template slot="calendars">
@@ -55,6 +60,8 @@ export default class App extends Vue {
   private title_html = "<h1>changeme</h1>";
 
   private image_urls = require("@/assets/image_testdata.json");
+  private image_height = 300;
+  private image_contain = false;
   private image_speed = 10000;
   private message_html = "<p>changeme</p>";
 

ui/src/components/ImageCarousel.vue

@@ -2,12 +2,17 @@
   <v-carousel
     cycle
     :interval="speed"
-    height="300"
+    :height="height"
     :show-arrows="false"
     touchless
     hide-delimiters
   >
-    <v-carousel-item v-for="url in image_urls" :key="url" :src="url" />
+    <v-carousel-item
+      v-for="url in urls"
+      :key="url"
+      :src="url"
+      :contain="contain"
+    />
   </v-carousel>
 </template>
 
@@ -19,8 +24,14 @@ export default class ImageCarousel extends Vue {
   @Prop({ default: 10000 })
   private readonly speed!: number;
 
+  @Prop({ default: 300 })
+  private readonly height!: number;
+
+  @Prop({ default: false })
+  private readonly contain!: boolean;
+
   @Prop({ required: true })
-  private readonly image_urls!: Array<string>;
+  private readonly urls!: Array<string>;
 }
 </script>