Vuetify Expansion Panel in SharePoint
Posted by Isaac Sogunro
I have had the pleasure of doing a lot with the VUE.js framework and I have created tons of videos on using Vue.js with SharePoint. I recently created a video on using Vuetify with SharePoint. Vuetify is a ‘Material Design Component Framework’ made for VUE. Check out the UI components. There are a plethora of components that can be leveraged and used in SharePoint. Here’s a video on using the ‘Expansion Panel‘ I created recently. Below is the code used in the video:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> | |
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" /> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" /> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <v-app id="inspire"> | |
| <v-expansion-panel inset focusable> | |
| <v-expansion-panel-content lazy | |
| v-for="(item,i) in expansion" | |
| :key="i" | |
| > | |
| <template v-slot:header> | |
| <div>{{item.Title}}</div> | |
| </template> | |
| <v-card> | |
| <v-card-text>{{item.Details}}</v-card-text> | |
| </v-card> | |
| </v-expansion-panel-content> | |
| </v-expansion-panel> | |
| </v-app> | |
| </div> | |
| <script type="text/javascript" src="/sites/demos/mdemos/webpart/expansion/expansionPanel.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| el:"#app", | |
| data: { | |
| expansion: [] | |
| }, | |
| created: function(){ | |
| this.getListData(); | |
| }, | |
| methods: { | |
| getListData: function(){ | |
| var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('expansion list')/items"; | |
| var vm = this; | |
| axios.get(endPointUrl).then(function(response){ | |
| vm.expansion = response.data.value; | |
| }) | |
| .catch(function(error){ | |
| console.log(error); | |
| }) | |
| .then(function(){ | |
| console.log("Always executes") | |
| }) | |
| } | |
| } | |
| }) |
SharePoint 2013 Expansion panel SharePoint Online Vue.js Vuetify
Optimal Training Group 