Description

Buttons communicate an action a user can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.

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

Installation

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

Basic Usage

Importing the component into your project

Aurelia App initialization

export function configure( aurelia )
{
	aurelia.use
		   .standardConfiguration()
		   .plugin( "@pitaya-components/button" )
		   .feature( "resources" );

	aurelia.start().then( () => aurelia.setRoot() );
}

Usage in HTML

Our components are build to use them in your views HTML. Furthermore they can be accessed afterwards in the corresponding view model.

Template

<template>
	<pi-button
		view-model.ref="button"
		on-click.call="buttonClickHandler()"
	>
		BUTTON LABEL
	</pi-button>
	...
</template>

View model

import {PiButton} from "@pitaya-components/button";

export class MyView
{
	public button: PiButton;

	public buttonClickHandler()
	{
		this.button.disabled = true;
	}
}

Variants

Simple component

Put different variants here

<pi-button>
	BUTTON LABEL
</pi-button>

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

<pi-button	
	on-click.call="buttonClickHandler(event, component)"
>
	BUTTON LABEL
</pi-button>

View model

export class MyView
{
	public buttonClickHandler(event: CustomEvent, component: PiButton)
	{
		console.log("Event detail:", event.detail);
	}
}

You also can pass any parameter you like. Specifying event or component just tells the component that you wish to receive a specific object in your handler via parameter, but if you define something else, it will be passed down to your function just like one would expect.

Template

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

View model

export class MyView
{
	public buttonClickHandler(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, but also programmatically.

Template

<pi-button	
	left-icon="favorite"
	type="submit"
	rounded
></pi-button>

View model

import {PiButton} from "@pitaya-components/button";

export class MyView
{
	public button: PiButton;
	
	public someMethod()
	{
		this.button.rounded = true;
	}
}

Bindable properties

| Attribute / Property | Type | --- | --- | name | string | left-icon | string | right-icon | string | variant | "raised" \| "unelevated" \| "outlined" | color-base | "primary" \| "secondary" | type | "submit" \| "reset" | disabled | boolean | density | 3 \| 2 \| 1 | rounded | boolean | on-click | ( component?: PiButton, event?: CustomEvent ) => void

Methods and properties

| Signature | Description | --- | --- | | name: string | Sets the HTML name attribute if the underlying button HTMLElement | leftIcon: string | Sets the left icon | rightIcon: string | Sets the right icon | variant: "raised" \| "unelevated" \| "outlined" | Switches between different possible variants | colorBase: "primary" \| "secondary" | Sets the basic color scheme | type: "submit" \| "reset" | Sets the HTML type attribute if the underlying button HTMLElement | disabled: boolean | Disables the component | density: 3 \| 2 \| 1 | Sets how slim the component should appear | rounded: boolean | Detetermines if the component should habe rounded corners | onClick: ( component?: PiButton, event?: CustomEvent ) => void | Listens for the "click" event

Style Customization

SASS mixins

With this component we are relying on the [PLACEHOLDER] component of MDC. Check out the documentation to learn how to use their SASS mixins.

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.