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>

<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

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

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Description	Inherited From
`expanded`	public	`boolean`	Determines if the element should show the extra content or not.
`title`	public	`string`	Invoker title
`$presentation`	public	`ComponentPresentation or null`	A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`	Sets 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
`styles`	public	`ElementStyles or void or null`	Sets 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

Name	Privacy	Description	Return	Inherited From
`show`	public	Show extra content.	`void`
`hide`	public	Hide extra content.	`void`
`toggle`	public	Toggle the current(expanded/collapsed) state.	`void`
`setup`	protected	Register listener and set default disclosure mode	`void`
`onToggle`	protected	Update the aria attr and fire `toggle` event
`templateChanged`	protected		`void`	FoundationElement
`stylesChanged`	protected		`void`	FoundationElement

Events

Name	Type	Description	Inherited From
`toggle`		fires a toggle event when the summary is toggled

Attributes

Name	Field	Inherited From
	expanded
`title`	title

Slots

Name	Description
`start`	Content which can be provided before the summary content
`end`	Content which can be provided after the summary content
`title`	The summary content
	The default slot for the disclosure content

Setup​

Usage​

Create your own design​

API​

class: Disclosure​

Superclass​

Fields​

Methods​

Events​

Attributes​

Slots​

Additional resources​