ngx-cw-headlessui

A set of completely unstyled, fully accessible UI components for Angular based on headlessui. Designed to integrate beautifully with Tailwind CSS.

Installation

Tested with Angular 11 only.

# npm
npm install ngx-cw-headlessui

Components

This project is still in early development. So far, only the menu button component is available. Also expect the API to change.

• Menu Button (Dropdown)

Menu Button (Dropdown)

Basic example

Menu Buttons are built using the hlMenu, hlMenuButton, *hlMenuItems, and *hlMenuItem directives.

The menu button *hlMenuButton will automatically open/close the *hlMenuItems when clicked, and when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.

<div hlMenu>
  <button hlMenuButton class="w-full">More</button>
  <div *hlMenuItems>
    <a *hlMenuItem="let item" [class.bg-blue-500]="item.active" href="./#account-settings">
      Account settings
    </a>
    <a *hlMenuItem="let item" [class.bg-blue-500]="item.active" href="./#documentation">
      Documentation
    </a>
    <span *hlMenuItem="let item; disabled: true">
      Invite a friend (coming soon!)
    </span>
    </div>
</div>

Styling the active item

This is a headless component so there are no styles included by default. Instead, the components expose useful information via let expressions that you can use to apply the styles you'd like to apply yourself.

To style the active hlMenuItem you can read the active state, which tells you whether or not that menu item is the item that is currently focused via the mouse or keyboard.

You can use this state to conditionally apply whatever active/focus styles you like, for instance a blue background like is typical in most operating systems.

<div hlMenu>
  <button hlMenuButton>More</button>
  <div *hlMenuItems>
    <!-- Use the `active` state to conditionally style the active item. -->
    <a *hlMenuItem="let item"
       [class]="item.active ? 'bg-blue-500 text-white' : 'bg-white text-black'" 
       href="#settings">
      Settings
    </a>
  </ul>
</div>

Transitions

To animate the opening/closing of the menu panel, use Angular's built-in animation capabilities. All you need to do is add the animation to your *hlMenuItems element.

@Component({
  <!-- ... -->
  template:
    `<div hlMenu>
        <button hlMenuButton>Trigger</button>
        <!-- add the animation to the *hlMenuItems element -->
        <div *hlMenuItems @toggleAnimation>
            <a *hlMenuItem>Item A</a>
        </div>
    </div>`
  animations: [
    trigger('toggleAnimation', [
      transition(':enter',
        [
          style({ opacity: 0, transform: 'scale(0.95)' }),
          animate('100ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
        ]),
      transition(':leave',
        [
          animate('75ms', style({ opacity: 0, transform: 'scale(0.95)' })),
        ]),
    ]),
  ]
})