# AiCollapsible ## Description BitAiCollapsible is a disclosure panel with a real button header, so it is keyboard reachable and announced with its expanded state. The reasoning panel of a message (BitAiReasoningPartView) is built on it, and it fits any detail an answer folds away - the arguments of a tool, the details of an error. It is drawn by a BitAccordion, so it follows the theme and is restyled like one, and its body is rendered only while it is open. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | ChildContent | `RenderFragment?` | null | The body of the panel. It is rendered only while the panel is open: closing the panel unmounts it, so a component inside starts again from its initial state the next time the panel opens. | | Classes | `BitAiCollapsibleClassStyles?` | null | Custom CSS classes for different parts of the collapsible. | | HeaderTemplate | `RenderFragment?` | null | The custom content of the header, which replaces the Title text beside the chevron. It is rendered inside the toggle button, so it is the accessible name of the toggle: keep interactive content out of it (use SuffixTemplate). | | Open | `bool` | false | Whether the panel is open. The panel also opens and closes itself when the user toggles it, and reports that through OpenChanged, so it can be bound with @bind-Open. | | OpenChanged | `EventCallback<bool>` | | The callback raised with the new state when the user opens or closes the panel. | | Styles | `BitAiCollapsibleClassStyles?` | null | Custom CSS styles for different parts of the collapsible. | | SuffixTemplate | `RenderFragment?` | null | The content shown at the end of the header, beside the toggle rather than inside it, such as a status chip. It is not part of the accessible name of the toggle. | | Title | `string?` | null | The text of the header, used when no HeaderTemplate is given. | | AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. | | Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. | | Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. | | Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. | | ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. | | HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. | | Id | `string?` | null | Gets or sets the unique identifier for the component's root element. | | Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. | | TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. | | Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. | ## Public Members | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. | | RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. | ## Enums ### BitVisibility Enum | Name | Value | Description | | :--- | :--- | :---------- | | Visible | 0 | The content of the component is visible. | | Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). | | Collapsed | 2 | The component is hidden (display:none). | ### BitDir Enum | Name | Value | Description | | :--- | :--- | :---------- | | Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). | | Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). | | Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. | ## Sub Classes ### BitAiCollapsibleClassStyles Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAiCollapsible. | | Accordion | `BitAccordionClassStyles?` | null | Custom CSS classes/styles for the parts of the BitAccordion that draws the panel of the BitAiCollapsible (its header, title, expander icon, content and the rest). | ## Examples \n**Basic**: ```razor Three pages matched: render modes, the SignalR circuit, and prerendering. The last failure was a timeout on the second attempt, after 30 seconds. ``` \n**Binding**: ```razor @(isOpen ? "Close" : "Open") the panel Compare the two render modes, then give a number for each. Each toggle of the header is counted by OpenChanged. ``` ```csharp private bool isOpen; private int toggleCount; ``` \n**Templates**: ```razor search_docs Thought for 4 seconds The question is about latency, so the fixed cost of the connection and the cost per token are worth separating. ``` \n**Disabled**: ```razor Never shown. Shown, and kept open. ``` \n**Cascading parameters**: ```razor Three pages matched. Compare the two render modes. Italic, and not in the primary color. ``` ```csharp private readonly BitAiCollapsibleParams[] collapsibleParams = [ new() { Styles = new() { Accordion = new() { Title = "color: var(--bit-clr-pri); font-weight: 600;" } } } ]; ``` \n**Style & Class**: ```razor A panel with a style of its own. A panel with a class of its own. The header and the content are styled apart. The root and the header carry classes of their own. ``` \n**RTL**: ```razor سه صفحه پیدا شد: حالت‌های رندر، اتصال SignalR و پیش‌رندر. ```