Displays a list of tabs with some default styling. Tabs use hidden input tags
(the component hides the tags for you) to determine which tab is selected. The
hidden input tags need to be type="radio" for the tabs to work properly, and
normal form/radio input names behavior.
<ws-paper ws-x="[$outline]">
<ws-titlebar ws-x="[$header]">
<span ws-x="[$title] [$title-text]">Horizontal</span>
</ws-titlebar>
<div ws-x="[$content]">
<ws-tabs ws-x="[$color @primary] [w 50%]">
<label>
<input type="radio" name="tab" value="light" />
<ws-tab>Light</ws-tab>
</label>
<label>
<input type="radio" name="tab" value="dark"/>
<ws-tab>Dark</ws-tab>
</label>
<label>
<input type="radio" name="tab" value="tron" checked />
<ws-tab>Tron</ws-tab>
</label>
</ws-tabs>
<ws-tabs ws-x="[$fill] [$color @secondary] [w 50%]">
<label>
<input type="radio" name="tab2" value="light" />
<ws-tab>Light</ws-tab>
</label>
<label>
<input type="radio" name="tab2" value="dark" checked />
<ws-tab>Dark</ws-tab>
</label>
<label>
<input type="radio" name="tab2" value="tron" />
<ws-tab>Tron</ws-tab>
</label>
</ws-tabs>
</div>
</ws-paper>
<ws-paper ws-x="[$outline]">
<ws-titlebar ws-x="[$header]">
<span ws-x="[$title] [$title-text]">Vertical</span>
</ws-titlebar>
<div ws-x="[$content]">
<ws-tabs ws-x="[$vert] [w 30%] [p 8px]">
<label>
<input type="radio" name="tab3" value="light" />
<ws-tab>Light</ws-tab>
</label>
<label>
<input type="radio" name="tab3" value="dark" />
<ws-tab>Dark</ws-tab>
</label>
<label>
<input type="radio" name="tab3" value="tron" checked />
<ws-tab>Tron</ws-tab>
</label>
</ws-tabs>
<ws-tabs ws-x="[$fill] [$vert] [w 40%] [p 8px]">
<label>
<input type="radio" name="tab4" value="light" checked />
<ws-tab>Light</ws-tab>
</label>
<label>
<input type="radio" name="tab4" value="dark" />
<ws-tab>Dark</ws-tab>
</label>
<label>
<input type="radio" name="tab4" value="tron" />
<ws-tab>Tron</ws-tab>
</label>
</ws-tabs>
</div>
</ws-paper>