UI component library for Angular with Tailwind CSS integration. Includes components like accordion, checkbox, overlay, popover, radio group, select, switch, and tab group.
Features
Accordion
A component for showing and hiding content sections, useful for FAQs or collapsible content.
Checkbox
A component to select one or more options from a set. Useful in forms and settings.
Overlay
A component for displaying content overlaying other elements, often used for modals or pop-ups.
Popover
A component for displaying additional information when an element is clicked or hovered over. Useful for tooltips or context menus.
Radio Group
A component for selecting a single option from a set. Used in forms where only one selection is allowed.
Select
A dropdown component for selecting one or more items from a list.
Switch
A toggle component for binary choices, like an on/off button.
Tab Group
A component for organizing content into different tabs, allowing users to switch between different views or sections.
Angular Components Library
A styleless library designed to integrate with Tailwind CSS, providing various components for building web applications.
NPM Installation
To get started, install Headwind UI using npm with the command: npm install @favian/headwind-ui.
Accessibility with tabindex
Includes components with a tabindex attribute for accessibility, allowing better navigation for users with disabilities.
Outline Customization
Allows developers to disable the browser's default focus effect by setting outline to 0, ensuring better custom styling.
Angular Compatibility
Headwind UI's major version follows the major version of Angular, ensuring seamless integration. Users only need to check the major version for compatibility.
Installation
Install Headwind UI via npm using the command `npm install @favian/headwind-ui`.
Accessibility
Some components have a `tabindex` attribute for accessibility. You can set outline to `0` to disable the browser's default focus effect.
Basic Accordion
A simple toggle panel with headers that expand or collapse the content beneath when clicked.
Accordion Classes
Allows customization of accordion components using predefined classes to modify visual styles.
Open on Hover
Accordion panels that expand when mouse hover is detected over the header instead of click.
Toggle Open/Close
Buttons to programmatically control the open or close state of accordion panels.
Animation
Smooth transition animations for accordion panels to enhance visual feedback during expansion or collapse.
Accessibility
Ensures keyboard and screen reader support for effective use by individuals with disabilities.
Checkbox Component
A basic checkbox component that users can include in their forms. Users can toggle its checked state.
Checkbox Group
Groups multiple checkboxes together for selection purposes, useful when you have multiple options.
Custom Checkbox
Allows users to customize the style and appearance of checkboxes using additional CSS classes.
Disabled State
Options to disable the checkbox component so that it cannot be interacted with.
Indeterminate State
Checkbox can have an indeterminate state, often used to indicate a mixed selection.
Custom Label Placement
Customize the position of the label relative to the checkbox.
Reactive Form Integration
Support for integration with Angular reactive forms, allowing two-way binding and form control.
HeadwindOverlayService
Used to create transparent overlays such as modals, pop-ups, and tooltips by providing a TemplateRef that acts as the overlay.
EmbeddedViewRef in Overlay
Required to use as an overlay, acting as a view that can be displayed or removed dynamically.
open() method
Opens a template as an overlay. Requires a TemplateRef and an optional callback for when the overlay is destroyed.
destroy() method
Closes the active overlay, removing it from view.
HeadwindOverlayOutlet
A fixed component that covers the entire screen to capture user interactions and display overlays.
Keyboard Interaction
Allows the user to close the latest overlay using the 'Escape' key.
Popover Component
Displays popover tooltips or additional information when hovering over or interacting with elements.
Code Examples
Provides several code snippets demonstrating how to implement popovers in different configurations.
Custom Styling
Allows customization of popover appearance through CSS.
Interactive Elements
Supports interaction with the popover content, including buttons and links within the popover.
Radio Group
Provides an interface component that allows users to select one option from a group of choices. The radio group can be styled and customized for various use cases.
Horizontal Orientation
Allows the radio group options to be displayed horizontally. This is useful for layouts where space is limited or a horizontal design is preferred.
Vertical Orientation
Allows the radio group options to be displayed vertically, suitable for mobile or standard forms where a stacked view is more appropriate.
Disabled Options
Allows particular options within the radio group to be set as disabled, preventing user interaction with those specific choices.
Reactive Form Integration
Integrates seamlessly with Angular Reactive Forms, allowing you to use radio groups within reactive form setups.
Accessibility Features
Ensures that the radio group is accessible with screen readers and keyboard navigation, complying with accessibility standards.
Multi-Select
Allows users to select multiple options from a dropdown list using checkboxes.
Searchable Options
Enables a search bar at the top of the dropdown, allowing users to quickly find and select items from a large list.
Customizable Labels
Provides the ability to customize the labels displayed for each option in the select dropdown.
Grouping
Allows options to be grouped under different categories, making it easier for users to navigate through related options.
Disabled Options
Supports disabling specific options within the select dropdown, preventing users from selecting them.
Custom Templates
Permits the use of custom templates to change the appearance and functionality of the select options.
Keyboard Navigation
Enables users to navigate and select options using the keyboard, improving accessibility.
Async Data Loading
Supports asynchronous loading of data into the select dropdown, which is useful for dynamic data sources.
Switch Types
Provides different types of switch UI components, such as Default, Switch Group, and With Default Check. These are customizable through code examples provided for Angular.
Accessibility
Includes ARIA support features for making switches accessible, which ensure they can be used by people with disabilities.
API
Detailed API documentation is available which includes information on properties, methods, and events that can be used to control the behavior of switch components.