Accordion

For more examples, visit the Storybook.

Example

<Accordion collapsible type="single">
    <StudsAccordionItem value="item-1">
        <StudsAccordionTrigger>
            Item 1
        </StudsAccordionTrigger>
        <StudsAccordionContent>
            This is the content for item 1.
        </StudsAccordionContent>
    </StudsAccordionItem>
</Accordion>

`StudsAccordion` Props

type

"single" | "multiple"

default:"single"

The type of accordion. “single” allows only one item to be expanded at a time, while “multiple” allows multiple items to be expanded.

collapsible

boolean

default:"false"

If true, allows the user to collapse an expanded item.

value

string

The controlled value of the item to expand

defaultValue

string

The value of the item to expand when initially rendered

disabled

boolean

default:"false"

If true, the accordion will be disabled.

onValueChange

function

Callback function that is called when the value changes.

`<StudsAccordionItem>`Props

value

string

The value of the accordion item.

asChild

boolean

default:"false"

If true, the accordion item will render as a child component.

disabled

boolean

default:"false"

If true, the accordion item will be disabled.

For more examples, visit the Storybook.

Example

<Accordion collapsible type="single">
    <StudsAccordionItem value="item-1">
        <StudsAccordionTrigger>
            Item 1
        </StudsAccordionTrigger>
        <StudsAccordionContent>
            This is the content for item 1.
        </StudsAccordionContent>
    </StudsAccordionItem>
</Accordion>

`StudsAccordion` Props

type

"single" | "multiple"

default:"single"

The type of accordion. “single” allows only one item to be expanded at a time, while “multiple” allows multiple items to be expanded.

collapsible

boolean

default:"false"

If true, allows the user to collapse an expanded item.

value

string

The controlled value of the item to expand

defaultValue

string

The value of the item to expand when initially rendered

disabled

boolean

default:"false"

If true, the accordion will be disabled.

onValueChange

function

Callback function that is called when the value changes.

`<StudsAccordionItem>`Props

value

string

The value of the accordion item.

asChild

boolean

default:"false"

If true, the accordion item will render as a child component.

disabled

boolean

default:"false"

If true, the accordion item will be disabled.

For more examples, visit the Storybook.

Example

<StudsAccordion>
    <Items>
        <StudsAccordionItem Text="Orders" Icon="account_balance_wallet" CollapseTitle="Collapse orders."
                            ExpandTitle="Expand orders." CollapseAriaLabel="Collapse the order details."
                            ExpandAriaLabel="Expand the order details.">
            Details for Orders
        </StudsAccordionItem>
                <StudsAccordionItem Text="Employees" Icon="account_box" CollapseTitle="Collapse employees."
                            ExpandTitle="Expand employees." CollapseAriaLabel="Collapse the employee details."
                            ExpandAriaLabel="Expand the employee details.">
            Details for Employees
        </StudsAccordionItem>
                <StudsAccordionItem Text="Customers" Icon="accessibility" CollapseTitle="Collapse customers."
                            ExpandTitle="Expand customers." CollapseAriaLabel="Collapse the customer details."
                            ExpandAriaLabel="Expand the customer details.">
            Details for Customers
        </StudsAccordionItem>
    </Items>
</StudsAccordion>

`StudsAccordion` Parameters

Multiple

bool

default:"false"

Gets or sets a value indicating whether multiple items can be expanded.

SelectedIndex

int

Gets or sets the index of the selected item.

OnSelectedIndexChanged

EventCallback<int>

Gets or sets the callback that is invoked when the selected index changes.

Expand

EventCallback<int>

Gets or sets the callback that is invoked when an item is expanded.

Collapse

EventCallback<int>

Gets or sets the callback that is invoked when an item is collapsed.

Items

RenderFragment

Gets or sets the items to be displayed in the accordion.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsAccordionItem` Parameters

Accordion

StudsAccordion

Gets or sets the accordion.

ChildContent

RenderFragment

Gets or sets the child content.

CollapseAriaLabel

string

Gets or sets the aria-label attribute of the collapse button.

CollapseTitle

string

Gets or sets the title attribute of the collapse button.

Disabled

bool

default:"false"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is disabled.

ExpandAriaLabel

string

Gets or sets the aria-label attribute of the expand button.

ExpandTitle

string

Gets or sets the title attribute of the expand button.

Icon

string

Gets or sets the icon.

IconColor

string

Gets or sets the icon color.

Selected

bool

default:"false"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is selected.

SelectedChanged

EventCallback<bool>

Gets or sets the callback that is invoked when the selected state changes.

Template

RenderFragment

Gets or sets the header content.

Text

string

Gets or sets the text.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Getting Started

Foundations

Components

Integration

Content

`StudsAccordion` Props

`<StudsAccordionItem>`Props

`StudsAccordion` Props

`<StudsAccordionItem>`Props

`StudsAccordion` Parameters

`StudsAccordionItem` Parameters

Getting Started

Foundations

Components

Integration

Content

​StudsAccordion Props

​<StudsAccordionItem>Props

​StudsAccordion Props

​<StudsAccordionItem>Props

​StudsAccordion Parameters

​StudsAccordionItem Parameters

`StudsAccordion` Props

`<StudsAccordionItem>`Props

`StudsAccordion` Props

`<StudsAccordionItem>`Props

`StudsAccordion` Parameters

`StudsAccordionItem` Parameters