Description

Pitaya-framework template component.

This documentation assumes you are at least slightly familiar with aurelia and its usage. If not, we highly suggest you take a look at its Quick Start section first to get a better understanding of the approaches that are presented it here.

Screenshot

Demo

MDC Design & API Documentation

• Material Design guidelines: Buttons
• MDC Button Demo
• MDC Button Documentation
• MDC Button Github Source

Installation

npm install @pitaya-components/master-component --save

Basic Usage

Import

You have a few options when importing a component into your layout:

Template

<template>
	<require from="@pitaya-components/master-component/dist/native-modules/master-component"></require>
    ...
</template>

View model

@viewResources( "@pitaya-components/master-component/dist/native-modules/master-component" )
export class MyView
{
	...
}

Global resources

export function configure( config: FrameworkConfiguration )
{
	config.globalResources( [
		PLATFORM.moduleName( "@pitaya-components/master-component/dist/native-modules/master-component" )
	] );
}

Initialization

Our components are usually initialized by defining them in your views HTML. And can be accessed afterwards in the corresponding view model.

Template

<template>
	<master-component
		view-model.ref="masterComponent"
		on-attached.call="_masterComponentHasBeenAttached(component)"
	></master-component>
	...
</template>

View model

import {MasterComponent} from "@pitaya-components/master-component";

export class MyView
{
	public component: MasterComponent;

	public doSomething()
	{
		this.component.title = "Bananarama";
	}
}

Variants

Simple component

Put different variants here

<master-component></master-component>

Event handlers

Attaching an event handler is as simple as adding on-<event>.call="<function>(<parameters>)". 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

<pitaya-button	
	on-click.call="myButtonHasBeenClicked(event)"
>
	BUTTON LABEL
</pitaya-button>

View model

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

<pitaya-button	
	on-click.call="myButtonHasBeenClicked('my custom message')"
>
	BUTTON LABEL
</pitaya-button>

View model

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

<master-component	
	title="Super duper template component"
></master-component>

View model

import {MasterComponent} from "@pitaya-components/master-component";

export class MyView
{
	public component: MasterComponent;
	
	public someMethod()
	{
		this.component.title    = "Super duper template component";
	}
}

Bindable properties

| 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 <void> \| void | Reinitializes the component

Style Customization

SASS mixins

| 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 |

Changes

The main repository uses tagged Releases to communicate changes between versions.

FAQ

Q: Why another JavaScript framework?
A: Read this article for a detailed overview of ours goals.

Reach Out!

Find us on Twitter for the latest news, and please consider giving us a ?? star on GitHub!

Support

For contributions in the form of bug fixes and changes, feel free to use Pull Requests or send us a DM on Twitter to discuss how best to approach your issue.

License

The Master component source code is licensed under the MIT license.