Doggo Storybook 0.9.0

Stack

Applies a vertical margin between the child elements.

Read more Read less

Usage

<.stack>
  <div>some block</div>
  <div>some other block</div>
</.stack>

By default, the margin is only applied to the direct children of the component. To apply a vertical margin on children at any nesting level, set the recursive attribute.

<.stack recursive>
  <div>
    <div>some nested block</div>
    <div>another nested block</div>
  </div>
  <div>some other block</div>
</.stack>
Dogs bring joy and companionship to our lives. Their loyalty and playful nature make them cherished pets in many households.
Training a dog requires patience and consistency. Using positive reinforcement, like treats and praise, helps in teaching commands effectively.
Different breeds have unique traits. For example, Labradors are known for their friendliness, while Border Collies are celebrated for their intelligence.
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. []
recursive :boolean If `true`, the stack margins will be applied to nested children as well. false
rest :global Any additional HTML attributes.
Required inner_block * :slot 
<div>Dogs bring joy and companionship to our lives. Their loyalty and playful nature make them cherished pets in many households.</div>
<div>Training a dog requires patience and consistency. Using positive reinforcement, like treats and praise, helps in teaching commands effectively.</div>
<div>Different breeds have unique traits. For example, Labradors are known for their friendliness, while Border Collies are celebrated for their intelligence.</div>