- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • Accordion

    The Accordion component allows the user to show and hide sections of related content on a page.

    Usage

    Basic
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit. Sed consequat condimentum massa, non euismod magna gravida vitae. Donec rhoncus suscipit blandit. Nunc ultrices vulputate nisl. Duis lobortis tristique nunc, id egestas ligula condimentum quis. Integer elementum tempor cursus. Phasellus vestibulum neque non laoreet faucibus. Nunc eu congue urna, in dapibus justo.
    You can define multiple accordions together.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit. Sed consequat condimentum massa, non euismod magna gravida vitae. Donec rhoncus suscipit blandit. Nunc ultrices vulputate nisl.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit. Sed consequat condimentum massa, non euismod magna gravida vitae. Donec rhoncus suscipit blandit. Nunc ultrices vulputate nisl. Duis lobortis tristique nunc, id egestas ligula condimentum quis. Integer elementum tempor cursus. Phasellus vestibulum neque non laoreet faucibus. Nunc eu congue urna, in dapibus justo.
    Description
    You can set a short description inside the Accordion header.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit. Sed consequat condimentum massa, non euismod magna gravida vitae.
    Controlled
    Only one Accordion can be open.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit. Sed consequat condimentum massa, non euismod magna gravida vitae. Donec rhoncus suscipit blandit. Nunc ultrices vulputate nisl.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu.
    Binding
    You can bind values ​​with Accordion.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a elit vel lacus tincidunt dignissim. Phasellus mollis mauris orci, eget fermentum diam porta eu. Integer a consequat sapien, pellentesque aliquam velit. Nullam quis ligula vitae nisi accumsan auctor. Ut faucibus nulla a est commodo, vel sagittis neque tristique. In nec urna hendrerit, iaculis turpis sed, dictum elit. Sed id sagittis nunc, vitae ornare elit.
    Customization
    This Accordion header is customized.
    Accordion 1 I am an accordion
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
    This Accordion content is customized by the BitCarousel.
    RTL
    Use BitAccordion in right-to-left (RTL).
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

    API

    BitAccordion parameters
    Name
    Type
    Default value
    Description
    Classes BitAccordionClassStyles? null Custom CSS classes for different parts of the BitAccordion.
    ChildContent RenderFragment? null The content of the Accordion.
    DefaultIsExpanded bool? null Default value of the IsExpanded.
    Description string? null A short description in the header of Accordion.
    HeaderTemplate RenderFragment<bool>? null Used to customize how the header inside the Accordion is rendered.
    IsExpanded bool false Determines whether the accordion is expanding or collapses.
    OnClick EventCallback<MouseEventArgs> Callback that is called when the header is clicked.
    OnChange EventCallback<bool> Callback that is called when the IsExpanded value has changed.
    Styles BitAccordionClassStyles? null Custom CSS styles for different parts of the BitAccordion.
    Title string? null Title in the header of Accordion.
    BitComponentBase parameters
    Name
    Type
    Default value
    Description
    AriaLabel string? null The aria-label of the control for the benefit of screen readers.
    Class string? null Custom CSS class for the root element of the component.
    Dir BitDir? null Determines the component direction.
    HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
    Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
    IsEnabled bool true Whether or not the component is enabled.
    Style string? null Custom CSS style for the root element of the component.
    Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
    BitComponentBase public members
    Name
    Type
    Default value
    Description
    UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
    RootElement ElementReference The ElementReference of the root element.
    BitAccordionClassStyles properties
    Name
    Type
    Default value
    Description
    Root string? null Custom CSS classes/styles for the root element of the BitAccordion.
    Expanded string? null Custom CSS classes/styles for the expanded state of the BitAccordion.
    Header string? null Custom CSS classes/styles for the header of the BitAccordion.
    HeaderContent string? null Custom CSS classes/styles for the header content of the BitAccordion.
    Title string? null Custom CSS classes/styles for the title of the BitAccordion.
    Description string? null Custom CSS classes/styles for the description of the BitAccordion.
    ChevronDownIcon string? null Custom CSS classes/styles for the chevron down icon of the BitAccordion.
    Content string? null Custom CSS classes/styles for the content of the BitAccordion.
    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.
    • On this page