@pitaya-components/button

Pitaya-Framework Component Button.

Usage no npm install needed!

<script type="module">
  import pitayaComponentsButton from 'https://cdn.skypack.dev/@pitaya-components/button';
</script>

README

Button Component

npm npm NPM

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

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.