JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
 <div id="app">
 <v-card outlined>
      <v-card-title>Selection</v-card-title>

      <v-toolbar height="80" elevation="0">
        <v-menu transition="slide-y-transition" nudge-left="9" nudge-bottom="10" offset-y>

          <template v-slot:activator="{ on: menu }">
            <v-tooltip right>
              <template v-slot:activator="{ on:tooltip }">
                <v-btn class="mb-6" v-on="{...tooltip, ...menu}" fab>
                  <v-icon x-large>{{ myIcon }}</v-icon>
                </v-btn>
              </template>
              <span>Steady</span>
            </v-tooltip>
          </template>


          <v-list>
            <v-list-item>
              <v-icon color="green" x-large @click="changeSupplierStatusToUp()">mdi-chevron-up</v-icon>
            </v-list-item>

            <v-divider></v-divider>


            <v-list-item>
              <v-icon color="grey" x-large @click="changeSupplierStatusToMid()">mdi-unfold-less-vertical
              </v-icon>
            </v-list-item>
            <v-divider></v-divider>
            <v-list-item>
              <v-icon color="red" x-large @click="changeSupplierStatusToDown()">mdi-chevron-down</v-icon>
            </v-list-item>
          </v-list>
        </v-menu>

      </v-toolbar>

    </v-card>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

JavaScript

const vuetifyOptions = { }
Vue.use(Vuetify);

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    myIcon: 'mdi-unfold-less-vertical',
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    changeSupplierStatusToUp() {
    	this.myIcon = 'mdi-chevron-up'
		},
		changeSupplierStatusToDown() {
			this.myIcon = 'mdi-chevron-down'
		},
		changeSupplierStatusToMid() {
			this.myIcon = 'mdi-unfold-less-vertical'
		}
  }
})