Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bugMaker-237/ngx-tw


https://github.com/bugMaker-237/ngx-tw

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

          
# ngx-tw



A comprehensive Angular component library built with Tailwind CSS, providing a modern and customizable set of UI components for Angular applications.



## 📦 Installation



```bash

npm install ngx-tw

```



## 🚀 Quick Start



1. Import the tailwind component in your Angular component:



```typescript

import { TwButton } from "ngx-tw";



@NgModule({

  imports: [TwButton],

  // ...

})

export class AppComponent {}

```



2. Import the default styles in your `styles.scss`:



```scss

@import "ngx-tw/default";

```



## 🎨 Components



### 🔔 Alerts



Interactive notification components for displaying important messages to users.



```html



```



**Features:**



- Multiple alert types: `info`, `error`, `warning`

- Customizable duration and actions

- Icon support with custom colors

- Primary and secondary action buttons



**Service Usage:**



```typescript

import { AlertService } from 'ngx-tw';



constructor(private alertService: AlertService) {}



showAlert() {

  this.alertService.show({

    title: 'Success!',

    description: 'Operation completed successfully',

    type: 'info',

    duration: 3000

  });

}

```



### 🔤 Autocomplete



Smart input component with search and suggestion capabilities.



```html

 

```



**Features:**



- Dynamic filtering and searching

- Keyboard navigation support

- Custom option templates

- Async data loading



### 🎯 Button



Versatile button component with multiple styles and configurations.



```html

 Click me 

```



**Properties:**



- `type`: `'basic' | 'primary' | 'secondary'`

- `color`: Color theme variants

- `rounded`: Border radius options

- `disabled`: Boolean state

- `isSubmit`: Form submission type



### 🎯 Button Icon



Icon-only button for compact interfaces.



```html

 

```



### 🎯 Button Group



Grouped button controls for related actions.



```html



  

  



```



### 📅 Calendar



Full-featured calendar component with date selection and range support.



```html

 

```



**Features:**



- Single date selection

- Date range selection

- Min/max date constraints

- Multiple view modes (days, months, years)

- Keyboard navigation

- Today highlighting



### 🏷️ Chip



Tag-like components for displaying categories, filters, or selections.



```html



  JavaScript

  Angular



```



**Features:**



- Editable chip lists

- Custom separators

- Icon support

- Color theming

- Dynamic chip creation



### 📅 Date Picker



Specialized date range picker component.



```html

 

```



### 💬 Dialog



Modal dialog service for displaying overlays and confirmations.



```typescript

import { DialogService } from 'ngx-tw';



constructor(private dialog: DialogService) {}



openDialog() {

  this.dialog.open(MyDialogComponent, {

    width: '400px',

    data: { message: 'Hello World' }

  });

}

```



### 🔽 Expander



Accordion-style expandable content sections.



```html



  Section Title

  

    
Expandable content goes here


  



```



**Grouped Expanders:**



```html



  

    Item 1

    Content 1

  

  

    Item 2

    Content 2

  



```



### 🎨 Icon



SVG icon component with dynamic loading and caching.



```html

 

```



**Features:**



- SVG icon support

- Icon registry and caching

- Heroicons integration

- Custom size control

- Dynamic icon loading



### 📝 Input Field



Comprehensive form input component with validation and styling.



```html

 

```



**Features:**



- Multiple input types

- Prefix/suffix icons

- Validation support

- Multiline textarea mode

- Form control integration

- Error display



### 📝 Masked Input



Specialized input with formatting masks.



```html

 

```



### 🍽️ Menu



Dropdown menu component with nested support.



```html



  Action 1

  Action 2 →

  Action 3



  Submenu Item 1

  Submenu Item 2



```



**Directives:**



- `twMenuTrigger`: Trigger for opening menus

- `twMenuItem`: Menu item directive



### 📋 Select



Advanced select dropdown with search and custom options.



```html



  

  



  Option 1

  Option 2

  Option 3



```



**Features:**



- Searchable options

- Keyboard navigation

- Custom option indicators

- Multi-selection support

- Async option loading



### 💀 Skeleton



Loading placeholder components for better UX.



```html



```



**Directive Usage:**



```html



  
Content that will be replaced with skeleton when loading




```



### ⏳ Spinner



Loading spinner for indicating async operations.



```html



```



### 📌 Sticky Content Header



Header component that sticks to the top during scroll.



```html



  
Section Title



```



### 🔄 Switch



Toggle switch component for boolean inputs.



```html

 

```



### 📑 Tab



Tab navigation component for organizing content.



```html



  

    
Content for tab 1


  

  

    
Content for tab 2


  



```



### 📊 Table



Advanced data table with sorting, pagination, and customization.



```html



  

    Name

    {{ row.name }}

  



  

    Email

    {{ row.email }}

  



```



**Features:**



- Column definitions

- Sorting and filtering

- Pagination

- Custom cell templates

- Row selection



### 🛠️ Toolbar



Application toolbar with actions and navigation.



```html



  

  



```



### 🖱️ Drag & Drop



Comprehensive drag and drop functionality.



```html



  


    
{{ item }}


  



  


    
{{ item }}


  




```



**Directives:**



- `twDrag`: Makes elements draggable

- `twDropList`: Drop zone container

- `twDropListGroup`: Groups multiple drop lists

- `twDragPlaceholder`: Custom placeholder during drag

- `twDragPreview`: Custom drag preview



**Utilities:**



- `moveItemInArray()`: Reorder items within array

- `transferArrayItem()`: Move items between arrays



## 🎨 Theming



The library supports multiple color themes:



- `primary` - Primary brand color

- `accent` - Secondary accent color

- `danger` - Error/warning states

- Custom color configurations



Most components accept a `color` input to apply the desired theme.



## 🌙 Dark Mode



ngx-tw includes built-in dark mode support using Tailwind's dark mode utilities. Components automatically adapt to dark mode when the `dark` class is applied to a parent element.



## 📱 Responsive Design



All components are built with responsive design principles and work seamlessly across different screen sizes using Tailwind's responsive utilities.



## ♿ Accessibility



Components follow WCAG guidelines and include:



- Proper ARIA attributes

- Keyboard navigation support

- Screen reader compatibility

- Focus management

- High contrast support



## 🔧 Customization



### Custom Styles



Override component styles using Tailwind classes:



```html

Custom Button

```



### Component Configuration



Many components accept configuration objects for advanced customization:



```typescript

// Example: Custom chip transformer



```



## 📋 Requirements



- Angular 16+

- Tailwind CSS 3.0+

- Angular CDK 16+



## 🚀 Release & Publishing



This package is automatically published to NPM when changes are merged into the `master` branch. The CI/CD pipeline handles:



- **Automated Testing** - Runs all tests to ensure code quality

- **Version Bumping** - Automatically increments package version based on conventional commits

- **Build Process** - Compiles the library for distribution

- **NPM Publishing** - Publishes the new version to the NPM registry

- **Release Notes** - Generates changelog and release notes



### Conventional Commits



To ensure proper versioning, please use conventional commit messages:



```bash

feat: add new component feature       # Minor version bump

fix: resolve component bug           # Patch version bump

feat!: breaking change              # Major version bump

docs: update documentation          # No version bump

```



### Version Strategy



- **Patch** (1.0.X) - Bug fixes and small improvements

- **Minor** (1.X.0) - New features and components

- **Major** (X.0.0) - Breaking changes and major updates



## 🤝 Contributing



We welcome contributions! Please read our [Contributing Guidelines](CONTRIBUTING.md) for details on:



- How to submit pull requests

- Coding standards and conventions

- Development setup and workflow

- Conventional commit format for versioning

- Component development guidelines



For major changes, please open an issue first to discuss what you would like to change.



## 📄 License



This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.