MATES
Apply flex-row or flex-column styles to any element via a directive.
import { row, col } from 'mates-ui';
import { html, atom } from 'mates';
// row(justifyContent, alignItems, extraProps?)
html`
<header ${row('between', 'center', { gap: '1rem', py: '0.75rem', px: '1.5rem' })}>
<h1>Logo</h1>
<nav>Menu</nav>
</header>
`
// col(justifyContent, alignItems, extraProps?)
html`
<ul ${col('start', 'stretch', { gap: '0.5rem', p: '0' })}>
${items.map(item => html`<li>${item.label}</li>`)}
</ul>
`
// Reactive — re-applied when opts change
const direction = atom<'row' | 'column'>('row');
html`
<section ${direction() === 'row'
? row('start', 'center', { gap: '1rem' })
: col('start', 'stretch', { gap: '0.5rem' })
}>…</section>
`;Both directives take justifyContent, alignItems, and an optional props object. Apply with lit-html directive syntax: ${row(...)}.
They re-apply on every render, so reading an atom in the arguments makes layout reactive.
Toggle between row() and col() on the same section.