@allakando/allakando-web-ui/dist/storybook/assets/containers.stories-6ec1dc72.js

Allakando's web component library

import"./DialogManager-abca015e.js";import{i as d}from"./StyleInjection-7d750a8d.js";const t=`# Containers

Allakando's design system content container can be imported using containers.css.

After applying the stylesheets you will be able to use the .container class to create centered layouts in your application with breakpoints configured for different resolutions.

For positioning elements you can use a number of utility classes like so:

- .grid will create a css grid. You can control the maximum length of the items inside by configuring --ako-grid-item-max-measurement, as well as the spacing between items by using --ako-grid-gap-h and --ako-grid-gap-v.
- .flex-right and flex-down will create flex layouts going in the right direction and down direction (row and column)`,c={title:"Style Injection/Containers",component:"Containers",tags:["autodocs"],parameters:{docs:{description:{component:t}}}},e=()=>(window.AllakandoWebUI={injectStyle:d},`
        <script>
            AllakandoWebUI.injectStyle({
                containers: true
            })
        <\/script>
        <div style="min-height:300px;background-color:#323232;padding:1rem;" class="container">
            <h3 style="color:white;">Grid with maximum 200px item width</h3>
            <div class="grid" style="--ako-grid-item-max-measurement:200px;">
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 1</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 2</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 3</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 4</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 5</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 6</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 7</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 8</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 9</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 10</div>
            </div>
        </div>
    `);var r,o,i;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
  window.AllakandoWebUI = {
    injectStyle
  };
  return \`
        <script>
            AllakandoWebUI.injectStyle({
                containers: true
            })
        <\/script>
        <div style="min-height:300px;background-color:#323232;padding:1rem;" class="container">
            <h3 style="color:white;">Grid with maximum 200px item width</h3>
            <div class="grid" style="--ako-grid-item-max-measurement:200px;">
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 1</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 2</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 3</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 4</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 5</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 6</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 7</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 8</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 9</div>
                <div style="padding:1rem;background-color:darkgray;color:white;">Item 10</div>
            </div>
        </div>
    \`;
}`,...(i=(o=e.parameters)==null?void 0:o.docs)==null?void 0:i.source}}};const l=["Template"];export{e as Template,l as __namedExportsOrder,c as default};