diff --git a/docs/src/examples/angular/index.ts b/docs/src/examples/angular/index.ts index 99445e1..8f973db 100644 --- a/docs/src/examples/angular/index.ts +++ b/docs/src/examples/angular/index.ts @@ -1,44 +1,35 @@ const angularDirectiveMain = { - angular: { - ext: "angular", - language: "jsx", - example: `import { NgModule } from '@angular/core'; -import { AutoAnimateModule } from '@formkit/auto-animate/angular' - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AutoAnimateModule], - bootstrap: [AppComponent], -}) -export class AppModule {} -`, - }, -} - -const angularDirectiveApp = { angular: { ext: "angular", language: "jsx", example: `import { Component } from '@angular/core'; +import { AutoAnimateDirective } from '@formkit/auto-animate/angular'; @Component({ selector: 'app-root', + standalone: true, + imports: [AutoAnimateDirective], template: \` -
-
-

{{ story.title }}

-
{{ story.story }}
- + @for (story of stories; track story.title) { +
+
+

{{ story.title }}

+ @if (story.showStory) { +
{{ story.story }}
+ } + +
-
- \` + } + \`, }) export class AppComponent { - stories = [ + readonly stories = [ {title: 'The Ant and The Grasshopper', showStory: false, story: "The ant and the grasshopper were good friends..."}, {title: 'The Boy Who Cried Wolf', showStory: false, story: "There was once a shepherd boy who liked to play tricks..."}, ]; -}`, +} +`, }, } -export { angularDirectiveMain, angularDirectiveApp } +export { angularDirectiveMain } diff --git a/docs/src/sections/SectionUsage.vue b/docs/src/sections/SectionUsage.vue index 912e8ac..0b68c00 100644 --- a/docs/src/sections/SectionUsage.vue +++ b/docs/src/sections/SectionUsage.vue @@ -8,7 +8,7 @@ import { vueDirectiveApp, vueComposable, } from "../examples/vue" -import { angularDirectiveMain, angularDirectiveApp } from "../examples/angular" +import { angularDirectiveMain } from "../examples/angular" import { solidPrimitive, solidDirective } from "../examples/solid" import reactHook from "../examples/react" import preactHook from "../examples/preact" @@ -160,14 +160,16 @@ import IconQwik from "../components/IconQwik.vue"

Vue directive

Vue users can globally register the - v-auto-animate directive or install the Nuxt module. This makes adding transitions and - animations as easy as applying an attribute. Import the Vue plugin from - @formkit/auto-animate/vue and register it with your Vue app: + v-auto-animate directive or install the Nuxt module. This + makes adding transitions and animations as easy as applying an attribute. + Import the Vue plugin from @formkit/auto-animate/vue and + register it with your Vue app:

If you prefer to not register the Vue directive globally, you can import - it directly into the component where you want to use it import { vAutoAnimate } from '@formkit/auto-animate'. + it directly into the component where you want to use it + import { vAutoAnimate } from '@formkit/auto-animate'.

Once you’ve registered the plugin, it can be applied anywhere in your @@ -194,8 +196,8 @@ import IconQwik from "../components/IconQwik.vue"

Import the composable from @formkit/auto-animate/vue (the - Nuxt module will automatically import useAutoAnimate for you), and - call it in script setup to create a + Nuxt module will automatically import useAutoAnimate for + you), and call it in script setup to create a Angular directive

- Angular users can globally register the - auto-animate directive. This makes adding transitions and - animations as easy as applying an attribute. Import the AutoAnimateModule - from @formkit/auto-animate/angular and register it with your - Angular app: + Import AutoAnimateDirective from + @formkit/auto-animate/angular into a module or a standalone + component to easily add transitions and animations by applying the + auto-animate attribute to the parent element in your + template:

-

- Once you’ve registered the plugin, it can be applied anywhere in your - application by adding the auto-animate directive to the - parent element: -

- Angular users can pass options by directly setting the options input <ul auto-animate [options]="{ duration: 100 }"> + + In Angular versions <16 you can only import + AutoAnimateModule in NgModules. And you have to + use auto-animate v0.8.2 or earlier. Angular v16 isn't directly supported, + but you can easily write a wrapper. +