Disclosure

A disclosure allows users to expland/collapse the high-level options to reveal more information.

Usage

Import the Disclosure , DisclosureItem components from “figBlocks”.
The open prop can be passed to open the disclosureItem by default.

First

First item
Second

Second item

<script>
	import { Disclosure, DisclosureItem } from 'figblocks';
</script>

<Disclosure>
	<DisclosureItem title="First" open>First item</DisclosureItem>
	<DisclosureItem title="Second">Second item</DisclosureItem>
</Disclosure>

Borders

The border separator between sections can be removed by setting the border prop to false.

First

First item
Second

Second item

<Disclosure border={false}>
	<DisclosureItem title="First" open>First item</DisclosureItem>
	<DisclosureItem title="Second">Second item</DisclosureItem>
</Disclosure>

Section

The disclosure title can be made bold by passing the section prop.

Disclosure

disclousure item

<Disclosure>
	<DisclosureItem title="Disclosure" section>disclousure item</DisclosureItem>
</Disclosure>

Disclosure props

`border`	boolean	true	If true, the border separator between the sections is displayed.
`class`	string	undefined	Custom CSS classname for styling.

DisclosureItem props

`title`	string	""	Title of the disclosure item.
`open`	boolean	false	If true, the DisclosureItem will be opened by default.
`section`	boolean	false	If true, the Disclosure header will be rendered in bold.

Disclosure slots

default

DisclosureItem slots

default

DisclosureItem events

on:animationend
on:click
on:focus
on:mouseover
on:mouseenter
on:mouseleave
on:keydown