Skip to main content

fast-disclosure

A disclosure component is the implementation of native details and summary controls that toggles the visibility of the extra content. Visually, it would look like a button or hyperlink and beneath extra content. As defined by the W3C:

A disclosure is a button that controls the visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

Setup#

import {    provideFASTDesignSystem,    fastDisclosure} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastDisclosure()    );

Usage#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Create your own design#

import {    Disclosure,    disclosureTemplate as template,} from "@microsoft/fast-foundation";import { disclosureStyles as styles } from "./my-disclosure.styles";
export const myDisclosure = Disclosure.compose({    baseName: "disclosure",    template,    styles,});

Additional resources#