diff options
author | Rohit Sharma <rohit2sharma95@gmail.com> | 2021-04-20 08:19:57 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-20 08:19:57 +0300 |
commit | b59b75bc55ad9d5d2d0259f6b3364a7bcb82b033 (patch) | |
tree | 95009186c927d217575e7e4a6ae9f4afa0fd3c67 /site | |
parent | a22f4d3cfd46ad040e0eb636c378fdb832704e07 (diff) |
Dropdown — Add option to make the dropdown menu clickable (#33389)
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.0/components/dropdowns.md | 66 |
1 files changed, 65 insertions, 1 deletions
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index b5ded08a5b..d29212790a 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -903,6 +903,56 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo </div> {{< /example >}} +### Auto close behavior + +By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown. + +{{< example >}} +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> + Default dropdown + </button> + <ul class="dropdown-menu" aria-labelledby="defaultDropdown"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> + Clickable outside + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"> + Clickable inside + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> + +<div class="btn-group"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false"> + Manual close + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable"> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + <li><a class="dropdown-item" href="#">Menu item</a></li> + </ul> +</div> +{{< /example >}} + ## Sass ### Variables @@ -967,7 +1017,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d ### Options -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`. <table class="table"> <thead> @@ -1008,6 +1058,20 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </td> </tr> <tr> + <td><code>autoClose</code></td> + <td>boolean | string</td> + <td><code>true</code></td> + <td> + <p>Configure the auto close behavior of the dropdown:</p> + <ul> + <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li> + <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li> + <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> + <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li> + </ul> + </td> + </tr> + <tr> <td><code>popperConfig</code></td> <td>null | object | function</td> <td><code>null</code></td> |