diff options
author | Phil Hughes <me@iamphill.com> | 2017-11-17 13:57:58 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-11-17 13:57:58 +0300 |
commit | 883d5da1a0cb505125d80f3705420581720b6124 (patch) | |
tree | 84c39a1cf6200e18298734b822ae58dcbb3abacb | |
parent | c07c6a5f075c69cda894ddd35b808fa1dc8bf85f (diff) | |
parent | dc15440b17067430889e2022d2835e85023aa496 (diff) |
Merge branch 'dropdown-docs' into 'master'
Add dropdowns documentation
See merge request gitlab-org/gitlab-ce!15396
-rw-r--r-- | doc/development/fe_guide/dropdowns.md | 38 | ||||
-rw-r--r-- | doc/development/fe_guide/index.md | 2 |
2 files changed, 40 insertions, 0 deletions
diff --git a/doc/development/fe_guide/dropdowns.md b/doc/development/fe_guide/dropdowns.md new file mode 100644 index 00000000000..e1660ac5caa --- /dev/null +++ b/doc/development/fe_guide/dropdowns.md @@ -0,0 +1,38 @@ +# Dropdowns + + +## How to style a bootstrap dropdown +1. Use the HTML structure provided by the [docs][bootstrap-dropdowns] +1. Add a specific class to the top level `.dropdown` element + + + ```Haml + .dropdown.my-dropdown + %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false } + %span.dropdown-toggle-text + Toggle Dropdown + = icon('chevron-down') + + %ul.dropdown-menu + %li + %a + item! + ``` + + Or use the helpers + ```Haml + .dropdown.my-dropdown + = dropdown_toggle('Toogle!', { toggle: 'dropdown' }) + = dropdown_content + %li + %a + item! + ``` + +1. Include the mixin in CSS + + ```SCSS + @include new-style-dropdown('.my-dropdown '); + ``` + +[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md index 8f956681693..73a03c07812 100644 --- a/doc/development/fe_guide/index.md +++ b/doc/development/fe_guide/index.md @@ -77,6 +77,8 @@ Vue resource specific practices and gotchas. ## [Icons](icons.md) How we use SVG for our Icons. +## [Dropdowns](dropdowns.md) +How we use dropdowns. --- ## Style Guides |