diff options
1 files changed, 0 insertions, 184 deletions
| -rw-r--r-- | docs/src/contents/menu.pug | 184 |
diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug deleted file mode 100644 index 45ba53b..0000000 --- a/docs/src/contents/menu.pug +++ /dev/null @@ -1,184 +0,0 @@ -p Menus are vertical list of links or buttons for actions and navigation. - -.docs-demo.columns - .column.col-4.col-xs-12 - ul.menu - li.menu-item - .tile.tile-centered - .tile-icon - img.avatar(src="img/avatar-4.png" alt="Avatar") - .tile-content - | Steve Rogers - li.divider - li.menu-item - .menu-badge - label.label.label-primary 2 - a.active(href="#menus") - | My profile - li.menu-item - a(href="#menus") - | Settings - li.menu-item - a(href="#menus") - | Logout - .column.col-4.col-xs-12 - ul.menu - li.divider(data-content="LINKS") - li.menu-item - a(href="#menus") Slack - li.menu-item - a(href="#menus") Hipchat - li.menu-item - a(href="#menus") Skype - .column.col-4.col-xs-12 - ul.menu - li.menu-item - label.form-checkbox - input(type="checkbox" checked="") - i.form-icon - | form-checkbox - li.menu-item - label.form-radio - input(type="radio" checked="") - i.form-icon - | form-radio - li.menu-item - label.form-switch - input(type="checkbox" checked="") - i.form-icon - | form-switch - -p - | Add a container element with the #[code menu] class. - | And add child elements with the #[code menu-item] class. - | You can separate menu items with a #[code divider]. - | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus. -p - | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <ul class="menu"> - <!-- menu header text --> - <li class="divider" data-content="LINKS"> - </li> - <!-- menu item standard --> - <li class="menu-item"> - <a href="#"> - <i class="icon icon-link"></i> Slack - </a> - </li> - <!-- menu item with form control --> - <li class="menu-item"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> form-checkbox - </label> - </li> - <!-- menu divider --> - <li class="divider"></li> - <!-- menu item with badge --> - <li class="menu-item"> - <div class="menu-badge"> - <label class="label label-primary">2</label> - </div> - <a href="#"> - <i class="icon icon-link"></i> Settings - </a> - </li> - </ul> - -+docs-subheading('menu-dropdown', 'Dropdown menu') - -p The dropdown is a combination of buttons and menus. - -.docs-demo.columns - .column.col-xs-12 - .dropdown - .btn-group - a.btn.btn-primary dropdown button - a.btn.btn-primary.dropdown-toggle(tabindex="0") - i.icon.icon-caret - ul.menu - li.menu-item - a(href="#dropdowns") - | Slack - li.menu-item - a(href="#dropdowns") - | Hipchat - li.menu-item - a(href="#dropdowns") - | Skype - .column.col-xs-12 - .dropdown - a.btn.btn-link.dropdown-toggle(tabindex="0") - | dropdown button - i.icon.icon-caret - ul.menu - li.menu-item - a(href="#dropdowns") - | Slack - li.menu-item - a(href="#dropdowns") - | Hipchat - li.menu-item - a(href="#dropdowns") - | Skype - -p - | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event. -p - | Add a container element with the #[code dropdown] class. - | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it. - | You also need to add #[code tabindex] to make the buttons focusable. -p - | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen. - -.docs-demo.columns - .column.col-xs-12.text-right - .dropdown.dropdown-right - a.btn.btn-primary.dropdown-toggle(tabindex="0") - | dropdown button - i.icon.icon-caret - ul.menu.text-left - li.menu-item - a(href="#dropdowns") Slack - li.menu-item - a(href="#dropdowns") Hipchat - li.menu-item - a(href="#dropdowns") Skype - -p - | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container. - -pre.code(data-lang='HTML') - code - :highlight(lang="html") - <!-- basic dropdown button --> - <div class="dropdown"> - <a href="#" class="btn btn-link dropdown-toggle" tabindex="0"> - dropdown menu <i class="icon icon-caret"></i> - </a> - <!-- menu component --> - <ul class="menu"> - ... - </ul> - </div> - - <!-- dropdown button group --> - <div class="dropdown"> - <div class="btn-group"> - <a href="#" class="btn"> - dropdown button - </a> - <a href="#" class="btn dropdown-toggle" tabindex="0"> - <i class="icon icon-caret"></i> - </a> - - <!-- menu component --> - <ul class="menu"> - ... - </ul> - </div> - </div>
\ No newline at end of file |