Intégration

Documentation

Pour simplifier le travail des développeurs Aurelia, nous mettons donc à disposition des plugins spécifiques.

Composants Aurelia

Ces composants permettent d'installer les pré-requis client

Installation

install.sh

# Plugin aria
npm install --save @blackcube/aurelia2-aria

# Plugin transition
npm install --save @blackcube/aurelia2-transition

# Plugin tailwind
npm install --save @blackcube/aurelia2-tailwind

# Plugin powshield
npm install --save @blackcube/aurelia2-powshield

# Plugin recaptcha
npm install --save @blackcube/aurelia2-recaptcha

# Plugin webauthn
npm install --save @blackcube/aurelia2-webauthn

Plugin Aria

Utilisation du plugin aria

Installation

startup.ts

import Aurelia, { ConsoleSink, LoggerConfiguration, LogLevel} from 'aurelia';
import { AriaConfiguration } from "@blackcube/aurelia2-aria";
import { MyApp } from './my-app';
Aurelia
    .register(AriaConfiguration)
    .register(LoggerConfiguration.create({
        level: LogLevel.trace,
        colorOptions: 'colors',
        sinks: [ConsoleSink]
    }))
    .app(MyApp)
    .start();

Plugin Transition

Utilisation du plugin transition

Installation

startup.ts

import Aurelia, { ConsoleSink, LoggerConfiguration, LogLevel} from 'aurelia';
import { TransitionConfiguration } from "@blackcube/aurelia2-transition";
import { MyApp } from './my-app';
Aurelia
    .register(TransitionConfiguration)
    .register(LoggerConfiguration.create({
        level: LogLevel.trace,
        colorOptions: 'colors',
        sinks: [ConsoleSink]
    }))
    .app(MyApp)
    .start();

Utilisation en mode attribut

transition.css

.box {
    height: 50px;
    width: 50px;
    background-color: #1ce;
}
.box.from {
    transform: translateX(0);
}
.box.to {
    transform: translateX(400px);
}
.box.transition {
    transition: transform 1s linear;
    transition-timing-function: ease-in-out;
}

transition.html

<!-- Utilisation de l'attribut bc-transition -->
<div 
    id="myElement" 
    class="box" 
    bc-transition="test" 
    data-transition-from="from" 
    data-transition-to="to"
    data-transition-transition="transition"
>
    my box
</div>

running.ts

    import { ITransitionRun, TransitionChannels, TransitionModes } from '@blackcube/aurelia2-transition';
    const runTransition: ITransitionRun = {
        name: 'test',
        run : TransitionModes.enter
    }
    this.ea.publish(TransitionChannels.main, runTransition);

Utilisation en mode service

service.ts

    import { ITransitionService, ITransition, ITransitionRun, TransitionChannels, TransitionModes } from '@blackcube/aurelia2-transition';
    // transitionService is injected
    const transition: ITransition = {
        from: 'from',
        to: 'to',
        transition: 'transition'
    }
    const element = document.getElementById('myElement') as HTMLElement;
    this.transitionService.enter(element, transition);

Ou alors en utilisant le markup data-transition-* pour spécifier la transition

    import { ITransitionService, ITransition, ITransitionRun, TransitionChannels, TransitionModes } from '@blackcube/aurelia2-transition';
    // transitionService is injected
    const element = document.getElementById('myElement') as HTMLElement;
    this.transitionService.enter(element);