GroupCollect 1.3.142

Details Card

Renders a details card component.

Read more Read less

Supports an optional action with ‘icon’ and ‘click’ attributes.

Examples

<.details_card title="Contact info">
  <:detail label="Full name">
    Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>

<.details_card title="Contact info">
  <:action icon="pencil" click={JS.push("...")}>Edit</:action>
  <:detail label="Full name">
    Jane Francis
  </:detail>
  <:detail label="Email">
    mjfrancis@freshvegetables.com
  </:detail>
  <:detail label="Role">
    Sales Manager
  </:detail>
</.details_card>

Contact info

Full name

Mary Jane Francis

Email

mjfrancis@freshvegetables.com

Role

Sales Manager

Attribute Type Documentation Default Value
title :string
rest :global
action :slot
Show slot attributes Hide slot attributes
Required icon * :string
on_click %JS{}
href :string 
<:action icon="pencil-simple-line" on_click={JS.toggle(to: "#with-clickable-action .details-card-click-demo")}>Edit</:action>
<:detail label="Full name">
  Mary Jane Francis
</:detail>
<:detail label="Email">
  mjfrancis@freshvegetables.com
</:detail>
<:detail label="Role">
  Sales Manager
</:detail>
detail :slot
Show slot attributes Hide slot attributes
Required label * :string 
<:action icon="pencil-simple-line" on_click={JS.toggle(to: "#with-clickable-action .details-card-click-demo")}>Edit</:action>
<:detail label="Full name">
  Mary Jane Francis
</:detail>
<:detail label="Email">
  mjfrancis@freshvegetables.com
</:detail>
<:detail label="Role">
  Sales Manager
</:detail>