The screen acts as a wrapper for a paper (or other container) to sit in and only provides the sizing/centering with the stacking visual effect. The top level of a page will likely be a screen but it doesnt have to be.
When using Screen elements, the @@app marker needs to be set on the body. The
marker sets some styles that the ws-screen interacts with to make things work
correctly.
Defines how wide the screen's contents will be.
default: min(720px, 100%)
Increasing the stack number increases the space surrounding a screen, creating a stacking effect when multiple screens are overlayed with incrementing stack values.
<ws-badge ws-text="test" ws-x="[$color @warning]">
<button ws-x="[$outline] [$color @primary]">
Clicky
</button>
</ws-badge>
<ws-screen ws-x="[$left] [theme tron] [@stack 2]">
<ws-paper ws-x="[r 0px]">
<ws-titlebar ws-x="[$fill] [$color @secondary]" slot="header">
<span ws-x="[$title]" slot="title">Sub Screen</span>
</ws-titlebar>
<ws-flex ws-x="[over auto]" slot="content">
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
<div>this is content that scrolls</div>
</ws-flex>
</ws-paper>
<ws-toaster ws-x="[$tc]">
<ws-notification ws-x="[$color @accent]">
<ws-icon class="ti-hexagon">Something cool</ws-icon>
</ws-notification>
</ws-toaster>
</ws-screen>
<ws-toaster ws-x="[$bl]">
<ws-notification ws-x="[$color @danger]">
<ws-icon class="ti-hexagon">Something cool</ws-icon>
</ws-notification>
</ws-toaster>