Plbls Widgets Library

Plbls Widgets is a reusable component library for Angular/Ionic projects. It provides a variety of pre-built components that are simple, customizable, and designed for rapid development. All components use ViewEncapsulation.None by default, ensuring a seamless integration of styles into your projects.

Components Overview

1. plbls-button

A customizable button component that functions like a standard HTML button with additional styling capabilities.

Usage:

<plbls-button (click)="handleClick()">Click Me</plbls-button>

Inputs:

• Supports standard button inputs and outputs.

2. plbls-search-bar

A search bar component that includes a search input field, a button for search activation, and optional suggestions dropdown.

Usage:

<plbls-search-bar
  placeholder="Search..."
  [suggestions]="['Option 1', 'Option 2']"
  (inputChange)="onInputChange($event)"
  (searchClick)="onSearchClick()"
></plbls-search-bar>

Inputs:

• placeholder (string): The placeholder text for the search input.
• suggestions (string[]): List of suggestions to be displayed in the dropdown.

Outputs:

• inputChange: Emitted when the input value changes.
• searchClick: Emitted when the search button is clicked.

3. plbls-bottombar

A bottom navigation bar with configurable button positions. It supports flexible content projection for each button.

Usage:

<plbls-bottombar>
  <ion-icon name="home" button1></ion-icon>
  <i class="fas fa-search" button2></i>
  <img button3 src="assets/profile.png" alt="Profile">
  <span button4>😊</span>
</plbls-bottombar>

Inputs:

• Supports content projection via ng-content.

4. plbls-navbar

A top navigation bar with a logo, title, and configurable buttons or dropdowns. It includes a responsive burger menu for mobile devices.

Usage:

<plbls-navbar
  [logoSrc]="'assets/logo.png'"
  [title]="'My Application'"
  [links]="navbarLinks"
></plbls-navbar>

5. plbls-card

A card component that displays content like an image, title, description, and projected action buttons.

Usage:

<plbls-card 
  [imageSrc]="'assets/card-image.jpg'"
  [title]="'Card Title'"
  [description]="'Card description here.'"
>
  <button class="card-button">Action</button>
</plbls-card>

Inputs:

• imageSrc (string): The image URL for the card.
• title (string): Title text for the card.
• description (string): Description text for the card.

6. plbls-carousel

A carousel component for displaying multiple items (e.g., images or content) with sliding transitions. It supports both manual navigation and auto-sliding.

Usage:

<plbls-carousel [autoSlide]="true" [slideInterval]="5000">
  <img #carouselItem src="assets/slide1.jpg" alt="Slide 1">
  <img #carouselItem src="assets/slide2.jpg" alt="Slide 2">
</plbls-carousel>

Inputs:

• autoSlide (boolean): Whether the carousel should automatically slide.
• slideInterval (number): Time interval in milliseconds for auto-sliding.

Installation

1. Install the library:

npm install plbls-widgets

2. Import the components into your module:

import { PlblsButtonComponent, PlblsSearchBarComponent, PlblsBottomBarComponent } from 'plbls-widgets';

@NgModule({
  declarations: [
    // Your components
  ],
  imports: [
    PlblsButtonComponent,
    PlblsSearchBarComponent,
    PlblsBottomBarComponent,
    // Other imports
  ],
})
export class AppModule { }

License

This library is released under the MIT license.