CustomButton
CustomButton is a very simple button component that you can customize for your needs
How to install
Via npm
npm install yogawa-custom-button
Via yarn
yarn add yogawa-custom-button
How to use
Import the module
import { CustomButtonModule } from 'yogawa-custom-button';
@NgModule({
...
imports: [
CustomButtonModule
],
...
})Create configuration object of CustomButtonConfig type
import { CustomButtonConfig } from 'yogawa-custom-button';
config: CustomButtonConfig = {
theme: 'black',
label: 'Click me',
title: 'Sample button',
disabled: false,
size: 'lg',
showTooltip: true,
tooltipText: "Please click me",
tabIndex: 0,
borderRadius: '1rem',
}
onClick($event: Event) {
console.log($event);
alert("Hello world");
}Use it ion your template
<custom-button [config]="config" (onClick)="onClick($event)"></custom-button>Parameters
| parameter | type | required? | default | example | remark |
|---|---|---|---|---|---|
| label | string | yes | 'Click me' | ||
| title | string | no | 'Sample button' | ||
| disabled | boolean | no | false | true | |
| size | 'sm' | 'lg' | 'responsive' | no | 'lg' | ||
| showTooltip | boolean | no | false | true | |
| tooltipText | string | no | 'Please click me' | ||
| tabIndex | number | no | 1 | ||
| theme | 'red' | 'green' | 'blue' | 'yellow' | 'black' | no | 'black' |