Merge pull request #20 from shaozi/flex-direction-animation

Flex direction animation

README.md

@@ -1,9 +1,10 @@
-# Svelte steps component that is compatible to bootstrap
+# 🐾 Svelte steps component 🐾
 
 A customizable step component written in Svelte!
 
 - [x] Bootstrap color theme
 - [x] Icons
+- [x] Animate progress
 - [x] Horizontal and vertical
 - [x] Dumpbells and bar
 - [x] Custom size
@@ -23,7 +24,8 @@ npm install --saveDev svelte-steps
 
 ## Example Usages
 
-Clone this project and run it. Itself is an example. Take a look at the homepage [here](https://svelte-steps.web.app). And the source file is at [src/routes/index.svelte](src/routes/index.svelte)
+Clone this project and run it. Itself is an example. Take a look at the homepage [here](https://svelte-steps.web.app). 
+The source file of the demo is at [src/routes/index.svelte](src/routes/index.svelte)
 
 ### Basic Usage
 
@@ -81,7 +83,7 @@ let steps = [
 ### Custom Size
 
 ```javascript
-<Steps {steps} size="2em" line="2px"/>
+<Steps {steps} size="2rem" line="2px"/>
 ```
 
 ### No Text
@@ -146,7 +148,8 @@ It by default uses `--bs-primary`, `--bs-secondary`, `--bs-light`, and `--bs-dar
 - `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle)
 - `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"`
 - `vertical`: Vertical steps. Default `false`
-- `reverse`: For vertical steps only. Puts text to the left. Default `false`
+- `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false`
+- `clickable`: When set to `false`, Clicking icons and labels will not change step. You have to change `current` to change step. Default `true`
 
 ## Events
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-steps",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "A customizable step component written in Svelte",
   "repository": {
     "type": "git",