Summary Files Commits Branches @commit @diff @stats
path: root / docs / components.html
diff options
context:
space:
mode:
Commite172df26f25a46ebc673fc016ee7dad2b4defa97 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-03-04 18:19:09 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2017-03-04 18:19:09 +0800
Files6ce03f258d77231c5d70ad093c7f708e5d7eb455 /docs/components.html
Spectre-Dark-Gruvbox-e172df26f25a46ebc673fc016ee7dad2b4defa97.tar
Spectre-Dark-Gruvbox-e172df26f25a46ebc673fc016ee7dad2b4defa97.tar.gz
Spectre-Dark-Gruvbox-e172df26f25a46ebc673fc016ee7dad2b4defa97.zip
Parentbf8daf7602432b265988c58df15d36844e7e3587 (diff)
Add tabindex note to the dropdowns docs
1 files changed, 1 insertions, 1 deletions
-rw-r--r--docs/components.html2
diff --git a/docs/components.html b/docs/components.html
index dddf425..76e6c60 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -688,7 +688,7 @@
</div>
<section class="notes">
<p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
- <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. If the dropdown is close to the right edge of the browser, you can add the class <code>dropdown-right</code> to the container to prevent it appearing off screen.</p>
+ <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the class <code>dropdown-right</code> to the container to prevent it appearing off screen.</p>
</section>
<section class="notes">
<p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p>