Beacon.LiveAdmin.StationUI.HTML.Accordion (Beacon LiveAdmin v0.4.0)

View Source

Summary

Functions

The accordion component renders a list of items with child content that can be expanded or collapsed.

Functions

accordion(assigns)

The accordion component renders a list of items with child content that can be expanded or collapsed.

Example

<.accordion> <:header>

Title something 1

</:header> <:content>

Content something 1

</:content> </.accordion>

Suggested size classes for header (default: md):

sm: "p-1 text-base sm:text-lg gap-x-0.5" md: "p-1 text-base sm:text-lg md:text-xl md:py-1 md:pr-1 md:pl-1.5 md:gap-x-1" lg: "p-1 text-base sm:text-lg md:text-xl lg:text-2xl md:py-1 md:pr-1 md:pl-1.5 lg:pl-2 md:gap-x-1 lg:gap-x-1.5" xl: "p-1 text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl md:pt-1 md:pb-0 md:pr-1 md:pl-1.5 lg:pl-4 sm:gap-x-3 md:gap-x-4 lg:gap-x-5"

Suggested size classes for content (default: md):

sm: "text-base" md: "grid transition-grid-rows text-base md:text-lg" lg: "md:text-lg lg:text-xl" xl: "md:text-lg lg:text-xl xl:text-2xl"

Attributes

  • id (:string)
  • Global attributes are accepted.

Slots

  • header (required) - Accepts attributes:
    • button_id (:string)
    • class (:string) - text-base sm:text-lg md:text-xl.
  • content (required) - Accepts attributes:
    • class (:string) - text-base md:text-lg.