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
Name | Module | Package |
---|---|---|
FoundationElement | /src/foundation-element/foundation-element.js |
Fields
Name | Privacy | Type | Default | 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 | Parameters | 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 |