StickyNavbarComponent

Navbar con efecto sticky, responsive, creada con bootstrap 5.

Este componente está diseñado para trabajar con Bootstrap 5. Asegúrate de tener Bootstrap 5 instalado y configurado en tu aplicación.

Instalación

npm install @rpenya/sticky-navbar-component

npm install bootstrap@5 

Uso

1. Añade el CSS de Bootstrap a los estilos globales de tu aplicación. Si estás usando SCSS, puedes hacerlo importando Bootstrap en tu archivo styles.scss principal:

@import '~bootstrap/scss/bootstrap.scss';

Alternativamente, si prefieres utilizar el CSS compilado, añade la ruta al archivo en el array de styles de tu angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  // ... otros estilos
]

2. Scripts Bootstrap:

Algunos componentes de Bootstrap requieren JavaScript para su correcto funcionamiento. Añade los scripts de Bootstrap a tu proyecto agregándolos al array de scripts en tu archivo angular.json:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

3. Añade el módulo del componente StickyNavbar a los imports de tu módulo Angular:

import {StickyNavbarModule } from '@rpenya/sticky-navbar-component';

@NgModule({
  imports: [
    // ... otros módulos,
   StickyNavbarModule
  ],
  // ...
})
export class AppModule { }

4. Utiliza el componente en tu plantilla:

<app-sticky-navbar
   [imageSrc]="'path/to/your/image.jpg'" 
   [title]="'Título de la Tarjeta'" 
   [description]="'Esta es la descripción de nuestra tarjeta.'">
</app-sticky-navbar> 

Propiedades

• imageSrc: Ruta o URL de la imagen que se quiere mostrar.
• title: Título de la tarjeta.
• description: Descripción o contenido adicional para la tarjeta.

Contribución

Si deseas contribuir, por favor crea un pull request.