Credi Components

Librería de componentes reutilizables con Angular Material 15 para proyectos Angular.

Instalación

npm install credi-components

Requisitos

• Angular 15.x
• Angular Material 15.x

Uso

1. Importar el módulo en tu aplicación

import { CrediComponentsModule } from "credi-components";

@NgModule({
  imports: [CrediComponentsModule],
})
export class AppModule {}

2. Usar los componentes

Button Component

<!-- Botón básico -->
button text="Click me" color="primary" (clicked)="onButtonClick()"> </ssa-button>

<!-- Botón con icono -->
button text="Save" icon="save" color="accent" (clicked)="onSave()"> </ssa-button>

<!-- Botón deshabilitado -->
button text="Disabled" [disabled]="true"> </ssa-button>

Propiedades:

• text: Texto del botón (string)
• color: Color del botón - 'primary' | 'accent' | 'warn' (ThemePalette)
• disabled: Estado deshabilitado (boolean)
• icon: Nombre del icono de Material Icons (string)
• type: Tipo de botón - 'button' | 'submit' | 'reset' (string)

Eventos:

• clicked: Evento emitido al hacer click

Card Component

<!-- Card básica -->
card title="Mi Card" subtitle="Subtítulo">
  <p>Contenido de la card</p>
  <div card-actions>
    button text="Action 1"></ssa-button>
    button text="Action 2" color="accent"></ssa-button>
  </div>
</ssa-card>

<!-- Card con imagen -->
card title="Card con imagen" imageUrl="https://example.com/image.jpg" [elevation]="4">
  <p>Contenido aquí</p>
</ssa-card>

Propiedades:

• title: Título de la card (string)
• subtitle: Subtítulo de la card (string)
• imageUrl: URL de la imagen (string)
• elevation: Nivel de elevación (number, default: 2)

Desarrollo

Construir la librería

ng build credi-components

Publicar en npm

cd dist/credi-components
npm publish

Licencia

MIT