vuetify

by stdob__

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <div>
          <v-snackbar v-model="snackbar" :bottom="y === 'bottom'" :left="x === 'left'" :multi-line="mode === 'multi-line'" :right="x === 'center'" :timeout="timeout" :top="y === 'top'" :vertical="mode === 'vertical'" :color="'success'" :auto-height="true">
            <div>{{ text }}</div>
            <v-btn color="white" flat @click="snackbar = false">
              Close
            </v-btn>
          </v-snackbar>
        </div>
      </v-container>
    </v-content>
  </v-app>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
      snackbar: true,
      y: 'top',
      x: 'right',
      mode: '',
      timeout: 6000,
      text: 'Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt Yayy! Benutzer erfolgreich angelegt',
  })
})