Disclosure

a primitive for creating a Disclosure component.

• View ARIA pattern W3C
• View source code GitHub
• View code coverage v8-coverage
• View type documentation typedoc

Anatomy

Figure: Anatomy of Disclosure component

API Reference

createDisclosure(args?: DisclosureArguments): AriaDisclosure;

Parameters [DisclosureArguments]

Name	Type	Default	Description
defaultVisible	boolean	false	Whether the Disclosure is open by default (uncontrolled).
id	string	-	Custom unique identifier of the disclosure content element.
isButtonElement	boolean	true	Whether the disclosure toggle is a button element, default to true. Set this to false if you want to use a different element than a button.
isVisible	boolean	-	Whether the Disclosure is open by default (controlled).
onVisibilityChange	(isOpen: boolean) => void	-	Handler that is called when the Disclosure visibility state changes.

Return value [AriaDisclosure]

Name	Type	Description
contentProps *	JSX.HTMLAttributes<any>	The toggle button properties.
state *	{ isVisible: boolean }	The current state of the disclosure.
toggleProps *	JSX.HTMLAttributes<any>	The content element properties.

Example

Playground

Open

Code

import { createDisclosure, type DisclosureArguments } from "../../../../../packages/solid-apg/src";

import type { VoidComponent } from "solid-js";

type DisclosureProps = DisclosureArguments;

export const Disclosure: VoidComponent<DisclosureProps> = (props) => {
  const { id, toggleProps, state } = createDisclosure(props);

  return (
    <div class="relative w-full flex justify-center items-center">
      <button class="btn max-w-64 w-full" {...toggleProps}>
        {state.isVisible ? "Close" : "Open"}
      </button>
      {state.isVisible ? (
        <div class="absolute top-full bg-black text-white w-full max-w-64 p-4" id={id}>
          <p>Hello, World!</p>
        </div>
      ) : null}
    </div>
  );
};

Screen reader