Disclosure
A heading that shows or hides its content; hidden content stays in the page.
import { Disclosure } from '@iffday/ui';Example
The heading starts with a › that turns 90 degrees when open. Closed content is only hidden: it stays in the page’s HTML, where search engines read it. Code under every example on this site is a Disclosure.
Watchlist and Watched are marks on a film, shared across festivals. Every change leaves an entry you can edit or delete, even without a date. Mark a film as watched to rate it and place a sticker.
import { useT } from '@iffday/i18n';
import { Disclosure } from '@iffday/ui';
export default function Example() {
const t = useT();
return (
<div style={{ width: 'min(100%, 520px)' }}>
<Disclosure summary={t('film.card.aWatchlistDoesNotRequireEmailVerificationWatchedRecords')}>
<p style={{ color: 'var(--text-2)', margin: '10px 0 0 18px' }}>
{t('plan.personal.watchlistAndWatchedAreMarksOnAFilmShared')}
</p>
</Disclosure>
</div>
);
}Props
Disclosure
packages/ui/src/controls.tsx:170| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
summary* | ReactNode | |
className | string | '' |
defaultOpen | boolean | false |