Doggo Storybook 0.9.0

Property List

Renders a list of properties as key/value pairs.

Read more Read less

This component is useful for displaying data in a structured format, such as a list of attributes for an entity. Each property is rendered as a <dt> element for the label and a <dd> element for the value.

Usage

Each property is specified using the :prop slot with a label attribute and an inner block.

<.property_list>
  <:prop label={gettext("Name")}>George</:prop>
  <:prop label={gettext("Age")}>42</:prop>
</.property_list>
Name
Apollo
Age
5
Breed
Golden Retriever
Favorite Toy
Frisbee
Owner
Katrin Dinkelschrot
Health Conditions and Dietary Requirements
Apollo has a sensitive stomach and requires a special diet, including grain-free food and regular vet check-ups.
Attribute Type Documentation Default Value
class :any Any additional classes to be added. 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.
prop :slot A property to be rendered. 
<:prop label="Name">Apollo</:prop>
<:prop label="Age">5</:prop>
<:prop label="Breed">Golden Retriever</:prop>
<:prop label="Favorite Toy">Frisbee</:prop>
<:prop label="Owner">Katrin Dinkelschrot</:prop>
<:prop label="Health Conditions and Dietary Requirements">Apollo has a sensitive stomach and requires a special diet, including grain-free food and regular vet check-ups.</:prop>