How to use this component
The DisclosurePrimitive component renders an interactive element that triggers a custom event handler provided by the :toggle block (passed via hash by Ember). To comply with accessibility best practices, this element is usually a button or a component that renders a button.
When the content is disclosed, the container can be closed by toggling the button (click or enter/return).
Note: MenuPrimitive, another variant of this primitive, includes extra functionality to close the content panel by either clicking outside of the content, or via the esc key.
<Hds::DisclosurePrimitive>
<:toggle as |t|>
<button type="button" >Click me</button>
</:toggle>
<:content>
your content here
</:content>
</Hds::DisclosurePrimitive>
Content positioning
The :content block is not positioned in relation to the :toggle block.
Component API
- Name
-
<:toggle> - Type
-
named block - Description
- A named block that works as "toggle" for the DisclosurePrimitive.
- Name
-
[:toggle].onClickToggle - Type
-
event handler - Description
- A function to be called by the interactive element to toggle visibility of the content.
- Name
-
[:toggle].isOpen - Type
-
tracked property - Description
-
Hook into this tracked property to access the state of
isOpen.
- Name
-
<:content> - Type
-
named block - Description
- A named block for the content that is shown/hidden upon toggling.
- Name
-
[:content].close - Type
-
function - Description
- A function to programmatically close the DisclosurePrimitive.
- Name
-
onClose - Type
-
function - Description
- A callback function invoked when the DisclosurePrimitive is closed (if provided).
- Name
-
…attributes - Description
-
This component supports use of
...attributes.