Disclosure

A disclosure allows showing and hiding content such as switchable accordion menus.

Basic Example

A disclosure is generated via the disclosure component factory function. Within this scope a button must be generated by disclosureButton and a panel via disclosurePanel.

The button serves as a control element for opening and closing the panel area. This is done by one Mouse click or the Space key if the button tag has focus.

disclosure {
disclosureButton {
+"When is being headless a good thing?"
}
disclosurePanel {
+"As foundation for web components!"
}
}

State depending Styling

In order to design the styling or entire structures depending on the state of the disclosure, you can refer to the Boolean data stream opened.

Typical patterns are use within className to set different CSS classes depending on state, or simply some conditional rendering.

disclosure {
disclosureButton {
+"When is being headless a good thing?"

span("ml-6 h-7 flex items-center") {
// add some Icon that reflects the state visually
opened.render(into = this) {
svg("h-6 w-6 transform") {
// change Icon depending on `opened` state
if (it) content(HeroIcons.chevron_up)
else content(HeroIcons.chevron_down)
}
}
}
}
disclosurePanel {
+"As foundation for web components!"
}
}

Open and Close

To enable opening programmatically and independently of the disclosureButton element, an optional boolean data binding openState to be set in the component.

In addition, a disclosure itself offers a close handler for closing, which can be attached e.g. within the panel to some closing event. Imagine some custom close-button element for that purpose.

val toggle = storeOf(true) // show Panel at start

disclosure {

// establish two-way-data-binding
openClose(toggle)

disclosureButton {
+"When is being headless a good thing?"
}
disclosurePanel {
+"As foundation for web components!"
button {
+"Close"
// use `close` Handler to explicitly close the panel from within
clicks.map { false } handledBy close
}
}
}

Closing by the Panel

If it is necessary that an action on the panel itself closes the panel, i.e. a mouse click or the Space button, if the panel is focused, there is a dedicated disclosureCloseButton building block in the scope of the panel.

disclosure {
disclosureButton {
+"When is being headless a good thing?"
}
disclosurePanel {
disclosureCloseButton {
+"As foundation for web components!"
+"Simply click or press Space to close."
}
}
}

Mouse Interaction

Clicking on a disclosureButton will open or close the panel.

Keyboard Interaction

Command Description
Space when disclosureButton has focus Opens or closes the panel.

API

Summary / Sketch

disclosure() {
// inherited by `OpenClose`
val openState: DatabindingProperty<Boolean>
val opened: Flow<Boolean>
val close: SimpleHandler<Unit>
val open: SimpleHandler<Unit>
val toggle: SimpleHandler<Unit>

disclosureButton() { }
disclosurePanel() {
disclosureCloseButton() {}
}
}

disclosure

Parameters: classes, id, scope, tag, initialize

Default-Tag: div

Scope property Typ Description
openState DatabindingProperty<Boolean> Optional (two-way) data-binding for opening and closing.
opened Flow<Boolean> Data stream that provides Boolean values related to the "open" state.
close SimpleHandler<Unit> Handler to close the disclosure from inside.
open SimpleHandler<Unit> handler to open; does not make sense to use within a disclosure!
toggle SimpleHandler<Unit> handler for switching between open and closed; does not make sense to use within a disclosure.

disclosureButton

Available in the scope of: disclosure

Parameters: classes, scope, tag, initialize

Default-Tag: button

disclosurePanel

Available in the scope of: disclosure

Parameters: classes, scope, tag, initialize

Default-Tag: div

disclosureCloseButton

Available in the scope of: disclosurePanel

Parameters: classes, scope, tag, initialize

Default-Tag: button