From a937dffe1accce474519f467c3807aaf06ef73b1 Mon Sep 17 00:00:00 2001
From: Cristi Jora <joracristi@gmail.com>
Date: Mon, 31 Jul 2017 22:41:54 +0300
Subject: [PATCH] Update README.md

---
 docs/README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/README.md b/docs/README.md
index fd95fb4..3436d2b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -46,6 +46,47 @@ components: {
    </tab-content>
 </form-wizard>
 ```
+
+## Scoped slots
+Form-wizard exposes 2 scoped slots which can be used to customize some parts of the wizard. Usage example and implementation details are presented in [0.6.2 release](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.2)
+
+### Footer slot
+Has the buttons (back, next, finish) as default. When using this slot, those buttons are replaced with the content of your slot. You can achieve the same default functionallity and event tweak it with the help of the exposed methods/properties from `props`
+One potential usage can be that you want to have a different button when completing the wizard. Maybe you want to position it in the center, give it a different color and click event
+```html
+<template slot="footer" scope="props">
+       <div class=wizard-footer-left>
+           <wizard-button  v-if="props.activeTabIndex > 0 && !props.isLastStep" :style="props.fillButtonStyle">Previous</wizard-button>
+        </div>
+        <div class="wizard-footer-right">
+          <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
+          
+          <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">  {{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
+        </div>
+</template>
+```
+This is just one example. You can add more buttons, hide or display conditionally based on the exposed properties.
+Working fiddle for the [example above](https://jsfiddle.net/bt5dhqtf/717/)
+
+#### Exposed props for `footer` slot:
+- nextTab // will go to the next tab/step when called 
+- prevTab //will got to the prev tab/step when called
+- activeTabIndex // current active tab index 
+- isLastStep // boolean to tell whether it's the last step or not
+- fillButtonStyle // object with styles for wizard-buttons (contains background and color passed through wizard props)
+
+### Step slot
+This slot can be used to disable the click event on the step or to customize the UI of each step
+One possible usage:
+```html
+<template slot="step" scope="props">
+        <wizard-step :tab="props.tab"
+        :transition="props.transition"
+        :index="props.index">
+        </wizard-step>
+</template>
+```
+[Fiddle example](https://jsfiddle.net/bt5dhqtf/705/) You can notice that steps are not longer clickable.
 # Demos
 Basic [demo](https://jsfiddle.net/bt5dhqtf/97/)
 
@@ -61,6 +102,7 @@ Other demos:
 * [Element UI form integration](https://jsfiddle.net/bt5dhqtf/409/)
 * [Vue router integration](https://jsfiddle.net/bt5dhqtf/267/) You can place a `router-view` inside the wizard and have a separate page per tab. A `route` prop must be passed to the tabs you want to handle certain tabs
 * [Async validation with error message](https://jsfiddle.net/CristiJ/bt5dhqtf/298/) `before-change` prop can accept a promise that is resolved with `true` which will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet)
+* [Customized buttons with scoped slot](https://jsfiddle.net/bt5dhqtf/717/)
 
 # Playground