cssd-back/resources/js/vue/components/modal/user/Role.vue

<template>
  <v-form>
    <v-container grid-list-xs fluid>
      <material-card class=""
        color="black"
        title="Role"
      >
        <v-layout row align-center justify-center wrap class="px-5 mb-3">
          <v-flex xs12 md3 sm3>
            <v-select
              :items="items"
              v-model="roles"
              label="Roles"
              color="black"
            ></v-select>
          </v-flex>
        </v-layout>
        <v-layout row wrap>
          <v-layout align-center justify-center wrap class="px-5 mt-2">
            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
              <span class="white--text">Add</span>
            </v-btn>
            <router-link to="/dashboard">
              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
                <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
                <span class="black--text">Close</span>
              </v-btn>
            </router-link>
          </v-layout>
        </v-layout>
      </material-card>
    </v-container>
  </v-form>
</template>
<script>
export default {
  name: "",
  data: () => ({
    items : [
      'SuperAdmin',
      'Admin',
      'SuperVisior',
      'User'
    ]
  })
}
</script>
<style lang="scss" scoped>
</style>