Barebones Components

Appearance

Return to top
On this page

WARNING

While the documentation is fairly complete, it is still in first draft.

Accordion (BonesAccordion)

Overview

The Barebones Accordion component is an accessible keyboard compatible accordion component.

Component parts

Part nameDescription
componentThe components root element.
titleThe nav element for the tab buttons
contentWrapperThe ul wrapper that sits inside the navigation element
contentThe li wrapper for individual tab buttons
Prop nameDescription
namename accepts an string of alphanumeric characters, dashes and underscores, name is a unique identifier for your accordion
initialStateinitialState accepts type State and can be OPEN or CLOSED, initialState defaults to OPEN
disableToggledisableToggle accepts boolean, if true, accordion will always be open, disableToggle defaults to false

Slots

Slot nameDescription
titleThe title slot is contains the button/title (state trigger) name - Barebones uses a slot rather than a prop for this title for more freedom like adding icons etc. You should ensure anything you place in the title slot is valid HTML inside a HTML button element.
contentThe content slot is contains the content of your accordion

Prop Types 

export type State = "OPEN" | "CLOSED";

Component Type 

export interface Accordion {
  parts: Parts;
}

Examples

WARNING

Examples use tailwind/salient theme, to use this theme you may add it using the theme npx command and installing Tailwind JIT in your application. Read more about themes.

Code 

<BonesAccordion name="bronx-tale">
  <template #title>What is the plot of A Bronx tale?</template>
  <template #content>
    <p>
      The Bronx, New York, 1960. 9-year-old Calogero grows up admiring and fascinated by the local mob boss, Sonny. Calogero's father, Lorenzo, wants to have nothing to do with the mob and does his best to keep his son away from Sonny and mob business. However, it may prove a losing battle.
    </p>
  </template>
</BonesTabs>

Output