button
button is a component which provides basic button appearance.
Requirements
- Install the component to your project
npm install @vendasta/fec-button [--save]
- Next, you will need to import your button in whatever module you wish to use it in:
import { ButtonComponent } from '@vendasta/fec-button/button.component';
...
@NgModule({
...
declarations: [ ButtonComponent ]
})
Usage
The above will provide the bare minimum to reach compilation. To use the button, we must then include the va-btn tag (with some of it's optional css selectors, ex. va-btn-primary).
import {Component} from "@angular/core";
@Component({
...
template: `
<va-btn va-btn-primary>Submit</va-btn>
`
})
...
Events
To include an event, you can use the Angular2 (click) event:
<va-btn va-btn-primary (click)="onClick($event)">Submit</va-btn>
And within the class of whatever component you are using, you can include the function which is called by the click event:
class usingVaButton {
onClick(event) {
// doSomething
}
}
Types of Actions
The type modifiers change how the button looks to indicate the kind of action that will be taken:
<va-btn va-btn-primary>Primary</va-btn>
<va-btn va-btn-secondary>Secondary</va-btn>
<va-btn va-btn-positive>Positive</va-btn>
<va-btn va-btn-negative>Negative</va-btn>
Elevation
The va-btn-raised class can be used to give the button a level of elevation above the page. Once the button is pressed, it moves down subtly to indicate user interaction.
<va-btn va-btn-primary va-btn-raised>Primary</va-btn>
<va-btn va-btn-secondary va-btn-raised>Secondary</va-btn>
<va-btn va-btn-positive va-btn-raised>Positive</va-btn>
<va-btn va-btn-negative va-btn-raised>Negative</va-btn>
Sizes
The size modifiers allow control over how small or large the buttons appear:
<va-btn va-btn-primary va-btn-small>Small</va-btn>
<va-btn va-btn-primary>Regular</va-btn>
<va-btn va-btn-primary va-btn-large>Large</va-btn>
<va-btn va-btn-primary va-btn-cta>Call to Action</va-btn>
Miscellaneous States
Buttons can also be modified to display a loading or disabled state:
<va-btn va-btn-primary va-btn-loading></va-btn>
<va-btn va-btn-secondary va-btn-disabled>Disabled</va-btn>
More commonly, you will be adding the va-btn-loading conditionally:
<va-btn va-btn-primary [attr.va-btn-loading]="someVariable" (click)="someToggleFunction()"></va-btn>
You can then toggle the loading button within the class using the a variable:
someVariable:boolean;
someToggleFunction() {
if(this.someVariable) {
this.someVariable = null;
}
else {
this.someVariable = true;
}
}
It's important to note that [attr.some-attr] operates on true and null, not true and false.