Pitaya-Framework Dialog Component.
npm install @pitaya-components/dialogbash
npm install @pitaya-components/master-component --save
`
Basic Usage
$3
You have a few options when importing a component into your layout:
##### Template
`html
...
`
##### View model
`ts
@viewResources( "@pitaya-components/master-component/dist/native-modules/master-component" )
export class MyView
{
...
}
`
##### Global resources
`ts
export function configure( config: FrameworkConfiguration )
{
config.globalResources( [
PLATFORM.moduleName( "@pitaya-components/master-component/dist/native-modules/master-component" )
] );
}
`
$3
Our components are usually initialized by defining them in your views HTML.
And can be accessed afterwards in the corresponding view model.
##### Template
`html
view-model.ref="masterComponent"
on-attached.call="_masterComponentHasBeenAttached(component)"
>
...
`
##### View model
`ts
import {MasterComponent} from "@pitaya-components/master-component";
export class MyView
{
public component: MasterComponent;
public doSomething()
{
this.component.title = "Bananarama";
}
}
`
Variants
$3
Put different variants here
`html
`
Event handlers
Attaching an event handler is as simple as adding on-.
The function that you specify has to be defined as a method on the view model class, so that aurelias template engine can use it.
##### Template
`html
on-click.call="myButtonHasBeenClicked(event)"
>
BUTTON LABEL
`
##### View model
`ts
export class MyView
{
public myButtonHasBeenClicked(event: CustomEvent)
{
console.log("Event detail:", event.detail);
}
}
`
You also can pass any parameter you like.
Specifying event just tells the component that you wish to receive the event object, but if you define something else, it will be passed down to your function just like one would expect.
##### Template
`html
on-click.call="myButtonHasBeenClicked('my custom message')"
>
BUTTON LABEL
`
##### View model
`ts
export class MyView
{
public myButtonHasBeenClicked(message: string)
{
console.log(message);
}
}
`
Bindables
A bindable is part of a core functionality of aurelia which basically allows you to configure a component from within your HTML code.
They can be set/accessed via HTML attribute and also programmatically.
##### Template
`html
title="Super duper template component"
>
`
##### View model
`ts
import {MasterComponent} from "@pitaya-components/master-component";
export class MyView
{
public component: MasterComponent;
public someMethod()
{
this.component.title = "Super duper template component";
}
}
`
$3
| Attribute / Property | Type
| --- | --- |
| title | string
| on-attached | ( component ) => {}
Methods and properties
| Method Signature | Description
| --- | --- |
| title: string | Sets the title
| onAttached: Function | Sets the onAttached callback
| reinitialize() => Promise | Reinitializes the component
Style Customization
$3
| Mixin | Desciption
| --- | --- |
| master-component-background | Sets the background color
With this component we are relying on the [PLACEHOLDER] component of MDC.
Check out the documentation to learn how to use their SASS mixins.
Dependencies
| Package | Url |
| --- | --- |
| aurelia-framework | aurelia-framework |
| Aurelia-typed-observable-plugin` | Aurelia-typed-observable-plugin |