Prezentare generală
Collapsible expune contractele Root, Trigger și Panel ale Base UI. Root gestionează starea de extindere, Trigger oferă activare prin tastatură și relația cu panoul, iar Panel gestionează animația și durata de viață a conținutului.
Utilizare
defaultOpen pentru extinderea necontrolată. Utilizați open și onOpenChange atunci când aplicația gestionează starea. Funcția de apel invers primește valoarea booleană solicitată și detaliile evenimentului Base UI, inclusiv reason, event și cancel(). Anularea unei modificări păstrează starea curentă. Un panou controlat extern poate omite Trigger atunci când starea sa provine de la un alt control sau dintr-o condiție a aplicației.
Trigger moștenește starea disabled a Root și o poate suprascrie cu propriul prop disabled. Declanșatorul nativ acceptă Enter și Space și furnizează automat aria-expanded și aria-controls. Oferiți fiecărui declanșator un nume accesibil semnificativ.
Anatomie
Personalizare nativă
Root și Panel redau undiv; Trigger redă un button. Fiecare parte acceptă atribute native, handlere, className, style, referințe și compunerea render Base UI. Callbackurile pentru clasă și stil primesc starea părții. Transmiteți mai departe toate prop-urile furnizate și referința din componentele de randare personalizate. Setați nativeButton={false} când Trigger redă un element care nu este buton.
Tipurile publice includ CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps, cele trei tipuri de stare ale părților și CollapsibleRootChangeEventDetails și CollapsibleRootChangeEventReason.
Animație și durata de viață a conținutului
Panel utilizează implicitdimension="height". Utilizați dimension="width" pentru extinderea orizontală și constrângeți lățimea conținutului atunci când este necesar. containAnimation este implicit true, decupează conținutul care depășește limitele și aranjează conținutul într-o coloană. Setați-o la false atunci când conținutul trebuie să depășească limitele în timpul tranziției.
duration al Panelului alege o presetare de temă (instant, fast, normal sau slow) și valoarea implicită este normal. Preferințele pentru mișcare redusă dezactivează tranzițiile.
Panel este demontat implicit după închidere. Utilizați keepMounted pentru a păstra starea locală a conținutului în timp ce ascundeți panelul închis. hiddenUntilFound permite căutării în pagină a browserului să afișeze conținutul închis și are prioritate față de keepMounted.
Proprietăți
Collapsible.Root
string | ((state: CollapsibleRootState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
implicit:"false"
Initial uncontrolled expansion state.
boolean
implicit:"false"
Default disabled state inherited by the triggers in this root.
((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)
Called with the requested open state and cancelable Base UI event details.
boolean
Controlled expansion state. Use defaultOpen for uncontrolled state.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleRootState>
Replaces the root div. Forward the supplied props and ref.
CSSProperties | ((state: CollapsibleRootState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
Collapsible.Trigger
string | ((state: CollapsibleTriggerState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
Disables this trigger.
boolean
implicit:"true"
Set to false when render replaces the native button with another element.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsibleTriggerState>
Replaces the linked trigger button. Forward the supplied props and ref.
CSSProperties | ((state: CollapsibleTriggerState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
Collapsible.Panel
string | ((state: CollapsiblePanelState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
implicit:"true"
Clips overflowing content during expansion and uses a column layout.
"height" | "width"
implicit:"height"
Dimension animated when the panel opens and closes.
"fast" | "instant" | "normal" | "slow"
implicit:"normal"
Theme timing preset for both size and opacity. Native style can customize transition timing.
Uses hidden until-found so browser page search can reveal the contents. Overrides keepMounted.
boolean
implicit:"false"
Keeps the closed panel mounted and hidden, preserving local content state.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CollapsiblePanelState>
Replaces the animated panel div. Forward the supplied props and ref.
CSSProperties | ((state: CollapsiblePanelState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.