Disclosure

A disclosure component is the implementation of native details and summary controls, which toggles the visibility of the extra content. Visually, it can look like a button or a hyperlink beneath extra content.

Use cases:

• displaying a button that controls the visibility of a section of content
• flagging an item as part of a category
• showing the number of unread messages

note

When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle that hints that the button will display additional content.

When the content is visible, the arrow or triangle typically points down.

Example

The example below displays a hyperlink to further content.

Read about Foundation UI

Foundation UI 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.

Genesis

Declaration

<rapid-disclosure></rapid-disclosure>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-disclosure appearance="lightweight">
      <strong slot="title">Read about Foundation UI</strong>
      <div>
        Foundation UI 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>
    </rapid-disclosure>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

<rapid-disclosure></rapid-disclosure>

Usage

export function MyComponent() {
  return (
    <rapid-disclosure appearance="lightweight">
      <strong slot="title">Read about Foundation UI</strong>
      <div>
        Foundation UI 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>
    </rapid-disclosure>
  );
}

Angular

Declaration

<rapid-disclosure></rapid-disclosure>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-disclosure>
      <strong slot="title">Read about Foundation UI</strong>
      <div>
        Foundation UI 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>
    </rapid-disclosure>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Attributes

Name	Type	Description	Example
expanded	boolean	If the disclosure is expanded.	<rapid-disclosure expanded>

Properties

This component doesn't have any properties.

Slots

Name	Description
start	Content that can be provided before the summary content.
end	Content that can be provided after the summary content.
title	The summary content.
Default	The default slot for the content that is displayed when the user clicks on the summary.

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.