Disclosure

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

Use cases:

• A button that controls the visibility of a section of content.
• Flagging an item as part of a category.
• Representing a value 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 to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

Example

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

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

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 which can be provided before the summary content
end	Content which can be provided after the summary content
title	The summary content
Default	The default slot for the disclosure content

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.