Details

Component Documentation

matestack core component: Details

Show specs

Use details to implement <details> and <summary> tags.

Parameters

<details> and <summary> can take two optional configuration params and optional content.

Optional configuration

id (optional)

Expects a string with all ids the details tag should have.

class (optional)

Expects a string with all classes the details tag should have.

Example 1

details id: 'foo', class: 'bar' do
  summary text: 'Greetings'
  plain "Hello World!" # optional content
end
<details id="foo" class="bar">
  <summary>Greetings</summary>
  Hello World!
</details>

Example 2

details id: 'foo', class: 'bar' do
  summary id: 'baz', text: 'Greetings'
  paragraph text: 'Hello World!'
end
<details id="foo" class="bar">
  <summary id="baz">Greetings</summary>
  <p>Hello World!</p>
</details>

Example 3 (Without Summary)

details id: 'foo' do
  plain "Hello World!"
end
<details id="foo">
  Hello World!
</details>