Close #13: Let developer provide custom icons

darrenfang · Dec 26, 2018 · 6825df7 · 6825df7
1 parent 9602cd6
commit 6825df7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -53,3 +53,11 @@ Once installed, it can be used in a template as simply as:
 |    Name    |    Arguments           |       Description        |
 | -----------| -----------------------| ------------------------ |
 | input      | value (Date/String)    | The updated bound model  |
+
+## Slots
+
+|    Name    |       Description                         |
+| -----------| ----------------------------------------- |
+| dateIcon   | Slot to put custom icon in the date tab.  |
+| timeIcon   | Slot to put custom icon in the time tab.  |
+| actions    | Slot to put custom buttons in the dialog. |
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "url": "git+https://github.com/darrenfang/vuetify-datetime-picker"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.6.3",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",

diff --git a/src/app.vue b/src/app.vue
@@ -29,12 +29,26 @@
                     </v-datetime-picker>
                 </v-flex>
             </v-layout>
+            <v-layout row justify-center>
+                <v-flex xs4>
+                    <span class="subheading">Custom Icons</span>
+                    <v-datetime-picker v-model="datetime">
+                        <template slot="dateIcon">
+                            <v-icon>fas fa-calendar</v-icon>
+                        </template>
+                        <template slot="timeIcon">
+                            <v-icon>fas fa-clock</v-icon>
+                        </template>
+                    </v-datetime-picker>
+                </v-flex>
+            </v-layout>
         </v-container>
     </v-app>
 </template>
 
 <script>
   import moment from 'moment'
+  import '@fortawesome/fontawesome-free/css/all.css'
 
   export default {
     data () {

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
@@ -17,10 +17,14 @@
             <v-card-text style="padding: 0;">
                 <v-tabs fixed-tabs v-model="activeTab">
                     <v-tab key="calendar">
-                        <v-icon>event</v-icon>
+                        <slot name="dateIcon">
+                            <v-icon>event</v-icon>
+                        </slot>
                     </v-tab>
                     <v-tab key="timer" :disabled="!dateSelected">
-                        <v-icon>access_time</v-icon>
+                        <slot name="timeIcon">
+                            <v-icon>access_time</v-icon>
+                        </slot>
                     </v-tab>
                     <v-tab-item key="calendar">
                         <v-date-picker