ディスクロージャー
ディスクロージャーは、コンテンツのセクション内の任意の範囲を折りたたむことができるユーザーインターフェースです。
import { Disclosure } from "@/components/ui/disclosure";使用例
import { Disclosure } from "@/components/ui/disclosure";
export default function App() {
return (
<Disclosure.Root>
<Disclosure.Summary>
<Disclosure.Indicator />
ディスクロージャータイトル
</Disclosure.Summary>
<Disclosure.Content textStyle="std-17N-170" my={4}>
これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
</Disclosure.Content>
</Disclosure.Root>
);
}
details要素として使用
通常はbuttonとdivで構成される。asChild属性を使用してタグを変更する。
import { Disclosure } from "@/components/ui/disclosure";
export default function App() {
return (
<Disclosure.Root asChild>
<details>
<Disclosure.Summary asChild>
<summary>
<Disclosure.Indicator />
ディスクロージャータイトル
</summary>
</Disclosure.Summary>
<Disclosure.Content textStyle="std-17N-170" my={4}>
これはダミーテキストです。ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。ダミーテキストを使用すると、デザインの全体像を評価したり、テキストの配置や長さを確認したりすることができます。ダミーテキストは実際の文章ではないので、内容には意味がありません。
</Disclosure.Content>
</details>
</Disclosure.Root>
);
}