Toggle Specification - IgniteUI/igniteui-webcomponents GitHub Wiki
Team Name: CodeX
Developer Name: Galina Edinakova
Designer Name:
- Peer Developer Name | Date:
- Design Manager Name | Date:
- Radoslav Mirchev| Date:
- Radoslav Karaivanov | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Galina Edinakova | 7-Sep-2021 | |
| 2 | Galina Edinakova | 8-Feb-2022 |
The igcToggle directive marks content to be displayed on top of all other content. It should be positioned relative to a specified target DOM element or ?a virtual area defined by its coordinates.
The IgcToggleController bundles the creation of a toggle directive and handles global events, related to the configuration of togglable components.
Developer stories:
- As a developer, I want to specify the toggle's position relative to a target element.
- ?As a developer, I want to display the toggle relative to a certain virtual rectangular area without having an actual target DOM element.
- As a developer, I want to be able to pass a set of options to the directive controlling the element's position, open state and behavior based on the available space.
- As a developer, I want to use the controller to update the toggle directive parameters.
End-user stories:
- As an end-user, I want to be able to show and hide the toggle on performing an action like clicking a button.
- As an end-user, I want to be able to position the toggle according to the available space.
- As an end-user, I want to hide(or keep) the toggle when clicking outside of it.
The directive is a function that returns a value to render. It takes 3 arguments:
| Name | Description | Type | Default value |
|---|---|---|---|
target |
The target element to position the popper. | HTMLElement | VirtualElement |
|
open |
The initial open state. | Boolean | |
options |
The options describing the positioning and behavior of the toggle. | IToggleOptions |
<div ${igcToggle(target, open, options)}>Toggle Content</div>| Name | Description | Type | Default value | Reflected |
|---|---|---|---|---|
open |
Sets the open state of the toggle. | Boolean | false |
false |
target |
The target element to position the popper. | HTMLElement | VirtualElement |
false |
|
options |
The options describing the positioning and behavior of the toggle. | IToggleOptions |
false |
|
toggleDirective |
The directive that marks the toggle. | DirectiveResult<typeof IgcToggleDirective> |
| Name | Description | Parameters |
|---|---|---|
documentClicked |
The document's click event handler to override in the host component. | MouseEvent |
handleScroll |
The document's scroll event handler to override in the host component. | Event |
The igcToggle directive uses Popper and utilizes its positioning capabilities.