Doggo Storybook 0.10.4-58-gbc96e61

Box

Renders a box for a section on the page.

Read more Read less

Usage

Minimal example with only a box body:

<.box>
  <p>This is a box.</p>
</.box>

With title, banner, action, and footer:

<.box>
  <:title>Profile</:title>
  <:banner>
    <img src="banner-image.png" alt="" />
  </:banner>
  <:action>
    <button_link patch={~p"/profiles/#{@profile}/edit"}>Edit</button_link>
  </:action>

  <p>This is a profile.</p>

  <:footer>
    <p>Last edited: <%= @profile.updated_at %></p>
  </:footer>
</.box>
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
rest :global

Any additional HTML attributes.
action :slot

A slot for action buttons related to the box.

 
<:action>
  <.link patch="/profiles/1/edit">Edit</.link>
</:action>
banner :slot

A slot that can be used to render a banner image in the header.
footer :slot

An optional slot for the footer.

 
<:footer>
  <p>Last edited: 2023/12/26</p>
</:footer>
Required inner_block * :slot

Slot for the content of the box body.

 
<p>
  Dogs are known for their loyalty and companionship. Whether you're
  looking for a playful pup or a calm and cuddly companion, there's a dog
  out there waiting for you. From energetic retrievers to gentle lap dogs,
  each breed has its own unique traits that can match your lifestyle.
  Visit your local shelter today to find the perfect furry friend to bring
  joy and love into your home
</p>
title :slot

The title for the box.

 
<:title>Adopt a Loyal Friend</:title>