<Disclosure><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<Disclosure><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<Disclosure><DisclosureTitle>
System Requirements
</DisclosureTitle><DisclosurePanel>
Details about
system requirements
here.
</DisclosurePanel></Disclosure>
Disclosure follows the ARIA Disclosure pattern and consists of two children: DisclosureTitle and DisclosurePanel. The DisclosureTitle controls the expansion of the DisclosurePanel and the contents inside.
Disclosure can be used as a standalone collapsible section of content. However, multiple discosures can be combined to form an Accordion.
Disclosure accepts an onExpandedChange prop which is triggered when it is expanded or collapsed. The example below uses onExpandedChange to programmatically control disclosure expansion.
functionControlledExpansion(){let[isExpanded,setIsExpanded]=React.useState<boolean>(false);return(<><DisclosureisExpanded={isExpanded}onExpandedChange={setIsExpanded}><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure><divstyle={{marginTop: '20px'}}>{isExpanded
? 'The disclosure is expanded'
: 'The disclosure is collapsed'}</div></>);}
functionControlledExpansion(){let[isExpanded,setIsExpanded]=React.useState<boolean>(false);return(<><DisclosureisExpanded={isExpanded}onExpandedChange={setIsExpanded}><DisclosureTitle>
System Requirements
</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure><divstyle={{marginTop: '20px'}}>{isExpanded
? 'The disclosure is expanded'
: 'The disclosure is collapsed'}</div></>);}
functionControlledExpansion(){let[isExpanded,setIsExpanded]=React.useState<boolean>(false);return(<><DisclosureisExpanded={isExpanded}onExpandedChange={setIsExpanded}><DisclosureTitle>
System
Requirements
</DisclosureTitle><DisclosurePanel>
Details about
system
requirements
here.
</DisclosurePanel></Disclosure><divstyle={{marginTop:
'20px'}}>{isExpanded
? 'The disclosure is expanded'
: 'The disclosure is collapsed'}</div></>);}
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
<DisclosureisDisabled><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<DisclosureisDisabled><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<DisclosureisDisabled><DisclosureTitle>
System Requirements
</DisclosureTitle><DisclosurePanel>
Details about
system requirements
here.
</DisclosurePanel></Disclosure>
<DisclosuredefaultExpanded><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<DisclosuredefaultExpanded><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<DisclosuredefaultExpanded><DisclosureTitle>
System Requirements
</DisclosureTitle><DisclosurePanel>
Details about
system requirements
here.
</DisclosurePanel></Disclosure>
<DisclosureisQuiet><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<DisclosureisQuiet><DisclosureTitle>System Requirements</DisclosureTitle><DisclosurePanel>
Details about system requirements here.
</DisclosurePanel></Disclosure>
<DisclosureisQuiet><DisclosureTitle>
System Requirements
</DisclosureTitle><DisclosurePanel>
Details about
system requirements
here.
</DisclosurePanel></Disclosure>