stack()

Apply Stack styles to any element via a directive.

import { stack } from 'mates-ui';
import { html } from 'mates';

// Same options as flex containers: direction, spacing, wrap, fill, gap, p/px/py…
html`
  <nav ${stack({ direction: 'row', spacing: 1 })}>
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </nav>
`

html`
  <aside ${stack({ spacing: 2, fill: true, p: '1rem' })}>
    <h3>Sidebar</h3>
    <ul>…</ul>
  </aside>
`;

Overview

stack({ direction, spacing, wrap, fill, … }) applies flex layout to a host element. Default direction is column.

Use it when you want the same API as the flex custom elements but without adding a wrapper node.

stack() on nav + aside

Horizontal nav and vertical sidebar — both via stack().

import { html, renderApp } from 'mates';

import { stack } from 'mates-ui';

const App = () => {

return () => html`

<nav ${stack({ direction: 'row', spacing: 1.5 })}

class="card card-body m-b-10"

<a href="#">About</a>

</nav>

<aside ${stack({ spacing: 1, p: '1rem' })}

class="card card-body"

<strong>Sidebar</strong>

</aside>

</div>

};

renderApp(App, document.getElementById('app'));

API — stack()

import { stack } from 'mates-ui';

Prop / Option	Type	Default	Description
`stack(opts?)`	`DirectiveResult`	—	Flex stack on any element. opts.direction defaults to column.
`opts.spacing / direction / wrap / fill / gap / …`	`StackOpts`	—	Same flex options as row/col, plus direction.