Aurelia 1
Lynk works great with all modern app frameworks, including Aurelia, with full integration into the binding engine and component model.
Installation
To add LYNK to your Aurelia app, first authenticate to the Uplynk project package registry
npm config set -- //gitlab.edgecastcdn.net/api/v4/projects/6611/packages/npm/:_authToken=YOUR_ACCESS_TOKEN echo @uplynk:registry=https://gitlab.edgecastcdn.net/api/v4/projects/6611/packages/npm/ >> .npmrc
Then install just like any other npm package
npm i @uplynk/lynk-design pnpm install @uplynk/lynk-design
Next, open your src/main.ts
file and add the following code to import the
default theme set the default
icon library and register the component library.
import '@uplynk/lynk-design/dist/themes/dark.css'; import {registerIconLibrary} from '@uplynk/lynk-design/dist/utilities/icon-library'; registerIconLibrary('default', { resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/icons/${name}.svg`, }); aurelia.use .standardConfiguration() ... .plugin(PLATFORM.moduleName('@uplynk/lynk-design'))
That’s it! Now you can start using LYNK components in your app!
Usage
Binding Events with Aurelia
When binding to standard Aurelia events like click
, the trigger
binding command
seems to be more reliable than delegate
.
<lynk-button click.trigger="myListener()"></lynk-button>
To bind listeners to custom events emitted by LYNK components, use the same trigger binding command on the event emitted from the component.
<lynk-menu ev-select.trigger="myListener($event)"></lynk-menu>
Two-way Data Binding
Because Aurelia doesn’t recognize form controls within LYNK components, the bind
command will
only ever resolve to simple to-view
/ one-way
binding. To enable two-way binding
on LYNK components, you must use the two-way
binding attribute.
<!-- This doesn't work for form controls --> <lynk-input value.bind="myValue"> <!-- This works as expected --> <lynk-input value.two-way="myValue"></lynk-input ></lynk-input>