Details

Updated on August 22, 2024

BaleadaProseDetails is just a good old details/summary, but it also renders a custom chevron icon.

Example

Markdown

  ::: summary="There's some really interesting stuff in here..."
  Syke!
  :::

Rendered

There's some really interesting stuff in here...

Syke!

Props

Prop

Type

Required

Default

Description

summary

String

none

The text that will go inside the summary element.

classes

String

none

Adds additional classes to the component's root element.

Structure

Here's the structure of BaleadaProseDetails's markup, written in Pug for simplicity:

details.baleada-prose-details open // open is the boolean attribute that determines whether or not the details are open
  summary
    svg // Chevron icon
    span // Contains the text from the summary prop
  section.baleada-prose-contents
    slot // Your content slots in here

API design compliance

[WIP]

Codeblock Heading

Edit doc on GitHub

Filter by package