import StyleClass from 'primevue/styleclass';
app.directive('styleclass', StyleClass);
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/styleclass/styleclass.min.js"></script>
StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations.
ToggleClass
<Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" />
<InputText class="block mt-3" />
Enter/Leave Animation
<Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" />
<Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" />
<div class="box hidden">Content</div>
Target element is defined with the v-styleclass attribute that can either be a valid css query or one of the keywords below.
| Name | Description |
|---|---|
| @next | Next element. |
| @prev | Previous element. |
| @parent | Parent element. |
| @grandparent | Parent element of the parent. |
| Name | Type | Default | Description |
|---|---|---|---|
| selector | string | selector | Selector to define the target element. |
| enterClass | string | null | Class to add when item begins to get displayed. |
| enterActiveClass | string | null | Class to add during enter animation. |
| enterToClass | string | null | Class to add when enter animation is completed. |
| leaveClass | string | null | Class to add when item begins to get hidden. |
| leaveActiveClass | string | null | Class to add during leave animation |
| leaveToClass | string | null | Class to add when leave animation is completed. |
| hideOnOutsideClick | string | null | Whether to trigger leave animation when outside of the element is clicked. |
| toggleClass | string | null | Adds or removes a class when no enter-leave animation is required. |
Directive has no events.
None.