illyria-ui-button

Button

The ui-button component provides a customizable button element with various styles and sizes. It supports different button types such as basic, raised, stroked, flat, icon, FAB (Floating Action Button), mini FAB, extended FAB, button toggle, toggle, disabled, and link. You can also customize the button size (small, medium, or large) and the color (primary, accent, or warn).

Features

• Display customizable notification bars with various styles when you click the button (success, error, warning, info)
• Set the position, duration, and action button for the notification bars
• Handle events such as onShow, onClose, and onInteract
• Easy integration into your Angular projects

Table of Contents

• Installation
• Usage
• Button Variants
• Customization
• Styling
• Contributing
• License

Installation

To use this custom button component library in your Angular project, follow these steps:

1. Install the library via npm or yarn:

   npm install illyria-ui-button
   # or
   yarn add illyria-ui-button

Import the ButtonModule into your Angular module:

import {NgModule} from '@angular/core';
import {ButtonModule} from 'illyria-ui-button';

@NgModule({
  declarations: [/* Your components */],
  imports: [ButtonModule],
  /* ... other module configurations ... */
})
export class YourModule {
}

Use the component in your templates:

<ui-button uiBtn="mat-raised-button">Raised Button</ui-button>
<ui-button uiBtn="mat-stroked-button">Stroked Button</ui-button>
<!-- Add more buttons with different variants as needed -->

Usage

Button Variants

The library provides the following button variants:

• mat-button: Rectangular text button with no elevation.
• mat-raised-button: Rectangular contained button with elevation.
• mat-stroked-button: Rectangular outlined button with no elevation.
• mat-flat-button: Rectangular contained button with no elevation.
• mat-icon-button: Circular button with a transparent background, meant to contain an icon.
• mat-fab: Circular button with elevation, defaults to the theme's accent color.
• mat-mini-fab: Same as mat-fab but smaller.

You can customize the button variants by setting the uiBtn input property to the desired variant name.

Customization

The library is highly customizable, and you can extend it to meet your specific design needs. You can modify the HTML templates and SCSS styles of each button component (<ui-button>, <ui-raised-button>, etc.) to match your design requirements.

Styling

You can apply custom styles to your buttons by modifying the SCSS styles in your project. The library provides a basic set of styles to get you started, but you can adjust colors, dimensions, and other styles to match your project's design guidelines.

Contributing

We welcome contributions from the community! If you have suggestions, bug reports, or would like to contribute code, please open an issue or create a pull request on the GitHub repository.

License

This project is licensed under the MIT License.

Feel free to copy and paste this Markdown text into your README.md file, and you can further enhance it with additional details or formatting as needed.