Generic container component for making areas visually distinct from each other on the page.
required
The main content of the paper. Paper elements expect the content to be a single
element with any number of child elements so that when the other slots are
present everything aligns properly.
Puts content at the top of the paper, above the content. If the content area scrolls, the header will stay in place without the need for hacky setups to make a sticky header.
Puts content at the bottom of the paper, above the content. If the content area scrolls, the footer will stay in place without the need for hacky setups to make a sticky footer.
<ws-flex>
<ws-paper>
<ws-flex ws-x="[$content]">
Just some paper
</ws-flex>
</ws-paper>
<ws-paper>
<ws-titlebar ws-x="[$header]">
<span ws-x="[$title]">This one has a header</span>
</ws-titlebar>
<ws-flex ws-x="[$content]">
With some content \o/
</ws-flex>
<ws-flex ws-x="[$footer] [h 64px] [over auto]">
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
<div>Scrolling Footer Content</div>
</ws-flex>
</ws-paper>
<ws-paper ws-x="[$outline] [$color @secondary]">
<ws-titlebar ws-x="[$header]">
<span ws-x="[$title]">Give them some color</span>
</ws-titlebar>
<ws-flex ws-x="[$content]">
And a border + some controls in the footer
</ws-flex>
<ws-grid ws-x="[$footer] [gr.cols 1fr 1fr]">
<button ws-x="[$flat] [$color @danger]">Cancel</button>
<button ws-x="[$flat] [$color @secondary]">Use Windstorm</button>
</ws-grid>
</ws-paper>
</ws-flex>