Skip to content
This repository was archived by the owner on Dec 26, 2018. It is now read-only.

Commit 15241fd

Browse files
committed
finished documentation for enabled prop.
1 parent d3062a0 commit 15241fd

File tree

1 file changed

+36
-9
lines changed

1 file changed

+36
-9
lines changed

README.md

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ vue-touch supports all Hammer Events ot of the box, just bind a listener to the
5757

5858
### Component Props
5959

60+
61+
#### Event Option Props
62+
6063
You can use the matching `*-options` props to pass Hammer options such as `direction` and `threshold`:
6164

6265
``` html
@@ -78,7 +81,7 @@ There's one prop per `Recognizer` available.
7881

7982
See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available options for events.
8083

81-
#### Directions
84+
**About Directions:**
8285

8386
In the above example, not that we used `direction: 'horizontal'`. Hammer's directions interface is a little ugly (Hammer['DIRECTION_HORIZONTAL']).
8487

@@ -88,16 +91,40 @@ VueTouch keeps that from you and accepts simple strings as directions:
8891
const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']
8992
```
9093

91-
## Public Component Methods
94+
#### The 'enabled' Prop
95+
96+
|Prop|allowed Values|
97+
|----|--------------|
98+
|enabled| Boolean or Object (see below)|
99+
100+
You can enable and disable all or some of the event recognizers via the `enabled` prop:
101+
102+
```
103+
<v-touch
104+
<!-- enable all recognizers -->
105+
v-bind:enabled="true"
106+
107+
<!-- disable all recognizers -->
108+
v-bind:enabled="true"
109+
110+
<!-- pass an object to enable and disable recognizers individually -->
111+
v-bind:enabled="{ pinch: true, rotate: false }"
112+
113+
></v-touch>
114+
```
115+
116+
117+
### Public Component Methods
92118

93-
The component exposes a few convenience methods to enable and disable Recognizers:
119+
The component exposes a few convenience methods to enable and disable Recognizers, and check if a recognizer is enabled:
94120

95121
|Method|Explanation|
96122
|------|-----------|
97-
|`disable(event)`|disable the Recognizer for `event`|
98-
|`enable(event)`|disable the Recognizer for `event`|
99-
|`disableAll`|disable all Recognizers|
100-
|`enableAll`|enable all Recognizers|
123+
|`disable(event)`|disable event's recognizer|
124+
|`enable(event)`|disable event's recognizer|
125+
|`toggle(event)`|Toogle the 'enable' state of event's recognizer|
126+
|`disableAll()`|disable all Recognizers|
127+
|`enableAll()`|enable all Recognizers|
101128
|`isEnabled(event)`|returns `true` if Recognizer for `event` is currently enabled|
102129

103130
```html
@@ -168,9 +195,9 @@ alias: {
168195
}
169196
```
170197

171-
Once is issue has been resolved HammerJS, this alias is no longer nessessary and can be removed.
198+
Once this issue has been resolved HammerJS, this alias is no longer nessessary and can be removed.
172199

173-
The `<v-touch>` component itself will never try to setup any Hamer Manangers or Recognizers if it detects that it is running in an SSR environment (seeVue.js API docs for [vm.$isServer](https://vuejs.org/v2/api/#vm-isServer)), so this will not lead to any errors. `<v-touch>` will only render a normal `<div>` element (or whatever element you defined with the `tag` prop).
200+
The `<v-touch>` component itself will never try to setup any Hamer Manangers or Recognizers if it detects that it is running in an SSR environment (seeVue.js API docs for [vm.$isServer](https://vuejs.org/v2/api/#vm-isServer)). The component will only render a normal `<div>` element (or whatever element you defined with the `tag` prop).
174201

175202
## Known Limitations & Bugs
176203

0 commit comments

Comments
 (0)