Permalink
Browse files

[doc] bootstrap: added example for each bootstrap widgets

  • Loading branch information...
1 parent 5701953 commit 1f7a698ac38bc2519b6b60f496b3efa9f640d66f @Aqua-Ye Aqua-Ye committed Nov 14, 2012
@@ -1,5 +1,37 @@
import-plugin bootstrap-button
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.button
+ *
+ * function page() {
+ *
+ * <button id=#bt1 type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
+ * <button id=#bt2 type="button" class="btn" data-toggle="button">Single Toggle</button>
+ * <div class="btn-group" data-toggle="buttons-checkbox">
+ * <button type="button" class="btn">Left</button>
+ * <button type="button" class="btn">Middle</button>
+ * <button type="button" class="btn">Right</button>
+ * </div>
+ * <div class="btn-group" data-toggle="buttons-radio">
+ * <button type="button" class="btn">Left</button>
+ * <button type="button" class="btn">Middle</button>
+ * <button type="button" class="btn">Right</button>
+ * </div>
+ * <button id=#bt3 type="button" class="btn" data-complete-text="finished!" >...</button>
+ *
+ * <div onclick={function (_) Button.toggle(#bt2)}>Toggle</div>
+ * <div onclick={function (_) Button.loading(#bt1)}>Loading</div>
+ * <div onclick={function (_) Button.reset(#bt1)}>Reset</div>
+ * <div onclick={function (_) Button.button(#bt3, "complete")}>Complete</div>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Button", ~page })
+ *
+ */
@client
Button = {{
@@ -2,6 +2,54 @@ import-plugin bootstrap-collapse
import stdlib.widgets.bootstrap.transition
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.collapse
+ *
+ * function page() {
+ *
+ * <div class="accordion" id="accordion">
+ * <div class="accordion-group">
+ * <div class="accordion-heading">
+ * <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ * Collapsible Group Item #1
+ * </a>
+ * </div>
+ * <div id="collapseOne" class="accordion-body collapse in">
+ * <div class="accordion-inner">
+ * Anim pariatur cliche...
+ * </div>
+ * </div>
+ * </div>
+ * <div class="accordion-group">
+ * <div class="accordion-heading">
+ * <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ * Collapsible Group Item #2
+ * </a>
+ * </div>
+ * <div id="collapseTwo" class="accordion-body collapse">
+ * <div class="accordion-inner">
+ * Anim pariatur cliche...
+ * </div>
+ * </div>
+ * </div>
+ * </div>
+ * <div id=#cl1 class="collapse in">Some Text</div>
+ * <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#cl1">
+ * Collapse
+ * </button>
+ *
+ * <div onclick={function (_) Collapse.toggle(#cl1)}>Toggle</div>
+ * <div onclick={function (_) Collapse.show(#cl1)}>Show</div>
+ * <div onclick={function (_) Collapse.hide(#cl1)}>Hide</div>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Collapse", ~page })
+ *
+ */
@client
Collapse = {{
@@ -1,5 +1,36 @@
import-plugin bootstrap-dropdown
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.dropdown
+ *
+ * function page() {
+ *
+ * <div class="dropdown">
+ * <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
+ * <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ * <li>hello</li>
+ * <li>world</li>
+ * </ul>
+ * </div>
+ * <div class="dropdown">
+ * <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+ * Dropdown
+ * <b class="caret"></b>
+ * </a>
+ * <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ * <li>hello</li>
+ * <li>world</li>
+ * </ul>
+ * </div>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Dropdown", ~page })
+ *
+ */
@client
Dropdown = {{
@@ -7,6 +7,31 @@ type Modal.options = {
show: bool
}
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.modal
+ *
+ * function page() {
+ *
+ * Modal.make("md1",
+ * <>Modal header</>,
+ * <p>One fine body…</p>,
+ * <a href="#" class="btn">Close</a>
+ * <a href="#" class="btn btn-primary">Save changes</a>,
+ * Modal.default_options) <+>
+ * <a href="#md1" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
+ *
+ * <div onclick={function (_) Modal.show(#md1)}>Show</div>
+ * <div onclick={function (_) Modal.hide(#md1)}>Hide</div>
+ * <div onclick={function (_) Modal.toggle(#md1)}>Toggle</div>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Modal", ~page })
+ *
+ */
@client
Modal = {{
@@ -2,6 +2,26 @@ import-plugin bootstrap-popover
import stdlib.widgets.bootstrap.tooltip
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.popover
+ *
+ * function page() {
+ *
+ * <ul onready={function (_) Popover.init(Dom.select_raw_unsafe("*[rel=popover]"), Popover.default_options)}>
+ * <li><a class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on top">Popover on top</a></li>
+ * <li><a class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on right">Popover on right</a></li>
+ * <li><a class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on bottom">Popover on bottom</a></li>
+ * <li><a class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on left">Popover on left</a></li>
+ * </ul>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Popover", ~page })
+ *
+ */
@client
Popover = {{
@@ -1,5 +1,31 @@
import-plugin bootstrap-tab
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.tab
+ *
+ * function page() {
+ *
+ * <ul class="nav nav-tabs" id="myTab">
+ * <li class="active"><a id=#home-tab href="#home" onclick={function (_) Tab.show(#home-tab)}>Home</a></li>
+ * <li><a id=#profile-tab href="#profile" onclick={function (_) Tab.show(#profile-tab)}>Profile</a></li>
+ * <li><a id=#messages-tab href="#messages" onclick={function (_) Tab.show(#messages-tab)}>Messages</a></li>
+ * <li><a id=#settings-tab href="#settings" onclick={function (_) Tab.show(#settings-tab)}>Settings</a></li>
+ * </ul>
+ * <div class="tab-content">
+ * <div class="tab-pane active" id="home">... Home ...</div>
+ * <div class="tab-pane" id="profile">... Profile ...</div>
+ * <div class="tab-pane" id="messages">... Messages ...</div>
+ * <div class="tab-pane" id="settings">... Settings ...</div>
+ * </div>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Tab", ~page })
+ *
+ */
@client
Tab = {{
@@ -11,6 +11,26 @@ type Tooltip.options = {
trigger: Tooltip.trigger
}
+/**
+ * Example:
+ *
+ * import stdlib.themes.bootstrap
+ * import stdlib.widgets.bootstrap.tooltip
+ *
+ * function page() {
+ *
+ * <ul onready={function (_) Tooltip.init(Dom.select_raw_unsafe("*[rel=tooltip]"), Tooltip.default_options)}>
+ * <li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
+ * <li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
+ * <li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
+ * <li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
+ * </ul>
+ *
+ * }
+ *
+ * Server.start(Server.http, { title: "Tooltip", ~page })
+ *
+ */
@client
Tooltip = {{

0 comments on commit 1f7a698

Please sign in to comment.