feat: add routing for componentes-test and create reusable button component
- Implemented lazy loading for the componentes-test feature module. - Created a redirect route to componentes-test as the default path. - Added a new ReutilizablesTestPageComponent to showcase reusable components. - Developed a reusable ButtonComponent with various styles and states. - Updated global styles to include Bootstrap. - Added SCSS styles for the new components and pages.
This commit is contained in:
34
src/app/shared/components/button/button.component.ts
Normal file
34
src/app/shared/components/button/button.component.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
||||
import { NgClass } from '@angular/common';
|
||||
|
||||
export type ButtonVariant =
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'danger'
|
||||
| 'danger-secondary'
|
||||
| 'cancel';
|
||||
|
||||
@Component({
|
||||
selector: 'app-button',
|
||||
imports: [NgClass],
|
||||
templateUrl: './button.component.html',
|
||||
styleUrl: './button.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ButtonComponent {
|
||||
readonly variant = input<ButtonVariant>('primary');
|
||||
readonly type = input<'button' | 'submit' | 'reset'>('button');
|
||||
readonly disabled = input(false);
|
||||
|
||||
protected readonly buttonClasses = computed(() => {
|
||||
const variants: Record<ButtonVariant, string> = {
|
||||
primary: 'btn-primary',
|
||||
secondary: 'btn-outline-primary',
|
||||
danger: 'btn-danger',
|
||||
'danger-secondary': 'btn-outline-danger',
|
||||
cancel: 'btn-secondary'
|
||||
};
|
||||
|
||||
return ['btn', variants[this.variant()]];
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user