Skip to main content
Version: 1.x

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
<fast-disclosure appearance="lightweight">
    <strong slot="title">Read about FAST</strong>
    <div>
        FAST is a collection of technologies built on Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.
    </div>
</fast-disclosure>
Result
Loading...

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,
});

API

class: Disclosure

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
expandedpublicbooleanDetermines if the element should show the extra content or not.
titlepublicstringInvoker title
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
showpublicShow extra content.void
hidepublicHide extra content.void
togglepublicToggle the current(expanded/collapsed) state.void
setupprotectedRegister listener and set default disclosure modevoid
onToggleprotectedUpdate the aria attr and fire `toggle` event
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
togglefires a toggle event when the summary is toggled

Attributes

NameFieldInherited From
expanded
titletitle

Slots

NameDescription
startContent which can be provided before the summary content
endContent which can be provided after the summary content
titleThe summary content
The default slot for the disclosure content

Additional resources