GroupCollect 1.3.215
- 1.1.0

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>

flat variant: renders a titleless, shadowless read-only card. Use the :remove slot to add an icon-only trash button (its label is the accessible name). The slot is optional; omit it for a card with no remove action:

<.details_card variant="flat">
  <:remove label="Remove contact" on_click={JS.push("remove")} />
  <: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
variant :string "default"
rest :global
action :slot
Show slot attributes Hide slot attributes
Required icon * :string
on_click %JS{}
href :string 
<:action icon="pencil-simple-line" href="https://groupcollect.com/">Edit</:action>
<:detail label="Full name">
  Mary Jane Francis
</:detail>
<:detail label="Email">
  mjfrancis@freshvegetables.com
</:detail>
<:detail label="Role">
  Sales Manager
</:detail>
remove :slot
Show slot attributes Hide slot attributes
Required label * :string
Required on_click * %JS{}
detail :slot
Show slot attributes Hide slot attributes
Required label * :string 
<:action icon="pencil-simple-line" href="https://groupcollect.com/">Edit</:action>
<:detail label="Full name">
  Mary Jane Francis
</:detail>
<:detail label="Email">
  mjfrancis@freshvegetables.com
</:detail>
<:detail label="Role">
  Sales Manager
</:detail>