From 4c0eb360507e60e6789139511d22b08031e255db Mon Sep 17 00:00:00 2001
From: leecason <leecason0722@gmail.com>
Date: Fri, 29 May 2020 08:56:18 +0800
Subject: [PATCH] docs: detailed props and events

---
 README.md | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 91 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index de4f9f7..dea22e8 100644
--- a/README.md
+++ b/README.md
@@ -41,32 +41,120 @@ template:
   :is-show="isShow"
   type="underline"
 >
-  <span>This is a text</span>
+  <span>Rough Notation is awesome</span>
 </RoughNotation>
 ```
 
 ## Props
 
-Check [configuring-the-annotation](https://github.com/pshihn/rough-notation#configuring-the-annotation)
+### type
 
-**and**
+**Type**: `string`
+
+**required**: `true`
+
+This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:
+
+- **underline**: Create a sketchy underline below an element.
+- **box**: This style draws a box around the element.
+- **circle**: Draw a circle around the element.
+- **highlight**: Creates a highlight effect as if maked by a highlighter.
+- **strike-through**: This style draws a box around the element.
+- **crossed-off**: This style draws a box around the element.
 
 ### isShow
 
 **Type**: `boolean`
 
+**Required**: `false`
+
 **Default**: `false`
 
 Whether draws the annotation.
 
+### animate
+
+**Type**: `boolean`
+
+**Required**: `false`
+
+**Default**: `true`
+
+Turn on/off animation when annotating.
+
+### animationDuration
+
+**Type**: `number`
+
+**Required**: `false`
+
+**Default**: `800`
+
+Duration of the animation in milliseconds.
+
+### animationDelay
+
+**Type**: `number`
+
+**Required**: `false`
+
+**Default**: `0`
+
+Delay in animation in milliseconds.
+
+### color
+
+**Type**: `string`
+
+**Required**: `false`
+
+**Default**: `currentColor`
+
+Representing the color of the annotation sketch.
+
+### strokeWidth
+
+**Type**: `number`
+
+**Required**: `false`
+
+**Default**: `1`
+
+Width of the annotation strokes.
+
+### padding
+
+**Type**: `number`
+
+**Required**: `false`
+
+**Default**: `5`(in pixels)
+
+Padding between the element and roughly where the annotation is drawn.
+
 ### tag
 
 **Type**: `string`
 
+**Required**: `false`
+
 **Default**: `'div'`
 
 String HTML tag name (default: `div`); if falsy (for example `null` or `undefined`), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered
 
+## Events
+
+### init
+
+**Parameters**: [`Annotation Object`](https://github.com/pshihn/rough-notation#annotation-object)
+
+Called when the component is initialized.
+
+## TODO
+
+- [ ] Annotation Group
+- [ ] Demo pages
+
 ## License
 
 [MIT](https://github.com/Leecason/vue-rough-notation/blob/master/LICENSE)