headlessui for angular
npm install @cakewalk/ngx-headlessuish
npm
npm install @cakewalk/ngx-headlessui
`
Components
_This project is still in early development. So far, only Disclosure, Menu, Switch and Transition component is available. Also expect the API to change._
- Disclosure (Expandable and Collapsible Panel)
- Menu Button (Dropdown)
- Switch (Checkbox)
- Transition (Animation)
- Popover
Disclosure (Expandable and Collapsible Panel)
Disclosure are built using Button and Panel components which are warpped in Disclosure
$3
`html
panel content...
`
Menu Button (Dropdown)
$3
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.
`html
`
$3
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.
`html
`
Switch (Checkbox)
The Switch component and related child components are used to quickly build custom switch/toggle components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard support.
Switches are built using the Switch component. Optionally you can also use the SwitchGroup and SwitchLabel components.
$3
`html
`
$3
By default the Switch will use the contents as the label for screenreaders. If you need more control, you can render a SwitchLabel outside of the Switch, as long as both the switch and label are within a parent SwitchGroup.
Clicking the label will toggle the switch state, like you'd expect from a native checkbox.
`html
`
Transition (Animation)
The Transition component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles in the different stages of the transition.
$3
`html
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0">
I will fade in and out
`
By default, a Transition will enter and leave instantly, which is probably not what you're looking for if you're using this library.
To animate your enter/leave transitions, add classes that provide the styling for each phase of the transitions using these props:
- enter Applied the entire time an element is entering. Usually you define your duration and what properties you want to transition here, for example transition-opacity duration-75.
- enterFrom The starting point to enter from, for example opacity-0 if something should fade in.
- enterTo The ending point to enter to, for example opacity-100 after fading in.
- leave Applied the entire time an element is leaving. Usually you define your duration and what properties you want to transition here, for example transition-opacity duration-75.
- leaveFrom The starting point to leave from, for example opacity-100 if something should fade out.
- leaveTo The ending point to leave to, for example opacity-0 after fading out.
$3
| Prop | Type | Description |
| ------------- |:-------------:|:-----|
| show | Boolean | Whether the children should be shown or hidden. |
| enter | String (Default: '') | Classes to add to the transitioning element during the entire enter phase. |
| enterFrom | String (Default: '') | Classes to add to the transitioning element before the enter phase starts. |
| enterTo | String (Default: '') | Classes to add to the transitioning element immediately after the enter phase starts. |
| leave | String (Default: '') | Classes to add to the transitioning element during the entire leave phase. |
| leaveFrom | String (Default: '') | Classes to add to the transitioning element before the leave phase starts. |
| leaveTo | String (Default: '') | Classes to add to the transitioning element immediately after the leave phase starts. |
| beforeEnter | Function | Callback which is called before we start the enter transition. |
| afterEnter | Function | Callback which is called after we finished the enter transition. |
| beforeLeave | Function |Callback which is called before we start the leave transition. |
| afterLeave | Function | Callback which is called after we finished the leave transition. |
Popover
Popover are built using Button and Panel components which are wrapped in Popover
$3
`html
panel content...
``