0
# Directives
1

2
Vue directives for adding interactive behaviors like ripple effects, tooltips, focus management, and keyboard filtering to enhance user experience and accessibility.
3

4
## Capabilities
5

6
### Ripple
7
Adds Material Design ripple effect to elements on user interaction.
8

9
```typescript { .api }
10
/**
11
 * Material Design ripple effect directive
12
 */
13
import Ripple from "primevue/ripple";
14

15
// Registration
16
app.directive('ripple', Ripple);
17

18
// Usage in template
19
// <Button v-ripple label="Click Me" />
20
```
21

22
### Tooltip
23
Displays contextual tooltips on hover, focus, or click events.
24

25
```typescript { .api }
26
/**
27
 * Tooltip directive for contextual information
28
 */
29
import Tooltip from "primevue/tooltip";
30

31
interface TooltipOptions {
32
  value?: string;
33
  fitContent?: boolean;
34
  hideOnEscape?: boolean;
35
  class?: string;
36
  style?: any;
37
  showDelay?: number;
38
  hideDelay?: number;
39
  life?: number;
40
  showOnDisabled?: boolean;
41
  appendTo?: string;
42
  escape?: boolean;
43
  autoZIndex?: boolean;
44
  baseZIndex?: number;
45
  id?: string;
46
}
47

48
// Registration
49
app.directive('tooltip', Tooltip);
50

51
// Usage in template
52
// <Button v-tooltip="'Save document'" icon="pi pi-save" />
53
// <Button v-tooltip.top="'Top tooltip'" label="Top" />
54
// <Button v-tooltip="{ value: 'Custom tooltip', showDelay: 1000 }" label="Custom" />
55
```
56

57
**Usage Example:**
58

59
```vue
60
<template>
61
  <!-- Simple tooltip -->
62
  <Button v-tooltip="'Click to save'" icon="pi pi-save" />
63
  
64
  <!-- Positioned tooltip -->
65
  <Button v-tooltip.bottom="'Bottom tooltip'" label="Hover me" />
66
  
67
  <!-- Advanced tooltip -->
68
  <Button 
69
    v-tooltip="{ 
70
      value: 'Custom styled tooltip', 
71
      class: 'custom-tooltip',
72
      showDelay: 500,
73
      hideDelay: 300
74
    }" 
75
    label="Advanced" 
76
  />
77
</template>
78
```
79

80
### BadgeDirective
81
Adds badge overlays to any element for notifications or status indicators.
82

83
```typescript { .api }
84
/**
85
 * Badge overlay directive
86
 */
87
import BadgeDirective from "primevue/badgedirective";
88

89
// Registration
90
app.directive('badge', BadgeDirective);
91

92
// Usage in template
93
// <Button v-badge="2" icon="pi pi-bell" />
94
// <Button v-badge.danger="'5+'" icon="pi pi-envelope" />
95
```
96

97
### FocusTrap
98
Manages focus within a container for accessibility and modal dialogs.
99

100
```typescript { .api }
101
/**
102
 * Focus trap directive for accessibility
103
 */
104
import FocusTrap from "primevue/focustrap";
105

106
interface FocusTrapOptions {
107
  disabled?: boolean;
108
  onMountAutoFocus?: boolean;
109
  onUnmountAutoFocus?: boolean;
110
}
111

112
// Registration
113
app.directive('focustrap', FocusTrap);
114

115
// Usage in template
116
// <div v-focustrap class="modal-content">
117
//   <input />
118
//   <button>Close</button>
119
// </div>
120
```
121

122
### KeyFilter
123
Filters keyboard input based on specified patterns for data validation.
124

125
```typescript { .api }
126
/**
127
 * Keyboard input filtering directive
128
 */
129
import KeyFilter from "primevue/keyfilter";
130

131
// Registration
132
app.directive('keyfilter', KeyFilter);
133

134
// Usage in template
135
// <InputText v-keyfilter="/[\d]/" placeholder="Numbers only" />
136
// <InputText v-keyfilter="'alpha'" placeholder="Alphabetic characters only" />
137
// <InputText v-keyfilter="'email'" placeholder="Email format" />
138
```
139

140
**Built-in Patterns:**
141
- `'alpha'` - Alphabetic characters
142
- `'alphanum'` - Alphanumeric characters  
143
- `'int'` - Integers
144
- `'num'` - Numbers with decimal
145
- `'money'` - Currency format
146
- `'email'` - Email format
147
- `'hex'` - Hexadecimal
148
- Custom RegExp patterns
149

150
### StyleClass
151
Manages CSS class manipulation based on element interactions and states.
152

153
```typescript { .api }
154
/**
155
 * Dynamic style class management directive
156
 */
157
import StyleClass from "primevue/styleclass";
158

159
interface StyleClassOptions {
160
  selector?: string;
161
  enterClass?: string;
162
  enterActiveClass?: string;
163
  enterToClass?: string;
164
  leaveClass?: string;
165
  leaveActiveClass?: string;
166
  leaveToClass?: string;
167
  hideOnOutsideClick?: boolean;
168
  toggleClass?: string;
169
}
170

171
// Registration
172
app.directive('styleclass', StyleClass);
173

174
// Usage in template
175
// <Button v-styleclass="{ 
176
//   selector: '.panel',
177
//   toggleClass: 'panel-visible'
178
// }" label="Toggle Panel" />
179
```
180

181
### AnimateOnScroll
182
Applies CSS animations when elements enter the viewport during scrolling.
183

184
```typescript { .api }
185
/**
186
 * Scroll-triggered animation directive
187
 */
188
import AnimateOnScroll from "primevue/animateonscroll";
189

190
interface AnimateOnScrollOptions {
191
  root?: Element;
192
  rootMargin?: string;
193
  threshold?: number | number[];
194
  enterClass?: string;
195
  leaveClass?: string;
196
}
197

198
// Registration
199
app.directive('animateonscroll', AnimateOnScroll);
200

201
// Usage in template
202
// <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }">
203
//   Content to animate
204
// </div>
205
```
206

207
**Usage Example:**
208

209
```vue
210
<template>
211
  <div class="content">
212
    <div 
213
      v-animateonscroll="{ 
214
        enterClass: 'animate__animated animate__fadeInUp',
215
        threshold: 0.5 
216
      }"
217
      class="card"
218
    >
219
      <h3>Animated Card</h3>
220
      <p>This card animates when scrolled into view</p>
221
    </div>
222
  </div>
223
</template>
224

225
<style>
226
.animate__animated {
227
  animation-duration: 1s;
228
  animation-fill-mode: both;
229
}
230

231
.animate__fadeInUp {
232
  animation-name: fadeInUp;
233
}
234

235
@keyframes fadeInUp {
236
  from {
237
    opacity: 0;
238
    transform: translate3d(0, 100%, 0);
239
  }
240
  to {
241
    opacity: 1;
242
    transform: translate3d(0, 0, 0);
243
  }
244
}
245
</style>
246
```
247

248
## Directive Registration
249

250
**Global Registration:**
251

252
```typescript
253
import { createApp } from 'vue';
254
import Ripple from 'primevue/ripple';
255
import Tooltip from 'primevue/tooltip';
256
import BadgeDirective from 'primevue/badgedirective';
257
import FocusTrap from 'primevue/focustrap';
258
import StyleClass from 'primevue/styleclass';
259
import AnimateOnScroll from 'primevue/animateonscroll';
260

261
const app = createApp(App);
262

263
app.directive('ripple', Ripple);
264
app.directive('tooltip', Tooltip);
265
app.directive('badge', BadgeDirective);
266
app.directive('focustrap', FocusTrap);
267
app.directive('styleclass', StyleClass);
268
app.directive('animateonscroll', AnimateOnScroll);
269
```
270

271
**Local Registration:**
272

273
```vue
274
<script setup>
275
import Ripple from 'primevue/ripple';
276
import Tooltip from 'primevue/tooltip';
277

278
const vRipple = Ripple;
279
const vTooltip = Tooltip;
280
</script>
281

282
<template>
283
  <Button v-ripple v-tooltip="'Click me'" label="Local Directives" />
284
</template>
285
```