Modal
This modal is truly amazing.
This panel is toggleable. Click on the header to toggle.
<div class="panel" data-panel-view>
<div class="panel-heading pointer" data-panel-view-toggle>
Panel
</div>
<div class="panel-block" data-panel-view-body>
<p>
This panel is toggleable. Click on the header to toggle.
</p>
</div>
</div>
<div data-tab-view>
<div class="tabs">
<ul>
<li class="is-active" data-tab-view-control>
<a href="javascript:void(0)">Tab 1</a>
</li>
<li data-tab-view-control>
<a href="javascript:void(0)">Tab 2</a>
</li>
</ul>
</div>
<div data-controlled-by="Tab 1" data-tab-view-pane>
<p>
This is the the first tab. With any luck, it contains something very interesting.
</p>
</div>
<div class="is-hidden" data-controlled-by="Tab 2" data-tab-view-pane>
<p>
This is the second tab. With not much luck, it contains even more interesting information than does tab 1.
</p>
</div>
</div>
<div data-modal-view>
<button class="button" data-modal-view-control="activate">Launch Modal</button>
<div class="modal" data-modal-view-subject>
<div class="modal-background" data-modal-view-control="deactivate"></div>
<div class="modal-content">
<div class="box">
<div class="content">
<h1>
Modal
</h1>
<p>
This modal is truly amazing.
</p>
</div>
</div>
</div>
<button aria-label="close" class="modal-close is-large" data-modal-view-control="deactivate"></button>
</div>
</div>
<div class="message" data-dismiss-view>
<div class="message-header">
Dismiss <span class="delete" data-dismiss-control></span>
</div>
<div class="message-body">
Body
</div>
</div>
<div class="notification" data-dismiss-view>
<button class="delete" data-dismiss-control></button>Notification Body
</div>
<div class="dropdown" data-dropdown-view>
<div class="dropdown-trigger" data-dropdown-view-control>
<button aria-controls="dropdown-menu" aria-haspopup="true" class="button"><span>Toggle Dropdown</span><span class="icon is-small"><i aria-hidden="true" class="fa fa-angle-down"></i></span></button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" href="javascript:void(0)">Dropdown Content </a>
</div>
</div>
</div>
<div data-load="remote/basic.html">
<span class="icon is-small"><i class="fa fa-circle-o-notch fa-spin"></i></span><span> Loading...</span>
</div>
<form action="remote/form.html" class="is-marginless" data-load method="GET">
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input class="input" name="email" type="text" />
</div>
</div>
<div class="field">
<label class="label">Feedback</label>
<div class="control">
<textarea class="input" name="feedback" type="text"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<button class="button">Submit</button>
</div>
</div>
</form>This text will remain here for both Main and Auxiliary contexts.
<div data-context-view>
<h1 class="title is-5" data-context="main">
Main
</h1>
<h1 class="title is-5 is-hidden" data-context="auxiliary">
Auxiliary
</h1>
<div class="is-hidden notification is-info" data-context="auxiliary">
An important message about the auxiliary action.
</div>
<div class="content">
<p>
This text will remain here for both <span class='tag'>Main</span> and <span class='tag'>Auxiliary</span> contexts.
</p>
</div>
<div class="box">
<div data-context="main">
Here is the location of the main content
</div>
<div class="is-hidden" data-context="auxiliary">
<h6 class="subtitle">
Contact
</h6>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" />
</div>
</div>
</div>
</div>
<hr />
<div data-context="main">
<button class="button is-info" data-set-context="auxiliary">Auxiliary Action</button><span> </span><span class="tag">← Click! </span>
</div>
<button class="button is-hidden" data-context="auxiliary" data-set-context="main"><span class="icon"><i class="fa fa-refresh"></i></span><span>reset</span></button>
</div>
<div data-enable-cycling data-tab-view>
<div class="columns">
<div class="column is-4">
<div class="panel">
<div class="panel-heading">
Sidebar
</div>
<a class="panel-block is-active" data-forward-event="focus => click" data-tab-view-control href="javascript:void(0)">Basics</a><a class="panel-block" data-forward-event="focus => click" data-tab-view-control href="javascript:void(0)">Advanced</a><a class="panel-block" data-forward-event="focus => click" data-tab-view-control href="javascript:void(0)">Really Advanced</a>
</div>
</div>
<div class="column">
<div data-controlled-by="Basics" data-tab-view-pane>
Click on the "Advanced" tab to the left!
</div>
<div class="is-hidden" data-controlled-by="Advanced" data-tab-view-pane>
Now press the down key!
</div>
<div class="is-hidden" data-controlled-by="Really Advanced" data-tab-view-pane>
Press the down key again if this is too advanced for you.
</div>
</div>
</div>
</div>