Skip to content
QuickGUI

Accordion

Coordinates one or more expandable sections and their keyboard focus.

Loading interactive demo…

#Import

Import Accordion from quickgui.

use quickgui::*;

#Usage

let accordion = Accordion::new("faq");
let item = accordion.item("one", 0, true);
item.root().child(item.trigger_with(text("Details")))

#Anatomy

  • Accordion::root
  • Accordion::item
  • Accordion::header
  • Accordion::trigger
  • Accordion::panel

#API reference

Expand an entry for its description and complete signature. A dash means no declaration default is documented.

Accordion

View source
pub fn new(root_id: impl Into<ElementId>) -> Self
disabledpub const fn disabled(mut self, disabled: bool) -> Self—

Configures disabled for this part.

pub const fn disabled(mut self, disabled: bool) -> Self
View source
keep_mountedpub const fn keep_mounted(mut self, keep_mounted: bool) -> Self—

Configures keep mounted for this part.

pub const fn keep_mounted(mut self, keep_mounted: bool) -> Self
View source
heading_levelpub fn heading_level(mut self, level: usize) -> Self—

Configures heading level for this part.

pub fn heading_level(mut self, level: usize) -> Self
View source
root_idpub const fn root_id(self) -> ElementId—

Configures root id for this part.

pub const fn root_id(self) -> ElementId
View source
itempub fn item(self, value: impl Into<ElementId>, index: usize, open: bool) -> AccordionItem—

Configures item for this part.

pub fn item(self, value: impl Into<ElementId>, index: usize, open: bool) -> AccordionItem
View source
item_from_statepub fn item_from_state( self, value: impl Into<ElementId>, index: usize, state: &AccordionState, ) -> AccordionItem—

Configures item from state for this part.

pub fn item_from_state( self, value: impl Into<ElementId>, index: usize, state: &AccordionState, ) -> AccordionItem
View source

Accordion::root_with

View source
pub fn root_with(self, root: Element) -> Element

Accordion::root

View source
pub fn root(self) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

AccordionItem

View source
pub fn disabled(mut self, disabled: bool) -> Self
keep_mountedpub const fn keep_mounted(mut self, keep_mounted: bool) -> Self—

Configures keep mounted for this part.

pub const fn keep_mounted(mut self, keep_mounted: bool) -> Self
View source
heading_levelpub fn heading_level(mut self, level: usize) -> Self—

Configures heading level for this part.

pub fn heading_level(mut self, level: usize) -> Self
View source
statepub const fn state(self) -> AccordionItemState—

Configures state for this part.

pub const fn state(self) -> AccordionItemState
View source
valuepub const fn value(self) -> ElementId—

Configures value for this part.

pub const fn value(self) -> ElementId
View source
indexpub const fn index(self) -> usize—

This item's declared position in the accordion, Base UI's `data-index`.

pub const fn index(self) -> usize
View source
root_idpub fn root_id(self) -> ElementId—

Configures root id for this part.

pub fn root_id(self) -> ElementId
View source
header_idpub fn header_id(self) -> ElementId—

Configures header id for this part.

pub fn header_id(self) -> ElementId
View source
trigger_idpub fn trigger_id(self) -> ElementId—

Configures trigger id for this part.

pub fn trigger_id(self) -> ElementId
View source
panel_idpub fn panel_id(self) -> ElementId—

Configures panel id for this part.

pub fn panel_id(self) -> ElementId
View source
is_openpub const fn is_open(self) -> bool—

Configures is open for this part.

pub const fn is_open(self) -> bool
View source
is_disabledpub const fn is_disabled(self) -> bool—

Configures is disabled for this part.

pub const fn is_disabled(self) -> bool
View source
panel_is_mountedpub const fn panel_is_mounted(self) -> bool—

Configures panel is mounted for this part.

pub const fn panel_is_mounted(self) -> bool
View source

AccordionItem::root_with

View source
pub fn root_with(self, root: Element) -> Element

AccordionItem::root

View source
pub fn root(self) -> Element

Create the unstyled root part. Use [`Self::root_with`] to supply an existing element.

AccordionItem::header_with

View source
pub fn header_with(self, header: Element) -> Element

Decorate the caller-owned heading that contains only this item's trigger.

AccordionItem::header

View source
pub fn header(self) -> Element

Create the unstyled header part. Use [`Self::header_with`] to supply an existing element.

AccordionItem::trigger_with

View source
pub fn trigger_with(self, trigger: Element) -> Element

AccordionItem::trigger

View source
pub fn trigger(self) -> Element

Create the unstyled trigger part. Use [`Self::trigger_with`] to supply an existing element.

AccordionItem::panel_with

View source
pub fn panel_with(self, panel: Element) -> Option<Element>

Decorate the item panel as a named accessibility region when mounted.

AccordionItem::panel

View source
pub fn panel(self) -> Option<Element>

Create the unstyled panel part. Use [`Self::panel_with`] to supply an existing element.